JqueryEasyUI學習教程

1、教程概述這個教程的目的是說明如何使用easyui框架容易的創(chuàng)建網(wǎng)頁。首先，你需要包含一些js和css文件：easyui預定義了一些圖標css，這些css類可以顯示圖片背景（1616）。使用這些類之前，需要包含：內(nèi)容1. 拖放o 基本拖放o 創(chuàng)建購物車式拖放o 創(chuàng)建課程表基本拖放這個教程顯示如何使HTML元素變得可拖放。這個例子會創(chuàng)建3個DIV元素然后讓它們變得可拖放。首先，創(chuàng)建三個DIV元素： 讓第一個DIV元素可拖放，使用默認的拖放樣式。$(#dd1).draggable();讓第二個DIV元素使用proxy來拖放，proxy:clone表示proxy使用原始元素的復制。$(#dd2).dr

2、aggable( proxy:clone);讓第三個DIV元素使用自定義proxy來拖放$(#dd3).draggable( proxy:function(source) var p = $(proxy); p.appendTo(body); return p; );構建購物車型拖放使用jQuery easyui，我們在web應用中就有了拖放的能力。這個教程顯示了如何構建購物車頁，它使用戶拖放他們希望購買的產(chǎn)品，更新購物籃的物品和價格。顯示產(chǎn)品頁： Balloon Price:$25 Feeling Price:$25 ul元素包含一些li元素以顯示產(chǎn)品。每一個產(chǎn)品的名稱和單價屬性在P元素中。

3、創(chuàng)建購物車： Shopping Cart Name Quantity Price Total: $0 Drop here to add to cart使用datagrid顯示購物籃項目。拖曳產(chǎn)品副本$(.item).draggable( revert:true, proxy:clone, onStartDrag:function() $(this).draggable(options).cursor = not-allowed; $(this).draggable(proxy).css(z-index,10); , onStopDrag:function() $(this).draggable

4、(options).cursor=move; );我們設置draggable屬性proxy為clone，所以拖曳元素使用clone效果。將選擇的產(chǎn)品放入購物車$(.cart).droppable( onDragEnter:function(e,source) $(source).draggable(options).cursor=auto; , onDragLeave:function(e,source) $(source).draggable(options).cursor=not-allowed; , onDrop:function(e,source) var name = $(sourc

5、e).find(p:eq(0).html(); var price = $(source).find(p:eq(1).html(); addProduct(name, parseFloat(price.split($)1); );var data = total:0,rows:;var totalCost = 0;function addProduct(name,price) function add() for(var i=0; idata.total; i+) var row = data.rowsi; if ( = name) row.quantity += 1; ret

6、urn; data.total += 1; data.rows.push( name:name, quantity:1, price:price ); add(); totalCost += price; $(#cartcontent).datagrid(loadData, data); $(div.cart .total).html(Total: $+totalCost);當放下產(chǎn)品時，我們得到產(chǎn)品的名稱和單價，然后調(diào)用addProduct函數(shù)更新購物籃。創(chuàng)建課程表本教程顯示了如何使用jQuery easyui創(chuàng)建課程表。我們創(chuàng)建兩個表：在左面的課程列表和右面的時間表。你可以拖課程到時間表的

7、單元格中。課程是元素，時間格是元素。顯示課程 English Science 顯示時間表 Monday Tuesday Wednesday Thursday Friday 08:00 拖動左面的課程$(.left .item).draggable( revert:true, proxy:clone);放置課程到時間表中$(.right td.drop).droppable( onDragEnter:function() $(this).addClass(over); , onDragLeave:function() $(this).removeClass(over); , onDrop:fun

8、ction(e,source) $(this).removeClass(over); if ($(source).hasClass(assigned) $(this).append(source); else var c = $(source).clone().addClass(assigned); $(this).empty().append(c); c.draggable( revert:true ); );當用戶拖動左面的課程到右面的時間表中，onDrop函數(shù)被調(diào)用。源元素的副本被從左面拖動并且附加到到時間表的單元格中。當放置課程到時間表的單元格到另一個單元格時，簡單的移動它。2. 菜單

9、和按鈕Menu and Button o 建立簡單菜單o 建立鏈接按鈕o 建立菜單按鈕o 建立分割按鈕創(chuàng)建簡單菜單 在DIV標記中定義菜單。像這樣： New Open Word Excel PowerPoint Save Exit建立菜單，你需要運行下列jQuery代碼$(#mm).menu();/或者 $(#mm).menu(options);當菜單被創(chuàng)建時是不可見的，可使用show方法顯示或者hide方法隱藏：$(#mm).menu(show, left: 200, top: 100);現(xiàn)在，我們創(chuàng)建菜單并在（200,100）處顯示。運行代碼會得到：創(chuàng)建連接按鈕 通常使用元素創(chuàng)建按鈕。鏈接

10、按鈕使用A元素創(chuàng)建，事實上，鏈接按鈕是A元素但顯示為按鈕樣式。創(chuàng)建鏈接按鈕，首先創(chuàng)建A元素：DEMO1 Cancel Refresh Query text button Print DEMO2 Cancel Refresh Query text button Print   icon屬性是icon CSS類是在按鈕上顯示的圖標。運行代碼，出現(xiàn)：一些時候，你可以決定禁用或者不禁用連接按鈕，使用下面的代碼可以禁用連接圖標：$(selector).linkbutton(disabled:true);建立菜單按鈕菜單按鈕包含按鈕和菜單兩部分，當點擊或者移動鼠標到按鈕上的時候，顯示相應的菜單。

11、定義菜單按鈕，需要定義鏈接按鈕和菜單，像這樣： Edit Help Undo Redo Cut Copy Paste Delete Select All Help Update About 使用下列jQuery代碼：$(#mb1).menubutton(menu:#mm1);$(#mb2).menubutton(menu:#mm2);現(xiàn)在，菜單按鈕就完成了。建立拆分按鈕 拆分按鈕包括鏈接按鈕和菜單。當用戶點擊或者懸停在下箭頭區(qū)域時顯示相關菜單。這個例子是建立拆分按鈕的演示：首先，創(chuàng)建一個鏈接按鈕和菜單標記： Edit Undo Redo Cut Copy Paste Open Firefox

12、Internet Explorer Select Program. Delete Select AlljQuery 代碼：$(#sb).splitbutton(menu:#mm);運行后會出現(xiàn)： 3. 版面 o 創(chuàng)建邊框版面o 面板上的復合版面o 建立可折疊版面o 建立TABSo 動態(tài)添加TABSo 建立XP樣式左面板創(chuàng)建邊框版面網(wǎng)頁邊框版面提供5個區(qū)域：東西南北中（其實就是上下左右中），下面是通常用法： 北區(qū)可以用于網(wǎng)站banner 南區(qū)可以用于版權信息和注釋 西區(qū)可以用于導航菜單 東區(qū)可以用于推廣項目 中區(qū)可以用于主內(nèi)容運用版面，需要確認版面容器然后定義一些區(qū)域。版面至少要有一個中間區(qū)域。

13、下列是版面例子： Select language: Java C# VB Erlang 我們使用DIV容器創(chuàng)建邊框版面。版面拆分容器為2部分，左面是導航菜單右面是主內(nèi)容。中間區(qū)域的面板，我們設置href屬性以調(diào)用出示網(wǎng)頁。運行l(wèi)ayout.html的結果是： 寫下onclick事件控制函數(shù)以獲取數(shù)據(jù)，showpage函數(shù)非常簡單：function showpage(url) $(#content).load(url);面板上的復合版面 面板允許你建立為多用戶定制版面。這個例子我們建立MSN信息框，通過面板版面插件：我們使用多種版面在面板區(qū)域中。最上面的信息框我們放置搜索input，也可以放置頭

14、像在右面。中間區(qū)域我們差分成兩部分通過split屬性為TRUE，允許用戶改變面板上區(qū)域的大?。捍a： Search: Hi,I am easyui. 我們不需要編寫任何js代碼，但是擁有強大的用戶接口設計的能力。建立可折疊版面 這個教程中，我們學習關于easyui可折疊性。可折疊包括一系列面板。所有面板頭是全部可見的，但是在一個時期內(nèi)只有一個面板的body內(nèi)容是可見的。當用戶點擊面板頭，body內(nèi)容變?yōu)榭梢娖渌姘錬ody內(nèi)容變得不可見。 Accordion for jQuery Accordion is a part of easyui framework for jQuery. It le

15、ts you define your accordion component on web page more easily. easyui help you build your web page easily Folder1 Sub Folder 1 File 11 File 12 File 13 File 2 File 3 File2 我們建立3個面板，第三個面板內(nèi)容是一個樹狀菜單。建立TABS這個教程顯示你如何使用easyui建立tabs組件。tabs有多個面板，這些面板能被動態(tài)的添加或者刪除。你可以使用tabs來顯示不同的實體。在一個時間內(nèi)只顯示一個面板。每一個面板擁有title，i

16、con和close按鈕。當tabs被選擇時，相關面板的內(nèi)容被現(xiàn)實。tabs從HTML標記創(chuàng)建，包含DIV容器和一些DIV面板。 First Tab Second Tab Third Tab 我們創(chuàng)建3個面板的tabs組件，第二個和第三個面板可以通過點擊close按鈕關閉。動態(tài)添加tabs 你只需調(diào)用add方法，就可以使用jquery easyui很容易動態(tài)添加tabs。在這個教程中，我們動態(tài)的添加顯示一個頁面使用iframe。當點擊添加add按鈕，新tab被添加。如果tab已經(jīng)存在，被激活。第一步：建立tabs google jquery easyui HTML代碼很簡單，我們創(chuàng)建tabs用一

17、個tab面板，名字為home。記住，我們不需要寫任何js代碼。第二步：使addTab函數(shù)生效function addTab(title, url) if ($(#tt).tabs(exists, title) $(#tt).tabs(select, title); else var content = ; $(#tt).tabs(add, title:title, content:content, closable:true ); 我們使用exists方法判斷tab是否存在。如果存在，則激活tab。調(diào)用add方法添加新tab面板。創(chuàng)建XP式樣左面板 通常，瀏覽文件夾在windowsXP中有左面

18、板，包括常用任務內(nèi)容。這個教程顯示你如何使用easyui面板插件建立XP左面板。定義幾個面板我們幾個面板顯示一些任務，每個面板僅可以折疊和展開工具按鈕。代碼像這樣： View as a slide show Order prints online Print pictures Make a new folder Publish this folder to the Web Share this folder New York My Pictures My Computer My Network Places My documents File folder Date modified: Oct.3rd 2010 視圖效果是不是我們想要的，我們必須改變面板header背景圖片和收縮按鈕icon。定制面板外觀效果做到這一點并不難，我們需要做的是重新定義一些CSS。.panel-header background:#fff url(panel_header_bg.gif) no-repeat top right;.panel-body background:#f0f0f0;.panel-tool-collapse background:url(arrow