Welcome

文档

easyui的每个组件都有属性，方法和事件。用户可以很方便地扩展它们。

属性

属性在jQuery.fn.{plugin}.defaults里定义。例如，dialog组件的属性在jQuery.fn.dialog.defaults里定义。

事件

事件（回调函数）也在jQuery.fn.{plugin}.defaults里定义。

方法

调用方法的语法：$('selector').plugin('method', parameter);

在这里：

selector是指jquery对象选择器。

plugin是指组件的名字。

method是指相应组件已经存在的方法。

parameter是指参数对象，可以是一个对象，字符串……

方法也在jQuery.fn.{plugin}.methods里定义。每个方法有两个参数：jq和param.第一个参数'jq'是必须的，它是jQuery对象。第二个参数'param'是指真正传递给方法的参数。例如，扩展dialog组件一个名叫'mymove'的方法，代码看起来像这样：

1. $.extend($.fn.dialog.methods, {  
2.     mymove: function(jq, newposition){  
3.         return jq.each(function(){  
4.             $(this).dialog('move', newposition);  
5.         });  
6.     }  
7. });  

现在你可以调用'mymove'方法移动dialog到指定的位置：

1. $('#dd').dialog('mymove', {  
2.     left: 200,  
3.     top: 100  
4. }); 

jQuery EasyUI入门

下载库并包含EasyUI CSS和JavaScript文件到你的页面。

1. <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">  
2. <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">  
3. <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script>  
4. <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>  

一旦你导入了EasyUI必须的文件，就可以用标签或者使用JavaScript定义一个EasyUI组件。例如，要定义一个可折叠功能的面板，你写的HTML代码看起来像这样：

1. <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"  
2.         title="My Panel" iconCls="icon-save" collapsible="true">  
3.     The panel content  
4. </div> 

从1.3版本开始，当你使用标签创建一个组件时，'data-options'属性可以被用来支持HTML5兼容的属性。所以你可以重写上面的代码为：

1. <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"  
2.         title="My Panel" data-options="iconCls:'icon-save',collapsible:true">  
3.     The panel content  
4. </div> 

下面的代码展示了如何创建一个绑定'onSelect'事件的组合框。

1. <input class="easyui-combobox" name="language"  
2.         data-options="  
3.             url:'combobox_data.json',  
4.             valueField:'id',  
5.             textField:'text',  
6.             panelHeight:'auto',  
7.             onSelect:function(record){  
8.                 alert(record.text)  
9.             }" />