從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)

來源： | 時(shí)間：2010/8/9 14:33:26 |

一.摘要

本系列文章將帶您進(jìn)入jQuery的精彩世界, 其中有很多作者具體的使用經(jīng)驗(yàn)和解決方案, 即使你會(huì)使用jQuery也能在閱讀中發(fā)現(xiàn)些許秘籍.

本文是實(shí)戰(zhàn)篇. 使用jQueryUI完成制作網(wǎng)站的大部分常用功能.

二.前言

經(jīng)過公司內(nèi)部收集, 整理了一些經(jīng)常使用javascript實(shí)現(xiàn)的功能. 實(shí)現(xiàn)這些功能的主角不是讓人眼花繚亂的jQuery插件, 而是jQuery UI.

如果你還在為了一個(gè)小小的特效而去下載并安裝插件, 發(fā)現(xiàn)Bug還沒有人替你解決. 記住插件是我們沒有辦法的最后選擇.

使用插件有太多的壞處:

1.不利于維護(hù)

2.增加頁面大小

3.不利于成員間交流共享,具有學(xué)習(xí)成本.

4.不夠健壯, 不能保證插件版本一直更新并修復(fù)所有問題.

下面就引入今天的主角:jQuery UI

三.jQuery UI

jQuery UI 是 jQuery 的一部分, 是在jQuery之上的一套專門用于UI交互的類庫. 使用jQuery UI可以實(shí)現(xiàn)底層交互, 各種高級(jí)特效, 動(dòng)畫, 并且可定制主題.

我們可以用它輕松的構(gòu)建高度交互的Web應(yīng)用程序.

官方首頁:
http://jqueryui.org/

下載:
http://jqueryui.com/download

示例和文檔:
http://jqueryui.com/demos/

皮膚:
http://jqueryui.com/themeroller/

jQuery UI 的在線網(wǎng)站十分強(qiáng)大. 首先就是在下載時(shí)可以組裝自己想要的功能定制下載:

并且針對各種控件不僅提供了詳細(xì)的參數(shù)說明和實(shí)例, 還可以隨時(shí)更換實(shí)例的皮膚:

本文主要講解實(shí)例, 大家可以通過實(shí)例代碼快速上手jQuery UI. 使用jQuery UI我們可以再不借助其他插件的情況下完成大部分頁面應(yīng)用, 說其是一個(gè)官方的超級(jí)UI插件也不為過. 包含所有功能的jQuery UI類庫文件為188K, 啟用Gzip壓縮后是45K. 雖然較大但是一次加載全網(wǎng)站獲益.而且45K大小在當(dāng)今的互諒網(wǎng)時(shí)代還算可以接受.

目前還沒有jQuery UI的中文教程. 因?yàn)楸疚氖菍?shí)戰(zhàn)篇, 所以不會(huì)仔細(xì)講解基礎(chǔ)內(nèi)容. 在后面的章節(jié)中我會(huì)加入jQuery UI的基礎(chǔ)教程.爭取成為中文jQuery UI第一教程.

四. 準(zhǔn)備工作

我將所有相關(guān)的文件, 包括各種類庫文件, Theme模板放置在如下路徑:

http://www.dotnetapi.com/JSLib/

此路徑開通了目錄瀏覽, 可以直接查找需要的文件. 目錄組織結(jié)構(gòu)按照本系列: (八) 插播:jQuery實(shí)施方案中介紹的方案組織.

另外也可以從Google上引用文件, Google的CDN速度更快也更有保證, 參見: Google's CDN

本文的實(shí)例的所有引用都使用 WebConfig.ResourceServer 這個(gè)屬性:

public class WebConfig
{
    public static string ResourceServer = @"http://www.dotnetapi.com/";

五.彈出層對話框

彈出框是最常用最實(shí)用的功能. 先來看一下藝龍網(wǎng)上的一些應(yīng)用場景.

1. 藝龍網(wǎng)應(yīng)用場景舉例

(1) 靜態(tài)提示類彈出層. 彈出層的內(nèi)容是固定的.

(2) 動(dòng)態(tài)提示類彈出層. 彈出層內(nèi)容是根據(jù)事件源變化的.

(3)遮罩類彈出層. 彈出時(shí)背景變灰并不可點(diǎn)擊.

2. 應(yīng)用實(shí)例

使用 jQuery UI 的 Dialog 組件. 我以輕松實(shí)現(xiàn)上面三種效果.

Dialog組件的主要特點(diǎn)是可以拖動(dòng)(Draggable), 可以改變大小(Resizable) .

示例完整代碼如下:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery UI - 彈出層應(yīng)用實(shí)例 Dialog</title>   
    <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-s