基于jQuery的jQuery-easyUI下载和使用

最新推荐文章于 2023-03-01 15:11:43 发布

原创最新推荐文章于 2023-03-01 15:11:43 发布 · 2.7k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#easyUI的下载和使用 #easyUI #jQuery

easyUI 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何下载并使用jQuery-easyUI。首先，提供了easyUI的官方下载地址，并说明了下载后的文件目录结构。接着，通过一个简单的DEMO展示了easyUI的链接按钮样式，强调了在使用过程中，需要按照jQuery核心库、easyUI核心库、中文支持库的顺序引入JS文件，同时要包含easyUI的样式和图标样式CSS文件。

一.下载easyUI

下载地址： http://www.jeasyui.com/download/index.php

下载--解压--打开文件目录如图：

二.使用easyUI

一个小demo，只是展示easyUI的链接按钮样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>jQuery-easyui初使用</title>
		<script type="text/javascript" src="jquery-easyui-1.5.5.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.2/themes/default/easyui.css" type="text/css"/>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.2/themes/icon.css" type="text/css"/>
		<script type="text/javascript">
			$(function() {
				$("#testDiv").css("text-align","center");
				$("#test01").css("font-size","150%");
			});
			function test01() {
				$("#test01").css("color","red");
			}
			function test02() {
				$("#test02").css("color","red");
			}
		</script>
	</head>
	<body>
		<div id="testDiv" style="margin-top:50px">
			<a href="javascript:void(0)" id="test01" onclick="test01()" style="margin-right:20px">test01</a>
			<a href="javascript:;" id="test02" class="easyui-linkbutton"  iconCls="icon-search" onclick="test02()">test02</a>
		</div>
	</body>	
</html>

因为easyUI是基于jQuery的，所以引入js顺序不能有错

第一个js是jQuery精简版核心库

第二个js是easyUI核心库

第三个js是让easyUI支持中文

第一个css文件是easyUI样式

第二个css文件是easyUI图标样式