jQuery EasyUI 插件

jQuery EasyUI 插件

插件列表

Base（基礎）

• Parser 解析器
• Easyloader 加載器
• Draggable 可拖動
• Droppable 可放置
• Resizable 可調(diào)整尺寸
• Pagination 分頁
• Searchbox 搜索框
• Progressbar 進度條
• Tooltip 提示框

Layout（布局）

• Panel 面板
• Tabs 標簽頁/選項卡
• Accordion 折疊面板
• Layout 布局

Menu（菜單）與 Button（按鈕）

• Menu 菜單
• Linkbutton 鏈接按鈕
• Menubutton 菜單按鈕
• Splitbutton 分割按鈕

Form（表單）

• Form 表單
• Validatebox 驗證框
• Combo 組合
• Combobox 組合框
• Combotree 組合樹
• Combogrid 組合網(wǎng)格
• Numberbox 數(shù)字框
• Datebox 日期框
• Datetimebox 日期時間框
• Calendar 日歷
• Spinner 微調(diào)器
• Numberspinner 數(shù)值微調(diào)器
• Timespinner 時間微調(diào)器
• Slider 滑塊

Window（窗口）

• Window 窗口
• Dialog 對話框
• Messager 消息框

DataGrid（數(shù)據(jù)網(wǎng)格）與 Tree（樹）

• Datagrid 數(shù)據(jù)網(wǎng)格
• Propertygrid 屬性網(wǎng)格
• Tree 樹
• Treegrid 樹形網(wǎng)格

插件

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

屬性

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

事件

事件（回調(diào)函數(shù)）也是定義在jQuery.fn.{plugin}.defaults。

方法

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

其中：

• selector是jquery對象選擇器。
• plugin是插件名稱。
• method是與插件相匹配的已存在方法。
• parameter是參數(shù)對象，可以是對象、字符串...

方法是定義在jQuery.fn.{plugin}.methods。每個方法有兩個參數(shù)：jq和param。第一個參數(shù)'jq'是必需的，引用jQuery對象。第二個參數(shù)'param'引用方法傳遞的實際參數(shù)。比如，要擴展dialog組件的方法名為'mymove'的方法，代碼如下：

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

現(xiàn)在您可以調(diào)用'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>

當通過標記創(chuàng)建組件，'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>

下面的代碼演示了如何創(chuàng)建一個綁定'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)     
    }">