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

更新時(shí)間：2011年02月23日 23:04:54 作者：

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

一.摘要

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

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

二.前言

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

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

使用插件有太多的壞處:

1.不利于維護(hù)

2.增加頁(yè)面大小

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

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

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

三.jQuery UI

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

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

官方首頁(yè):
http://jqueryui.org/

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

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

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

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

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

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

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

四. 準(zhǔn)備工作

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

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

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

另外也可以從Google上引用文件, Google的CDN速度更快也更有保證, 參見(jiàn):

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

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

五.彈出層對(duì)話框

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

1. 藝龍網(wǎng)應(yīng)用場(chǎ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-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
  <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" /> 
  <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script>  
  <script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"
    type="text/javascript"></script>
  <% if (false)
    {%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script>
  <% }%>
  <script type="text/javascript">
    /*========== 必須放在頭部加載的語(yǔ)句塊. 盡量避免使用 ==========*/
  </script>
  <style type="text/css">
    </style>
</head>
<body>
  <!-- Demo 靜態(tài)提示類彈出層 -->
  <div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">
    <h3>Demo. 共享同一個(gè)靜態(tài)彈出層, 彈出層內(nèi)容固定: </h3>
    <div>
      <span id="spanShowTip1">顯示提示</span>&nbsp;&nbsp; <span id="spanShowTip2">顯示提示</span>&nbsp;&nbsp;
      <span id="spanShowTip3">顯示提示</span>&nbsp;&nbsp; <span id="spanShowTip4">顯示提示</span>&nbsp;&nbsp;
    </div>
  </div>
  <br />
  <br />
  <!-- Demo 動(dòng)態(tài)提示類彈出層 -->
  <div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">
    <h3>Demo. 每個(gè)彈出層內(nèi)容不同, 彈出層內(nèi)容存儲(chǔ)在事件源的元素屬性中: </h3>
    <div>
      <span id="spanShowDataTip1" data="顏色是紅色">紅色</span>&nbsp;&nbsp;
      <span id="spanShowDataTip2" data="顏色是綠色">綠色</span>&nbsp;&nbsp;
    </div>
  </div>
  <br />
  <br />
  <!-- Demo 遮罩類彈出層 -->
  <div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">
    <h3>Demo. 彈出IFrame </h3>
    <div>
      <input type="button" id="btnShowIframe" name="btnShowIframe" value="顯示彈出層"/>
    </div>
  </div>
  
  <!-- 提示類彈出層 -->
  <div id="divTip" title="自定義標(biāo)題">
    <p>彈出層</p>
  </div>
  <!-- 遮罩類彈出層 -->
  <div id="divIframe" title="iFrame彈出層" style="text-align:center;">
    <iframe src="http://www.elong.com" width="450px" height="230px"></iframe>
  </div>
  <script type="text/javascript">
    /*==========用戶自定義方法==========*/


    /*==========事件綁定==========*/
    $(function()
    {
      //靜態(tài)提示類彈出層
      $("span[id^=spanShowTip]").css("cursor", "pointer").click(function(event)
      {
        $("*").stop();
        event.stopPropagation();
        var top = $(event.target).offset().top + 20;
        var left = $(event.target).offset().left;
        $("#divTip").dialog("option", "position", [left, top]);
        $("#divTip").dialog("open");
      });
      //動(dòng)態(tài)提出類彈出層
      $("span[id^=spanShowDataTip]").css("cursor", "pointer").click(function(event)
      {
        $("*").stop();
        $("#divTip").dialog("close");
        event.stopPropagation();
        var top = $(event.target).offset().top + 20;
        var left = $(event.target).offset().left;
        $("#divTip").html($(event.target).attr("data"));
        $("#divTip").dialog("option", "position", [left, top]);
        $("#divTip").dialog("open");
      });
      //遮罩類彈出層
      $("#btnShowIframe").click(function(event)
      {
        event.preventDefault();
        event.stopPropagation();
        $("#divIframe").dialog("open");
      });

      //單擊自身取消冒泡
      $("#divTip, #divIframe").bind("click", function(event)
      {
        event.stopPropagation();
      });

      //document對(duì)象單擊隱藏所有彈出層
      $(document).bind("click", function(event)
      {
        $("#divTip").dialog("close");
        $("#divIframe").dialog("close");
      });
    });

    /*==========加載時(shí)執(zhí)行的語(yǔ)句==========*/
    $(function()
    {
    
      //初始化提示類彈出層
      $("#divTip").dialog({
        show: null,
        bgiframe: false,
        autoOpen: false
      });

      //初始化遮罩類彈出層
      $("#divIframe").dialog({
        show: null,
        bgiframe: false,
        autoOpen: false,
        width: 500,
        height: 300,
        draggable: true,        
        resizable: false,
        modal: true
      });      
    });
  </script>
</body>
</html>

效果如圖:

靜態(tài)提示類彈出層

動(dòng)態(tài)提示類彈出層:

遮罩類彈出層:

3.關(guān)鍵點(diǎn)講解

(1)計(jì)算彈出層位置

提示類彈出框最重要的是計(jì)算彈出框的位置. 通過(guò)事件對(duì)象獲取到事件源, 使用offset()函數(shù)計(jì)算事件源相對(duì)于document的位置:

        var top = $(event.target).offset().top;
        var left = $(event.target).offset().left;

因?yàn)槭窍鄬?duì)于document, 即頁(yè)面左上角的位置, 所以需要將彈出層放在Body元素中的第一層. 即父類就是body. 如果包含在其他元素中, 需要確定任何一個(gè)父類的position樣式設(shè)置為了relative.

