Jquery Tools——Tabs

jquery
tools--一種基於jquery的UI表現架構。

      該架構提供了tabs（選項卡/頁簽）overlay(覆蓋層),tooltip（提示框）,scrollable（滾動資訊列）,expose（反白）,flahembed(視頻播放嵌入)六大類功能（其官方網站自稱為六大工具），這六大類功能又是每個功能都有自己的獨立支援包，不相互幹擾，使用者完全可以跟據自己需要下載。

主要說一下：tabs

第一：所需要的js和css

View Code

1 <script src="/Content/javascript/jQuery/jQueryUI/ui/jquery-ui.js" type="text/javascript"></script>
2 <link href="/Content/javascript/jQuery/jQueryUI/themes/cupertino/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
3 <script src="/Content/javascript/jQuery/jQueryUI/ui/jquery.ui.tabs.js" type="text/javascript"></script>

第二：在該頁面有不同選項卡的轉向地址

 <div id="tabs">
    <ul>
        <li><a href="aaa/1.aspx?userId=Id&userName=name">使用者基本資料1</a></li>
       <li><a href="aaa/2.aspx?userId=Id&userName=name">使用者基本資料2</a></li>

        <li><a href="aaa/3.aspx?userId=Id&userName=name">使用者基本資料3</a></li>

          <li><a href="aaa/4.aspx?userId=Id&userName=name">使用者基本資料4</a></li>
    </ul>
   
</div>

第三： 

script Code

 1 <script type="text/javascript">
 2     $(function () {
 3 
 4         var tab = $Request.tab;
 5         $("#tabs").tabs('option', 'cache', false);//不從緩衝讀取
 6         $("#tabs").tabs('option', 'ajaxOptions', { async: false });//同步
 7 
 8         $("#tabs").tabs({
 9             load: function (event, ui) {
10                 $('a', ui.panel).click(function () {// 
11 //設定tab對應的標籤元素，預設為"a"，這裡也可以設為"li",該處相當於jquery的選取器
12                     $(ui.panel).load(this.href);//載入相應的選項卡
13                     return false;
14                 });
15             }
16         });
17 
18 
19         $("#tabs").tabs('select', tab)
20         if ("userId" == "") {//如果usrid為空白，則不啟用其他選項卡，預設該頁面為0
21             $("#tabs").tabs({ disabled: [1, 2, 3, 4] });
22         }
23        
24 
25     });
26   
27 </script>