一款很是推薦的用戶界面插件----EasyUI（轉載）

 

 

  前  言

　    easyui是一種基於jQuery的用戶界面插件集合。

       easyui爲建立現代化，互動，JavaScript應用程序，提供必要的功能。 使用easyui你不須要寫不少代碼，你只須要經過編寫一些簡單HTML標記，就能夠定義用戶界面。

easyui是個完美支持HTML5網頁的完整框架。easyui節省您網頁開發的時間和規模。easyui很簡單但功能強大的。

 

1、聲明組件的方法

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' });

 

2、組件的使用

 

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/

但願你能從中獲得幫助。