計(jì)算出來(lái)的top和left是事件源的位置, 在此位置顯示會(huì)將事件源對(duì)象遮蓋住. 所以通常需要手工做一些偏移, 比如top+20.

(2) 取消冒泡和瀏覽器默認(rèn)行為

如果我們?yōu)閐ocument對(duì)象綁定了單擊后關(guān)閉彈出層的事件, 那么就一定要取消事件的冒泡. 使用event對(duì)象的stopPropagation()方法可以取消冒泡.

event.stopPropagation();

對(duì)于具有默認(rèn)行為的元素,比如提交按鈕的提交表單行為, <a>元素的超鏈接行為等, 我們?nèi)绻谶@些元素上應(yīng)用事件, 還需要取消它們的默認(rèn)行為:

event.preventDefault();

(3) 設(shè)置動(dòng)畫(huà)效果與取消動(dòng)畫(huà)

通過(guò)設(shè)置dialog的配置項(xiàng)的show屬性, 可以設(shè)置顯示dialog時(shí)候的動(dòng)畫(huà)效果:

$('.selector').dialog({ show: 'slide' });

show默認(rèn)為null即無(wú)動(dòng)畫(huà), 可以是使用下列值:

'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

對(duì)于這些動(dòng)畫(huà)的效果, 可以在此頁(yè)觀看:

http://jqueryui.com/demos/show/

當(dāng)一個(gè)動(dòng)畫(huà)效果執(zhí)行時(shí), 如果用戶在此對(duì)這個(gè)元素進(jìn)行操作, 就會(huì)出現(xiàn)各種問(wèn)題, 比如定位不準(zhǔn)確等. 所以如果應(yīng)用了動(dòng)畫(huà), 我們?cè)趯?duì)其操作時(shí)需要使用stop()函數(shù)來(lái)停止動(dòng)畫(huà), 通常是停止雖有元素的動(dòng)畫(huà):

$("*").stop();

但是即使停止了動(dòng)畫(huà)再進(jìn)行操作, 如果操作的太快也容易產(chǎn)生問(wèn)題. 所以至于是否使用動(dòng)畫(huà)需要經(jīng)過(guò)權(quán)衡決定.

(4) 動(dòng)態(tài)提示類彈出層的數(shù)據(jù)傳遞

動(dòng)態(tài)提示類彈出層的數(shù)據(jù)是不同的, 本文實(shí)例使用的是將數(shù)據(jù)存儲(chǔ)在元素屬性data上:

<span id="spanShowDataTip1" data="顏色是紅色">紅色</span>

這是一種簡(jiǎn)單直觀的方式. 比較容易編程實(shí)現(xiàn)(尤其是在使用MVC編程模型的時(shí)候.)

還有一種常用方式是使用javascript變量存儲(chǔ)數(shù)據(jù).這兩種方式在第5章時(shí)有過(guò)講解:

http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html

(5)更換主題

大家注意實(shí)例中的彈出層沒(méi)有為其編輯任何樣式, 但是顯示出來(lái)后已經(jīng)被美化過(guò)了. 這是因?yàn)槲乙昧薺Query UI的主題:

  <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
  <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" />

注釋中有很多的主題, 只需要將引用路徑中的"redmond"改為其中任何一個(gè), 彈出層的樣式會(huì)立刻發(fā)生變化.

