jQuery EasyUI 提供了用于創建跨瀏覽器網頁的完整的組件集合，包括功能強大的 datagrid（數據網格）、treegrid（樹形表格）、 panel（面板）、combo（下拉組合）等等。 用戶可以組合使用這些組件，也可以單獨使用其中一個。
easyui 的每個組件都有屬性、方法和事件。用戶可以很容易地對這些組件進行擴展。
屬性是定義在 jQuery.fn.{plugin}.defaults。比如，dialog 的屬性是定義在 jQuery.fn.dialog.defaults。
事件（回調函數）也是定義在 jQuery.fn.{plugin}.defaults。
調用方法的語法：$('selector').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
});
下載庫，并在您的頁面中引用 EasyUI CSS 和 JavaScript 文件。
<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="/upload/help/easyui/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/upload/help/easyui/jquery.easyui.min.js"></script>
一旦您引用了 EasyUI 必要的文件，您就可以通過標記或者使用 JavaScript 來定義一個 EasyUI 組件。比如，要頂一個帶有可折疊功能的面板，您需要編寫如下 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' 屬性被用來支持自版本 1.3 以來 HTML5 兼容的屬性名稱。所以您可以如下重寫上面的代碼：
<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) }">
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
