easyui 入门指南

@author   YHC

  所有easyui组件都有,属性,方法,事件,用户可以简单的对其扩展.

属性

属性定义在 jQuery.fn.{plugin}.defaults中.例如, 对话框组件[dialog]的属性定义在jQuery.fn.dialog.defaults.

事件

事件(回调函数)也定义在jQuery.fn.{plugin}.defaults.

方法

调用方法语法: $('selector').plugin('method', parameter);相信$('selector')中的'selector'大家只要使用过jQuery的都应该知道,如果你不知道,建议你去先看jQuery

Where:

• 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入门指南

 下载js库和引入easyui CSS和Havascript文件至你的页面

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必须的文件之后,你可以从标记或者JS定义一个EasyUI组件.例如,定义一个panel以及折叠功能 你可以像这样写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>  

当从标记创建一个组件, 可以使用'data-options' 属性去支持HTML5,从1.3版本开始兼容的属性名称, 所以你可以重写以上代码为:

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.             }" />  

原文 API 地址

EasyUI 1.3中文 API 地址