VS中有一個(gè)Bug, 就是針對(duì)link標(biāo)簽, href中的語(yǔ)句塊編譯有問(wèn)題, 某些情況下<%%>不被編輯解析. 所以我使用上面代碼中的方式構(gòu)造href屬性值.

可以在下面的地址查看各個(gè)主題的效果:

http://jqueryui.com/themeroller/#themeGallery

六.Tab標(biāo)簽

不刷新頁(yè)面, 在頁(yè)面中的不同標(biāo)簽間切換:

本實(shí)例通過(guò)jQuery UI的Tabs組件實(shí)現(xiàn). Tabs組件的使用與dialog一樣十分簡(jiǎn)單, 默認(rèn)的配置即可實(shí)現(xiàn)最簡(jiǎn)單的tab, 通過(guò)設(shè)置更多的options可以實(shí)現(xiàn)更復(fù)雜的應(yīng)用.

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

源代碼:

<%@ 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-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
  <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" />
  <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script>
  <script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"
    type="text/javascript"></script>
  <% if (false)
    {%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script>
  <% }%>
  <script type="text/javascript">
    /*========== 必須放在頭部加載的語(yǔ)句塊. 盡量避免使用 ==========*/
  </script>
  <style type="text/css">
    </style>
</head>
<body>
  <!--Demo.默認(rèn)Tab與Ajax Tab -->
  <div id="tabs1" style="width:300px;">
    <ul>
      <li><a href="#tabs1-1">One</a></li>
      <!-- Ajax Tab -->
      <li><a href="TabData.htm">Two</a></li>
      <li><a href="#tabs1-3">Three</a></li>
    </ul>
    <div id="tabs1-1">
      <p>Tab1內(nèi)容</p>
    </div>
    <div id="tabs1-3">
      <p>Tab3內(nèi)容</p>
    </div>
  </div>
  <br />
  <br />
  <br />
  <!--Demo. 可折疊的Tab -->
  <div id="tabs2" style="width: 300px;">
    <ul>
      <li><a href="#tabs2-1">One</a></li>
      <li><a href="#tabs2-2">Two</a></li>
      <li><a href="#tabs2-3">Three</a></li>
    </ul>
    <div id="tabs2-1">
      <p>Tab1內(nèi)容</p>
    </div>
    <div id="tabs2-2">
      <p>Tab2內(nèi)容</p>
    </div>
    <div id="tabs2-3">
      <p>Tab3內(nèi)容</p>
    </div>
  </div>
  <br />
  <br />
  <br />
  <!--Demo. 鼠標(biāo)滑動(dòng)即切換的Tab -->
  <div id="tabs3" style="width: 300px;">
    <ul>
      <li><a href="#tabs3-1">One</a></li>
      <li><a href="#tabs3-2">Two</a></li>
      <li><a href="#tabs3-3">Three</a></li>
    </ul>
    <div id="tabs3-1">
      <p>Tab1內(nèi)容</p>
    </div>
    <div id="tabs3-2">
      <p>Tab2內(nèi)容</p>
    </div>
    <div id="tabs3-3">
      <p>Tab3內(nèi)容</p>
    </div>
  </div>
  <script type="text/javascript">
    /*==========用戶自定義方法==========*/


    /*==========事件綁定==========*/
    $(function()
    {

    });

    /*==========加載時(shí)執(zhí)行的語(yǔ)句==========*/
    $(function()
    {
      //默認(rèn)Tabs
      $("#tabs1").tabs();
      //可折疊的Tabs
      $("#tabs2").tabs({
        collapsible: true
      });
      //鼠標(biāo)滑動(dòng)即切換的Tabs
      $("#tabs3").tabs({
        event: "mouseover"
      });
    });    
  </script>
</body>
</html>

效果:

1. 默認(rèn)設(shè)置的Tabs, Two標(biāo)簽內(nèi)容使用Ajax獲取

2.再折疊tab

3.鼠標(biāo)滑動(dòng)即切換的tab

2.要點(diǎn)講解

(1) 注意Tabs中的HTML結(jié)構(gòu).

使用ul構(gòu)建標(biāo)簽. 內(nèi)容div一定要和標(biāo)簽關(guān)聯(lián), 沒(méi)有關(guān)聯(lián)的div將不被處理直接顯示.

(2) 使用Ajax可以不指定內(nèi)容容器, 但是也可以將Ajax內(nèi)容放入指定容器中.

<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>

<div id="Todo_Overview"> ... </div>

