jQuery EasyUI 插件

上一頁： jQuery EasyUI數據網格與樹插件– Treegrid樹形網格

jQuery EasyUI 提供了用於創建跨瀏覽器網頁的完整的組件集合，包括功能強大的datagrid（數據網格）、treegrid（樹形表格）、 panel（面板）、combo（下拉組合）等等。用戶可以組合使用這些組件，也可以單獨使用其中一個。

插件列表

Base（基礎）

Layout（佈局）

Menu（菜單）與Button（按鈕）

Form（表單）

Window（窗口）

DataGrid（數據網格）與Tree（樹）

插件

easyui 的每個組件都有屬性、方法和事件。用戶可以很容易地對這些組件進行擴展。

屬性

屬性是定義在jQuery.fn.{plugin}.defaults。比如，dialog 的屬性是定義在jQuery.fn.dialog.defaults。

事件

事件（回調函數）也是定義在jQuery.fn.{plugin}.defaults。

方法

調用方法的語法：$('selector').plugin('method', parameter);

其中：

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

下載庫，並在您的頁面中引用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="easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="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)
    }">

上一頁： jQuery EasyUI數據網格與樹插件– Treegrid樹形網格

下一頁： jQuery EasyUI擴展

jQuery EasyUI 教程

jEasyUI 應用

jEasyUI 拖放

jEasyUI 菜單與按鈕

jEasyUI 佈局

jEasyUI 數據網格

jEasyUI 窗口

jEasyUI 樹形菜單

jEasyUI 表單

jEasyUI 參考手冊