所有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="width: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="width: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)
}" />

easyui 入門指南