EasyUI項目驅動學習

標籤：jquery   easyui   

下面以一個項目簡單介紹easyui的使用,主要包括以下組件

布局面板 - layout

可伸縮面板 - accordion

選項卡 - tabs

控制台 - panel

視窗 - window

對話方塊 - dialog

訊息視窗 - messager

資料表格 - datagrid

分頁 - pagination

樹型菜單 - tree

等等...

可先下載項目源碼 對各個組件有個大致瞭解 http://download.csdn.net/detail/itmyhome/7605957

jQuer EasyUI布局-為網頁建立邊框布局(layout)

邊框布局(border layout)提供五個地區：east、west、north、south、center.以下是一些通常用法：

north 地區可以用來顯示網站的標語。

south 地區可以用來顯示著作權以及一些說明。

west 地區可以用來顯示導覽功能表。

east 地區可以用來顯示一些推廣的項目。

center 地區可以用來顯示主要的內容。

為了應用布局(layout),您應該確定一個布局(layout)容器,然後定義一些地區。

布局(layout)必須至少需要一個center地區,以下是一個布局(layout)執行個體：

<div id="tt" class="easyui-layout" style="width:100%;height:100%;">      <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>      <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>      <div data-options="region:‘east‘,title:‘East‘,split:true" style="width:100px;"></div>      <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>      <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>  </div> 

jQuery EasyUI布局-建立摺疊面板(accordion)

伸縮面板允許您提供多個面板和顯示一次。每個小組有內建支援擴充和收縮。點擊一個面板標題展開或摺疊,面板的身體。

面板內容可以通過ajax載入通過指定一個"href"屬性。使用者可以定義一個小組被選中。如果沒有指定,那麼第一個面板是預設了。

<div id="tt" class="easyui-accordion" style="width: 300px; height: 200px;"><div title="Title1" style="padding: 10px;">content1</div><div title="Title2" style="padding: 10px;">content2</div><div title="Title3" style="padding: 10px;">content3</div></div>

jQuery EasyUI布局-建立標籤頁(Tabs)

這個選項卡顯示面板的集合。它顯示了只有一個選項卡面板在一個時間。

每個選項卡面板的標題和一些迷你按鈕的工具,包括關閉按鈕和其他定製按鈕。

<div id="tt" class="easyui-tabs" style="width: 500px; height: 250px;"><div title="Tab1" style="padding: 20px; display: none;">tab1</div><div title="Tab2" data-options="closable:true"style="overflow: auto; padding: 20px; display: none;">tab2</div><div title="Tab3" data-options="closable:true"style="padding: 20px; display: none;">tab3</div></div>

jQuery EasyUI 布局-面版(Panel)

面版用作其他內容的容器。這是基本組件構建其他組件(如布局、標籤、摺疊等。它還提供了內建的可摺疊、

可閉,maximizable和minimizable行為和其他定製的行為。面板可以很容易地嵌入到web頁面的任何位置。

<div id="p" class="easyui-panel" title="My Panel"style="width: 500px; height: 150px; padding: 10px; background: #fafafa;"data-options="iconCls:‘icon-save‘,closable:true,   collapsible:true,minimizable:true,maximizable:true"><p>panel content.</p><p>panel content.</p></div>

jQuery EasyUI 視窗-建立簡單視窗(Window)

該視窗是一個浮動層形成的可拖動面板,可以用來作為一個應用程式視窗。預設情況下，

一個視窗可以移動,調整大小和關閉。無論是作為靜態HTML或通過AJAX動態載入其內容也可以被定義。

<div id="win" class="easyui-window" title="My Window"style="width: 600px; height: 400px"data-options="iconCls:‘icon-save‘,modal:true">Window Content</div>

jQuery EasyUI 視窗-建立對話方塊(Dialog)

該對話方塊是一種特殊類型的視窗,它可以有一個工具列上的頂部和底部的按鈕欄。該對話方塊只有一個頭預設情況下,顯示在右上方的關

閉工具。

<div id="dd" class="easyui-dialog" title="My Dialog"style="width: 400px; height: 200px;"data-options="iconCls:‘icon-save‘,resizable:true,modal:true">Dialog Content.</div>

jQuery EasyUI 訊息視窗-建立訊息框(Messager)

$.messager.alert(‘Warning‘,‘The warning message‘);  $.messager.confirm(‘Confirm‘,‘Are you sure you want to delete record?‘,function(r){       if (r){   alert(‘ok‘);       }   });  

暫且先寫到這裡吧,其實上面也都是API裡面的東西,

這些東西寫起來太枯燥,自己都覺得是在敷衍了。有興趣的可以下載項目源碼去詳細瞭解http://download.csdn.net/detail/itmyhome/7605957

還有datagrid、pagination、tree沒有介紹,希望還有後續章節來介紹...


轉載請註明出處：http://blog.csdn.net/itmyhome1990/article/details/37502601