JQuery易用户界面的使用

JQuery EasyUI是一个基于JQuery的框架，集成了各种用户界面插件。

易居介绍

Easyui是基于jQuery的用户界面插件的集合。

Easyui为创建现代、交互式和JavaScript应用程序提供了必要的功能。

有了easyui，你不需要写很多代码，只需要写一些简单的HTML标签来定义用户界面。

Easyui是一个完整的框架，完美地支持HTML5网页。

Easyui为您节省了网络开发的时间和规模。

Easyui简单但功能强大。

本文重点介绍了EasyUI的两种使用方法，包括easyload按需智能加载不同的负载。最后，了解Parser解析器的用法。

注：所有代码将在文章最后一页统一介绍。

一、必要文件介绍。

由于jQuery EasyUI1.4.4刚刚更新，这个小微版本的更新主要是内部优化和UI的一些微调，并不影响学习本身。之前我们用中文手册1.2.4版本学习1.3.5没有任何障碍，所以不用担心版本。

在整篇文章中，JQuery EasyUI的目录结构如下图所示。

easyui文件夹是用于保存JQuery EasyUI的所有文件。

JS文件夹是保存我们自己的JS文件。

Index.html是保存我们自己写的html代码。

//介绍jQuery核心库。给你。脚本类型=' text/JavaScript ' src=' http : asiyui/jQuery . min . js '/script//介绍jQuery EasyUI核心库。在这篇论文中，脚本类型=' text/JAVAScript ' src=' http : ASI yui/jquery。EasyUI . min . js '/script//用于介绍easyui中文提示信息。脚本类型=' text/。JavaScript ' src=' http : easyui/locale/Easyui-lang-zh _ cn . js '/script//导入自己开发的JS文件script Type=' text/JavaScript ' src=' http 3360 JS/index . JS '/script//引入easyui核心UI文件CSS linkrel='样式表' type=' text/CSS ' href=' EasyUI/themes/default/EasyUI . CSS '///引入EasyUI图标文件linkrel='样式表' type='

第二，UI组件的加载方式。

加载UI组件有两种方式：1。以类模式加载它们；2.用JS调用加载。

//使用类以下列格式加载：easui-组件名div class=' easui-dialog ' id=' box ' title=' title ' style=' width : px；' height:px'Part /divPS:可以使用指定的格式生成UI组件，这是由于jQuery EasyUI的Parser的功能。解析后，可以从Firebug中看到UI组件的更改后的HTML。

//使用JS调用加载$('#box ')。dialog()；PS:一般建议使用第二个JS调用加载，因为一个UI组件有很多属性和方法，用类会极其不方便。根据JS和HTML分离的原则，第二种方法提高了代码的可读性。

Iii .使用easyload.js智能加载。

//删除jQuery 易UI的JS核心文件和CSS。介绍easyloader.js文件script type=' text/JAVAScript ' src=' http : asiyui/jquery . min . JS '/script script type=' text/JAVAScript ' src=' http : asiyui/easy loader . JS '/script//JS代码easyloader.load ('dialog '，function () {$ ('# box ')。dialog()；});easyloader智能加载是基于你使用的UI组件。我们可以通过Firebug查看HTML，发现加载了很多js文件，这些都是对话框组件的必备条件。因此，使用easyloader加载将减少不必要的内容加载。但问题是，使用智能加载，增加了你编码的难度和成本，降低了效率。而且智能加载的js文件数量还是很大的，不会太提高速度。相反，由于js文件较多，需要通过搜索引擎进行合并和优化。

第四，Parser解析器。

解析器解析器专门解析和呈现各种UI组件。一般来说，我们可以不使用它就自动完成UI组件的解析。当然，在某些情况下可能需要手动解析。当使用类时，手动解析通常是有效的，例如设置class=' easui-dialog '。

解析器属性

属性名默认值的描述。

$.parser.auto true定义是否自动解析EasyUI组件//关闭自动解析功能并将其放在$(function() {})之外。$ .parser.auto=false解析器方法

名称传输参数描述。

Empty $.parser.parse或JQ选择器解析指定的UI组件$.parser.onComplete回调函数，然后执行//解析所有UI $ . parser . parse()；//解析指定的UI $ . parser . Parse(“# box”)；PS:使用指定的UI进行解析，必须先设置父类容器，然后才能解析为。例如：

div id=' box ' div class=' easui-dialog ' title=' title ' style=' width :400 px；' height:200px'Span内容部分/span/div/div//将在ui组件解析后执行，并放在$(function () {}) $之外。parser . on complete=function(){ alert(' ui组件已解析！'。);};以上内容介绍了JQuery EasyUI的使用，希望对大家有所帮助！