(3) 活用事件

tab有很多事件:

select, load, show, add, remove, enable, disable

使用這些事件可以完成很多復(fù)雜任務(wù). 需要注意事件的簽名:

$('#example').bind('tabsselect', function(event, ui) {

  // Objects available in the function context:
  ui.tab   // anchor element of the selected (clicked) tab
  ui.panel  // element, that contains the selected/clicked tab contents
  ui.index  // zero-based index of the selected (clicked) tab

});

第一個(gè)是事件對(duì)象, 第二個(gè)ui對(duì)象是傳遞的額外參數(shù), 我們可以獲取tab對(duì)象, tab所在容器和tab的索引值.

比如我們可以在事件中做驗(yàn)證:

$('#example').tabs({
  select: function(event, ui) {
    var isValid = ... // form validation returning true or false
    return isValid;
  }
});

或者當(dāng)添加一個(gè)tab時(shí)立刻切換到選中狀態(tài):

var $tabs = $('#example').tabs({
  add: function(event, ui) {
    $tabs.tabs('select', '#' + ui.panel.id);
  }
});

活學(xué)活用, 更多應(yīng)用大家也可以參見(jiàn)tab組件的官方文檔:

http://jqueryui.com/demos/tabs

七. 手風(fēng)琴菜單

使用jQuery UI的accordion組件可以實(shí)現(xiàn)手風(fēng)琴菜單. 效果見(jiàn)下圖.

accordion文檔地址: http://jqueryui.com/demos/accordion/

1.實(shí)例效果

2.實(shí)例代碼

<%@ 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 - 手風(fēng)琴菜單應(yīng)用實(shí)例 Accordion </title>
  <!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
  <link rel="stylesheet" type="text/css" href="<%=WebConfig.ResourceServer +"/JsLib/jquery/themes/redmond/style.css"%>" />
  <script type="text/javascript" src="<% =WebConfig.ResourceServer %>/JsLib/jquery/jquery-min-lastest.js"></script>
  <script src="<% =WebConfig.ResourceServer %>/JsLib/jquery/ui/jquery-ui-all-min-lastest.js"
    type="text/javascript"></script>
  <% if (false)
    {%><script src="~/js/jquery-vsdoc-lastest.js" type="text/javascript"></script>
  <% }%>
  <script type="text/javascript">
    /*========== 必須放在頭部加載的語(yǔ)句塊. 盡量避免使用 ==========*/
  </script>
  <style type="text/css">
    body
    {
      font-size: 12px;
    }
  </style>
</head>
<body>
  <!-- Demo. 默認(rèn)配置的Accordion菜單 -->
  <div style="width: 300px; float:left; margin-left:20px;">
    <div id="accordion1">
      <h3><a href="#">菜單1</a></h3>
      <div>
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
      </div>
      <h3><a href="#">菜單2</a></h3>
      <div>
        菜單2的內(nèi)容
      </div>
      <h3><a href="#">菜單3</a></h3>
      <div>
        菜單3的內(nèi)容
      </div>
    </div>
  </div>
  <!-- Demo. 取消自動(dòng)高度, 可折疊 -->
  <div style="width: 300px; float: left; margin-left: 20px;">
    <div id="accordion2">
      <h3><a href="#">菜單1</a></h3>
      <div>
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
      </div>
      <h3><a href="#">菜單2</a></h3>
      <div>
        菜單2的內(nèi)容
      </div>
      <h3><a href="#">菜單3</a></h3>
      <div>
        菜單3的內(nèi)容
      </div>
    </div>
  </div>
  <!-- Demo. 鼠標(biāo)滑動(dòng)觸發(fā), 自定義圖標(biāo) -->
  <div style="width: 300px; float: left; margin-left: 20px;">
    <div id="accordion3">
      <h3><a href="#">菜單1</a></h3>
      <div>
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
        菜單1的內(nèi)容<br />
      </div>
      <h3><a href="#">菜單2</a></h3>
      <div>
        菜單2的內(nèi)容
      </div>
      <h3><a href="#">菜單3</a></h3>
      <div>
        菜單3的內(nèi)容
      </div>
    </div>
  </div>
  <script type="text/javascript">
    /*==========用戶自定義方法==========*/


    /*==========事件綁定==========*/
    $(function()
    {

    });

    /*==========加載時(shí)執(zhí)行的語(yǔ)句==========*/
    $(function()
    {
      //默認(rèn)配置的Accordion菜單
      $("#accordion1").accordion();
      //取消自動(dòng)高度, 可折疊
      $("#accordion2").accordion({
        autoHeight:false,
        collapsible: true
      });
      //鼠標(biāo)滑動(dòng)觸發(fā), 自定義圖標(biāo)
      $("#accordion3").accordion({
        icons: {
              header: "ui-icon-circle-arrow-e",
                headerSelected: "ui-icon-circle-arrow-s"
            },
        event: "mouseover"
      });
    });  
  </script>
