一款非常推薦的用戶界面插件----EasyUI
前 言
easyui是一種基於jQuery的用戶界面插件集合。
easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。 使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。
easyui是個完美支持HTML5網頁的完整框架。easyui節省您網頁開發的時間和規模。easyui很簡單但功能強大的。
| 一、聲明組件的方法 |
jQuery EasyUI 提供易於使用的組件，它使 Web 開發人員能快速地在流行的 jQuery 核心和 HTML5 上建立程序頁面。 有兩個方法聲明的 UI 組件:
1. 直接在 HTML 聲明組件;
<div class="easyui-dialog" style="width:450px;height:220px" data-options="title:‘My Dialog‘"> 我創建的對話框 </div>
2. 編寫 JavaScript 代碼來創建組件。
<input id="a" style="width:230px" />
$(‘#a‘).combobox({ url: ..., required: true, valueField: ‘id‘, textField:‘text‘ });
| 二、組件的使用 |
1EasyUI窗口
1)創建簡單窗口
創建一個窗口（window）非常簡單，我們創建一個 DIV 標記：
<div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px;"> 內容區 </div>
運行結果如下：
一行簡單的代碼就可以快速地搭建一個窗口，並且還不用寫javascript，是不是非常好用。。
如果您希望創建一個隱藏的窗口（window），記得設置 ‘closed‘ 屬性為 ‘true‘ 值，您可以調用 ‘open‘ 方法來打開窗口（window）：
<div id="win" class="easyui-window" title="My Window" closed="true" style="width:300px;height:100px;padding:5px;"> 內容區 </div>
$(‘#win‘).window(‘open‘);
下面我們來創建一個簡單的登錄窗口：
<div id="win" class="easyui-window" title="Login" style="width:300px;height:180px;"> <form style="padding:10px 20px 10px 40px;"> <p>Name: <input type="text"></p> <p>Pass: <input type="password"></p> <div style="padding:5px;text-align:center;"> <a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a> <a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a> </div> </form> </div>
效果如圖所示：
2)自定義窗口工具欄
默認情況下，窗口（window）有四個工具：collapsible、minimizable、maximizable 和 closable。比如我們定義以下窗口（window）：
<div id="win" class="easyui-window" title="My Window" style="padding:10px;width:200px;height:100px;"> window content </div>
如需自定義工具，設置該工具為 true 或者 false。比如我們希望定義一個窗口（window），僅僅擁有一個可關閉的工具。您應該設置任何其他工具為 false。我們可以在標記中或者通過 jQuery 代碼定義 tools 屬性。現在我們使用 jQuery 代碼來定義窗口（window）：
$(‘#win‘).window({ collapsible:false, minimizable:false, maximizable:false });
如果我們希望添加自定義的工具到窗口（window），我們可以使用 tools 屬性。作為實例演示，我們添加兩個工具到窗口（window）：
$(‘#win‘).window({ collapsible:false, minimizable:false, maximizable:false, tools:[{ iconCls:‘icon-add‘, handler:function(){ alert(‘add‘); } },{ iconCls:‘icon-remove‘, handler:function(){ alert(‘remove‘); } }]
});
3)創建對話框
對話框（Dialog）是一個特殊的窗口（window），可以包含在頂部的工具欄和在底部的按鈕。默認情況下，對話框（Dialog）不能改變大小，但是用戶可以設置 resizable 屬性為 true，使其可以改變大小。
對話框（Dialog）非常簡單，可以從 DIV 標記創建，如下所示：
<div id="dd" class="easyui-dialog" style="padding:5px;width:400px;height:200px;" title="My Dialog" iconCls="icon-ok" toolbar="#dlg-toolbar" buttons="#dlg-buttons"> Dialog Content. </div>
準備工具欄（Toolbar）和按鈕（Button）
<div id="dlg-toolbar"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert(‘Add‘)">Add</a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert(‘Save‘)">Save</a> </div> <div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="javascript:alert(‘Ok‘)">Ok</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$(‘#dd‘).dialog(‘close‘)">Cancel</a> </div>
2EasyUI布局
1)為網頁創建邊框布局
邊框布局（border layout）提供五個區域：east、west、north、south、center。以下是一些通常用法：
- north 區域可以用來顯示網站的標語。
- south 區域可以用來顯示版權以及一些說明。
- west 區域可以用來顯示導航菜單。
- east 區域可以用來顯示一些推廣的項目。
- center 區域可以用來顯示主要的內容。
為了應用布局（layout），您應該確定一個布局（layout）容器，然後定義一些區域。布局（layout）必須至少需要一個 center 區域，以下是一個布局（layout）實例：
<div class="easyui-layout" style="width:400px;height:200px;"> <div region="west" split="true" title="Navigator" style="width:150px;"> <p style="padding:5px;margin:0;">Select language:</p> <ul> <li><a href="javascript:void(0)" onclick="showcontent(‘java‘)">Java</a></li> <li><a href="javascript:void(0)" onclick="showcontent(‘cshape‘)">C#</a></li> <li><a href="javascript:void(0)" onclick="showcontent(‘vb‘)">VB</a></li> <li><a href="javascript:void(0)" onclick="showcontent(‘erlang‘)">Erlang</a></li> </ul> </div> <div id="content" region="center" title="Language" style="padding:5px;"> </div> </div>
我們在一個<div> 容器中創建了一個邊框布局（border layout），布局（layout）把容器切割為兩個部分，左邊是導航菜單，右邊是主要內容。
最後我們寫一個 onclick 事件處理函數來檢索數據，‘showcontent‘ 函數非常簡單：
function showcontent(language){ $(‘#content‘).html(‘Introduction to ‘ + language + ‘ language‘); }
2)在面板中創建復雜布局
面板（Panel）允許您創建用於多種用途的自定義布局。在本實例中，我們使用面板（panel）和布局（layout）插件來創建一個 msn 消息框。
我們在區域面板中使用多個布局（layout）。在消息框的頂部我們放置一個查詢輸入框。在中間的區域我們通過設置 split 屬性為 true，把這部分切割為兩部分，允許用戶改變區域面板的尺寸大小。
以下就是所有代碼：
<div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;"> <div class="easyui-layout" fit="true"> <div region="north" border="false" class="p-search"> <label>Search:</label><input></input> </div> <div region="center" border="false"> <div class="easyui-layout" fit="true"> <div region="east" border="false" class="p-right"> <img src="img/zxx.jpg"/> </div> <div region="center" border="false" style="border:1px solid #ccc;"> <div class="easyui-layout" fit="true"> <div region="south" split="true" border="false" style="height:60px;"> <textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea> </div> <div region="center" border="false"> </div> </div> </div> </div> </div> </div> </div>
3)動態添加標簽頁
通過使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要調用 ‘add‘ 方法即可。
我們將使用 iframe 動態地添加顯示在一個頁面上的 Tabs。 當點擊添加按鈕，一個新的 tab 將被添加。如果 tab 已經存在，它將被激活。
步驟 1：創建 Tabs
<div style="margin-bottom:10px"> <a href="#" class="easyui-linkbutton" onclick="addTab(‘google‘,‘http://www.google.com‘)">google</a> <a href="#" class="easyui-linkbutton" onclick="addTab(‘jquery‘,‘http://jquery.com/‘)">jquery</a> <a href="#" class="easyui-linkbutton" onclick="addTab(‘easyui‘,‘http://jeasyui.com/‘)">easyui</a> </div> <div id="tt" class="easyui-tabs" style="width:400px;height:250px;"> <div title="Home"> </div> </div>
步驟 2：實現 ‘addTab‘ 函數
function addTab(title, url){ if ($(‘#tt‘).tabs(‘exists‘, title)){ $(‘#tt‘).tabs(‘select‘, title); } else { var content = ‘<iframe scrolling="auto" frameborder="0" src="‘+url+‘" style="width:100%;height:100%;"></iframe>‘; $(‘#tt‘).tabs(‘add‘,{ title:title, content:content, closable:true }); } }
EasyUI還有很多很多好用的組件，包括強大的DataGrid，樹網格，面板。用戶可以使用他們一起，或者只是用一些組件，組合和構建他想要的跨瀏覽器的網頁應用。
有很多教程和演示應用幫助你了解這個框架。本文全部內容引自EasyUI教程。所有組件內容解釋的都非常詳細易懂。
鏈接地址為http://www.jeasyui.net/tutorial/
希望你能從中得到幫助。
一款非常推薦的用戶界面插件----EasyUI