jQuery Easy UI的使用

浏览数：55 / 时间：2015年06月09日

一、初步认识

1、什么是jQuery Easy UI

jQuery Easy UI是一组基于jQuery的UI插件集合，而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。

官方网站http://www.jeasyui.com

2、jQuery EasyUI有哪些特点

（1）、基于 jquery 用户界面插件的集合；

（2）、源代码加密、商业版付费

（3）、使用 EasyUI 你不需要写很多的 javascript 代码，通常只需要写 HTML 标记来定义用户界面即可；

（4）、支持 HTML5

（5）、简单，但很强大，开发产品时可节省时间和资源；

（6）、支持拓展，可根据自己的需求拓展控件

3、是否兼容低版本IE ,本人使用的是1.3.6版本，不支持IE8及以下版本。

二、引入必要的文件：

引入 jQuery 核心库，这里采用的是 2.0

引入 jQuery EasyUI 核心库，这里采用的是 1.3.6

引入 EasyUI 中文提示信息

引入自己开发的 JS 文件

引入 EasyUI 核心 UI 文件 CSS

引入 EasyUI 图标文件

三、加载UI组件的方式：

1、使用class方式加载

使用 class 加载，格式为：easyui-组件名

内容部分

</div>

示例：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body>
<div id="box">
	<div class="easyui-dialog" title="标题" style="width:400px;height:200px">
		内容部分	
	</div>
</div>
</body>
</html>

PS：使用了规定的格式就可以生成一个 UI 组件，这是由于 jQuery EasyUI 的一个解析器（Parser）的起到了作用。解析之后，从 Firebug 里面可以看到

UI 组件变化后的HTML。

2、使用JS调用加载

$(‘#box‘).dialog();

示例：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
<script>
	// 使用js调用加载的方式
	$(function(){
		$("#box").dialog();
	})
</script>
</head>
<body>
	<div  id="box"  title="标题" style="width:400px;height:200px">
		内容部分
	</div>
</body>
</html>

PS：一般推荐使用第二种 JS 调用加载，因为一个 UI 组件有很多属性和方法，如果使用 class 的用法将极大的不方便。并且根据 JS 和 HTML 分离的原则，

第二种提高了代码的可读性。

3、使用easyload.js智能加载

//删除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件

//JS 代码

easyloader.load(‘dialog‘, function () {

$(‘#box‘).dialog();

});

示例：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script>
	//使用easyload.js智能加载（按需加载）
	$(function(){
		easyloader.load('dialog',function(){
			$("#box").dialog();
		})
	})
</script>
</head>
<body>
	<div  id="box"  title="标题" style="width:400px;height:200px">
		内容部分
	</div>
</body>
</html>

四、Parser解析器使用场景及注意事项

parser，故名意思，就是解析器的意思，别看他只有那么几行代码，jQuery Easyui 能够根据class就能正常渲染页面全靠它了。一般情况下，我们并用不到解

析器，本文主要讨论一下，什么情况下会用到它，如何使用。

1、自动调用parser：

我们之所以在页面中，只要书写相应的class，Easyui就能成功渲染页面，这是因为解析器在默认情况下，会在文档装载完成的时候($(document).ready)被调用

一次，而且是渲染整个页面。

2、手动调用parper：

当页面DOM已经装载完毕，我们通过JavaScript代码再去创建class属性为easyui相应值的节点的时候，那么该节点不会被渲染，因为parser只是在页面装载完的

时候渲染一下整个页面，而不会一直监视着整个页面。所以需要我们手动调用parser去渲染。

parser示例：

<!DOCTYPE html>
<html>
<head>
<title>parserDemo</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
<script>
	$(function(){
		//为什么我们只用class属性的时候就能加载UI组件，因为页面在DOM装载完成后会自动执行一次$.parser.parse();
		$.parser.onComplete=function (){
			alert('DOM装载完毕,自动解析,完成');
		}
	})

	function f (){
		/**
		在DOM加载之后手动指定class属性是不能够完成渲染的，因为parser只是在DOM装载完成
		后解析一次，不会一直监视着DOM页面的变化的,所以下面还要显式调用$.parser.parse();
		*/
		$("#box").attr("class","easyui-dialog");

		//$.parser.parse("#box"); 注意：这个是不好使的，因为parse()带参数的时候渲染的是JQ选择器指定元素的父类
		$.parser.parse(("#p_box"));

		//它还有个回调函数
		$.parser.onComplete=function (){
			alert('手动渲染解析完成');
		}
	}
</script>
</head>
<body>
	<div id="p_box">
		<div id="box"  title="标题" style="width:400px;height:200px">
			内容部分
		</div>
	</div>

	<input type="button" value="手动渲染" onclick="f()">
</body>
</html>

点击下载源代码

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery Easy UI的使用