</body>
</html>

3. 關(guān)鍵點(diǎn)講解

(1) 注意高度設(shè)置過(guò)小問(wèn)題

當(dāng)包含accordion控件的容器高度設(shè)計(jì)過(guò)小時(shí), 在FireFox3中在此容器后面的內(nèi)容會(huì)被accordion控件部分遮蓋. 在IE中沒(méi)有此問(wèn)題. 經(jīng)檢查是因?yàn)槿萜鞲叨刃∮诓藛胃叨葘?dǎo)致. 所以我們?cè)趹?yīng)用時(shí)應(yīng)當(dāng)注意不要將容器高度設(shè)置過(guò)小.

(2) 部分關(guān)鍵屬性

autoHeight: 設(shè)置是否自動(dòng)將內(nèi)容高度設(shè)置為容器高度.

collapsible: 設(shè)置是否可折疊

一般上面兩個(gè)配合使用, 以為折疊后肯定會(huì)改變菜單高度, 會(huì)導(dǎo)致autoHeight設(shè)置為true無(wú)效.

更多屬性和事件使用請(qǐng)參閱官方文檔.

八.總結(jié)

本章簡(jiǎn)單介紹了jQueryUI, 并且使用jQuery UI完成了彈出層,tabs,手風(fēng)琴菜單的應(yīng)用實(shí)例. 使用jQuery UI可以不需要額外尋找插件. 并且實(shí)現(xiàn)簡(jiǎn)單.

但是有些功能是必須使用插件完成的. 下一張講解兩個(gè)插件實(shí)例: 自動(dòng)完成插件AutoComplete 和表單驗(yàn)證插件jQuery Validate.

本章源代碼下載: http://xiazai.jb51.net/201101/yuanma/Code-jQueryStudy-10.rar

您可能感興趣的文章:

jQuery
UI

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

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

一.摘要

三.jQuery UI

四. 準(zhǔn)備工作

五.彈出層對(duì)話框

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

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

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

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

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

3.關(guān)鍵點(diǎn)講解

(1)計(jì)算彈出層位置

(2) 取消冒泡和瀏覽器默認(rèn)行為

(3) 設(shè)置動(dòng)畫(huà)效果與取消動(dòng)畫(huà)

(4) 動(dòng)態(tài)提示類彈出層的數(shù)據(jù)傳遞

(5)更換主題

六.Tab標(biāo)簽

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

2.要點(diǎn)講解

(1) 注意Tabs中的HTML結(jié)構(gòu).

(2) 使用Ajax可以不指定內(nèi)容容器, 但是也可以將Ajax內(nèi)容放入指定容器中.

(3) 活用事件

七. 手風(fēng)琴菜單

1.實(shí)例效果

2.實(shí)例代碼

3. 關(guān)鍵點(diǎn)講解

(1) 注意高度設(shè)置過(guò)小問(wèn)題

(2) 部分關(guān)鍵屬性

八.總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

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

一.摘要

三.jQuery UI

四. 準(zhǔn)備工作

五.彈出層對(duì)話框

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

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

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

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

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

3.關(guān)鍵點(diǎn)講解

(1)計(jì)算彈出層位置

(2) 取消冒泡和瀏覽器默認(rèn)行為

(3) 設(shè)置動(dòng)畫(huà)效果與取消動(dòng)畫(huà)

(4) 動(dòng)態(tài)提示類彈出層的數(shù)據(jù)傳遞

(5)更換主題

六.Tab標(biāo)簽

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

2.要點(diǎn)講解

(1) 注意Tabs中的HTML結(jié)構(gòu).

(2) 使用Ajax可以不指定內(nèi)容容器, 但是也可以將Ajax內(nèi)容放入指定容器中.

(3) 活用事件

七. 手風(fēng)琴菜單

1.實(shí)例效果

2.實(shí)例代碼

3. 關(guān)鍵點(diǎn)講解

(1) 注意高度設(shè)置過(guò)小問(wèn)題

(2) 部分關(guān)鍵屬性

八.總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