<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html"></a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html">從零開始學習jQuery (一) 開天辟地入門篇</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/03/jQuery-Learn-2.html">從零開始學習jQuery (二) 萬能的選擇器</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/04/jQuery-Learn-3.html">從零開始學習jQuery (三) 管理jQuery包裝集</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/05/jQuery-Learn-4.html">從零開始學習jQuery (四) 使用jQuery操作元素的屬性與樣式</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html">從零開始學習jQuery (五) 事件與事件對象</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/08/jQuery-Learn-6.html">從零開始學習jQuery (六) jQuery中的Ajax</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/11/jQuery-Learn-7.html">從零開始學習jQuery (七) jQuery動畫-讓頁面動起來!</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/12/jQuery-Learn-8.html">從零開始學習jQuery (八) 插播:jQuery實施方案</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/12/jQuery-Learn-9.html">從零開始學習jQuery (九) jQuery工具函數</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-10.html">從零開始學習jQuery (十) jQueryUI常用功能實戰</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/22/jQuery-Learn-11.html">從零開始學習jQuery (十一) 實戰表單驗證與自動完成提示插件</a>
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-10.html" target="_blank"></a>
本系列文章将帶您進入jQuery的精彩世界, 其中有很多作者具體的使用經驗和解決方案, 即使你會使用jQuery也能在閱讀中發現些許秘籍.
本文是實戰篇. 使用jQueryUI完成制作網站的大部分常用功能.
經過公司内部收集, 整理了一些經常使用javascript實作的功能. 實作這些功能的主角不是讓人眼花缭亂的jQuery插件, 而是jQuery UI.
如果你還在為了一個小小的特效而去下載下傳并安裝插件, 發現Bug還沒有人替你解決. 記住插件是我們沒有辦法的最後選擇.
使用插件有太多的壞處:
1.不利于維護
2.增加頁面大小
3.不利于成員間交流共享,具有學習成本.
4.不夠健壯, 不能保證插件版本一直更新并修複所有問題.
下面就引入今天的主角:jQuery UI
jQuery UI 是 jQuery 的一部分, 是在jQuery之上的一套專門用于UI互動的類庫. 使用jQuery UI可以實作底層互動, 各種進階特效, 動畫, 并且可定制主題.
我們可以用它輕松的建構高度互動的Web應用程式.
官方首頁:
<a href="http://jqueryui.org/">http://jqueryui.org/</a>
下載下傳:
<a href="http://jqueryui.com/download">http://jqueryui.com/download</a>
示例和文檔:
<a href="http://jqueryui.com/demos/">http://jqueryui.com/demos/</a>
皮膚:
<a href="http://jqueryui.com/themeroller/">http://jqueryui.com/themeroller/</a>
jQuery UI 的線上網站十分強大. 首先就是在下載下傳時可以組裝自己想要的功能定制下載下傳:
并且針對各種控件不僅提供了詳細的參數說明和執行個體, 還可以随時更換執行個體的皮膚:
本文主要講解執行個體, 大家可以通過執行個體代碼快速上手jQuery UI. 使用jQuery UI我們可以再不借助其他插件的情況下完成大部分頁面應用, 說其是一個官方的超級UI插件也不為過. 包含所有功能的jQuery UI類庫檔案為188K, 啟用Gzip壓縮後是45K. 雖然較大但是一次加載全網站獲益.而且45K大小在當今的互諒網時代還算可以接受.
目前還沒有jQuery UI的中文教程. 因為本文是實戰篇, 是以不會仔細講解基礎内容. 在後面的章節中我會加入jQuery UI的基礎教程.争取成為中文jQuery UI第一教程.
我将所有相關的檔案, 包括各種類庫檔案, Theme模闆放置在如下路徑:
<a href="http://www.dotnetapi.com/JSLib/">http://www.dotnetapi.com/JSLib/</a>
本文的執行個體的所有引用都使用 WebConfig.ResourceServer 這個屬性:
彈出框是最常用最實用的功能. 先來看一下藝龍網上的一些應用場景.
使用 jQuery UI 的 Dialog 元件. 我以輕松實作上面三種效果.
示例完整代碼如下:
效果如圖:
靜态提示類彈出層
動态提示類彈出層:
遮罩類彈出層:
提示類彈出框最重要的是計算彈出框的位置. 通過事件對象擷取到事件源, 使用offset()函數計算事件源相對于document的位置:
因為是相對于document, 即頁面左上角的位置, 是以需要将彈出層放在Body元素中的第一層. 即父類就是body. 如果包含在其他元素中, 需要确定任何一個父類的position樣式設定為了relative.
計算出來的top和left是事件源的位置, 在此位置顯示會将事件源對象遮蓋住. 是以通常需要手工做一些偏移, 比如top+20.
如果我們為document對象綁定了單擊後關閉彈出層的事件, 那麼就一定要取消事件的冒泡. 使用event對象的stopPropagation()方法可以取消冒泡.
對于具有預設行為的元素,比如送出按鈕的送出表單行為, <a>元素的超連結行為等, 我們如果在這些元素上應用事件, 還需要取消它們的預設行為:
通過設定dialog的配置項的show屬性, 可以設定顯示dialog時候的動畫效果:
show預設為null即無動畫, 可以是使用下列值:
對于這些動畫的效果, 可以在此頁觀看:
<a href="http://jqueryui.com/demos/show/">http://jqueryui.com/demos/show/</a>
當一個動畫效果執行時, 如果使用者在此對這個元素進行操作, 就會出現各種問題, 比如定位不準确等. 是以如果應用了動畫, 我們在對其操作時需要使用stop()函數來停止動畫, 通常是停止雖有元素的動畫:
但是即使停止了動畫再進行操作, 如果操作的太快也容易産生問題. 是以至于是否使用動畫需要經過權衡決定.
動态提示類彈出層的資料是不同的, 本文執行個體使用的是将資料存儲在元素屬性data上:
這是一種簡單直覺的方式. 比較容易程式設計實作(尤其是在使用MVC程式設計模型的時候.)
還有一種常用方式是使用javascript變量存儲資料.這兩種方式在第5章時有過講解:
<a href="http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html">http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html</a>
大家注意執行個體中的彈出層沒有為其編輯任何樣式, 但是顯示出來後已經被美化過了. 這是因為我引用了jQuery UI的主題:
注釋中有很多的主題, 隻需要将引用路徑中的"redmond"改為其中任何一個, 彈出層的樣式會立刻發生變化.
VS中有一個Bug, 就是針對link标簽, href中的語句塊編譯有問題, 某些情況下<%%>不被編輯解析. 是以我使用上面代碼中的方式構造href屬性值.
可以在下面的位址檢視各個主題的效果:
<a href="http://jqueryui.com/themeroller/#themeGallery">http://jqueryui.com/themeroller/#themeGallery</a>
不重新整理頁面, 在頁面中的不同标簽間切換:
本執行個體通過jQuery UI的Tabs元件實作. Tabs元件的使用與dialog一樣十分簡單, 預設的配置即可實作最簡單的tab, 通過設定更多的options可以實作更複雜的應用.
源代碼:
效果:
1. 預設設定的Tabs, Two标簽内容使用Ajax擷取
2.再折疊tab
3.滑鼠滑動即切換的tab
使用ul建構标簽. 内容div一定要和标簽關聯, 沒有關聯的div将不被處理直接顯示.
tab有很多事件:
select, load, show, add, remove, enable, disable
使用這些事件可以完成很多複雜任務. 需要注意事件的簽名:
第一個是事件對象, 第二個ui對象是傳遞的額外參數, 我們可以擷取tab對象, tab所在容器和tab的索引值.
比如我們可以在事件中做驗證:
或者當添加一個tab時立刻切換到選中狀态:
活學活用, 更多應用大家也可以參見tab元件的官方文檔:
<a href="http://jqueryui.com/demos/tabs">http://jqueryui.com/demos/tabs</a>
使用jQuery UI的accordion元件可以實作手風琴菜單. 效果見下圖.
當包含accordion控件的容器高度設計過小時, 在FireFox3中在此容器後面的内容會被accordion控件部分遮蓋. 在IE中沒有此問題. 經檢查是因為容器高度小于菜單高度導緻. 是以我們在應用時應當注意不要将容器高度設定過小.
autoHeight: 設定是否自動将内容高度設定為容器高度.
collapsible: 設定是否可折疊
一般上面兩個配合使用, 以為折疊後肯定會改變菜單高度, 會導緻autoHeight設定為true無效.
更多屬性和事件使用請參閱官方文檔.
本章簡單介紹了jQueryUI, 并且使用jQuery UI完成了彈出層,tabs,手風琴菜單的應用執行個體. 使用jQuery UI可以不需要額外尋找插件. 并且實作簡單.
但是有些功能是必須使用插件完成的. 下一張講解兩個插件執行個體: 自動完成插件AutoComplete 和 表單驗證插件jQuery Validate.
本章源代碼下載下傳:
<a href="http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-10.rar">http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-10.rar</a>