Jquery easyui文档

基础

每个easyui的组件都有属性，方法和事件，开发者可以很方便的扩展他们。

属性

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

事件

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

方法

调用方法的语法类似：$(‘selector‘).plugin(‘method‘, parameter)；

具体来说：

1. Selector就是jquery的对象选择器；
2. Plugin是插件名；
3. Method是plugin对应的方法；
4. Parameter是一个参数对象，可以是一个object，string等；

方法定义在jQuery.fn.{plugin}.methods。每个方法都有两个参数：jq和param，其中第一个参数jq是必须的，这个参数代表的是你要组件对象，第二个参数代表的是要传递给新定义的方法的参数。例如：我们准备在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之后，我们就可以调用mymove方法来移动对话框组件到我们指定的位置了：

1.  $(‘#dd‘).dialog(‘mymove‘, {

2.      left: 200,

3.      top: 100

4.  });

Jqueryeasy UI起步

下载（并在你开发的页面中INCLUDE）相应JS库文件和相应easyui的css文件等：

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.min.js"></script>

4.  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

一旦你的页面中include包含了easyui需要的问题之后，你就可以在自己的页面使用html标记或者js代码定义一个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>

在使用html标记创建组件的时候，从easyui的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.              }">

解析器

用途

1.  $.parser.parse();       // 解析整个页面

2.  $.parser.parse(‘#cc‘);  // 解析特定的节点

属性

事件

方法

EasyLoader

用途

载入easyui模块

1.  easyloader.base = ‘../‘;    // 设定easyui的主路径

2.  easyloader.load(‘messager‘, function(){        // 载入具体的模、、块

3.      $.messager.alert(‘Title‘, ‘load ok‘);

4.  });

从绝对路径载入脚本

1.  using(‘http://code.jquery.com/jquery-1.4.4.min.js‘, function(){

2.      // ...

3.  });

从相对路径载入脚本

1.  // the script path relative to easyui directory

2.  using(‘./myscript.js‘, function(){

3.      // ...

4.  });

属性

预定义的本地化对象

• af
• bg
• ca
• cs
• cz
• da
• de
• en
• es
• fr
• nl
• tr
• zh_CN（简体中文）
• zh_TW（繁体中文）

事件

方法

拖拽

用法介绍

用html标记创建一个可拖拽组件

1. <div id="dd"
   class="easyui-draggable" data-options="handle:‘#title‘" style="width:100px;height:100px;">
2. <div id="title" style="background:#ccc;">title</div>
3. </div>

用js创建一个可拖拽组件

1. <div id="dd"
   style="width:100px;height:100px;">
2. <div id="title" style="background:#ccc;">title</div>
3. </div>

1. $(‘#dd‘).draggable({
2. handle:‘#title‘
3. });

属性

$(‘.dragitem‘).draggable({

        proxy: function(source){

               var p = $(‘<div style="border:1px solid #ccc;width:80px"></div>‘);

               p.html($(source).html()).appendTo(‘body‘);

               return p;

        }

});（没有看明白）

Events

方法