简介

easyui是一种基于jQuery的用户界面插件集合。它可以帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。

EasyUI优势

1. easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

2.使用easyui不需要写很多代码，只需通过编写一些简单HTML标记，就可以定义用户界面。

3. easyui是个完美支持HTML5网页的完整框架。

4. easyui节省网页开发的时间和规模。

5. easyui很简单但功能强大的。

EasyUI组成

• EasyUI.js核心文件
• EasyUI.style样式对象
• EasyUI.math.js数学对象
• JSTweener.js缓动对象
• EasyUI.color.js颜色对象
• 可扩展的附加组件

关于EasyUI控件的使用

 

easyui库作为一个相对成熟的js前端框架，提供了非常丰富的UI控件，包括form表单控件、layout布局控件、gird控件等等。 这里对使用easyui控件过程中的一些注意事项进行说明。 

控件组成部分 

每一个easyui控件通常都是由属性（Properties）、事件（Events）和方法（Methods）这些组成部分。 

控件自身用到的信息可以通过属性存储，控件可以利用某些属性（比如url）完成特定的操作；控件基于事件驱动，开发人员可以在控件初始化的时候，为控件绑定一些特定事件（比如：form的onSubmit事件）；easyui为每个控件提供了操作控件相关内容的函数，每个函数对应特定的功能（比如：datagrid的options方法，可以获取datagrid控件的属性设置）。

控件的继承特性 

在easyui中使用了继承特性，在定义了一部分基础控件的基础上（比如：tree、combo等），可以扩展出功能更完善的控件，比如：基于combo的扩展combotree、combogrid、combobox，基于panel的扩展有tab、layout、Accordion等。 

Easyui控件的继承特性，在父控件中定义的属性适用于子控件，比如有这么一个业务场景，combobox中输入框默认是可以编辑，在我们的业务上需要屏蔽对combobox的编辑功能。针对刚才的业务场景，我们去查看combobox的属性（通常控件的属性可以对控件进行控制），但是在combobox的一堆属性中没有一个可以用于控制输入框的编辑性。不过由于easyui控件拥有继承特性，父控件中定义的属性适用于子控，所以可以查看combobox继承了哪些控件，API告诉我们combobox继承了combo这个控件，同时combo的属性中有editable这一项，专门用于控制编辑框的可编辑性，所以easyui控件的继承特性很好的解决了我们项目中遇到的问题。

在使用EasyUI之前必须先声明UI控件，我们有两个方法声明它：

1. 直接在 HTML声明组件。

<div class="easyui-dialog" style="width:400px;height:200px"    
data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">        
dialog content.
</div>
  

2. 编写 JavaScript 代码来创建组件。

<input id="cc"style="width:200px" />

$('#cc').combobox({	
url: ...,	
required: true,	
valueField: 'id',	
textField: 'text'}
);