easyui 入门指南

  所有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',代码像这样:

$.extend($.fn.dialog.methods, { 
    mymove: function(jq, newposition){ 
        return jq.each(function(){ 
            $(this).dialog('move', newposition); 
        }); 
    } 
}); 

 现在你可以调用 'mymove' 方法去移动dialog对话框到指定的位置.:

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

 jQuery EasyUI入门指南
 下载js库和引入easyui CSS和Havascript文件至你的页面

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

  你引入EasyUI必须的文件之后,你可以从标记或者JS定义一个EasyUI组件.例如,定义一个panel以及折叠功能 你可以像这样写HTML代码:

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

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

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

  以下代码展示如何创建一个组件,绑定'onSelect'事件.

<input class="easyui-combobox" name="language" 
        data-options=" 
            url:'combobox_data.json', 
            valueField:'id', 
            textField:'text', 
            panelHeight:'auto', 
            onSelect:function(record){ 
                alert(record.text) 
            }" />