Jquery Tools——Tabs

jquery tools--一种基于jquery的UI表现框架。

      该框架提供了tabs（选项卡/页签）overlay(覆盖层),tooltip（提示框）,scrollable（滚动信息栏）,expose（突出显示）,flahembed(视频播放嵌入)六大类功能（其官方网站自称为六大工具），这六大类功能又是每个功能都有自己的独立支持包，不相互干扰，用户完全可以跟据自己需要下载。

主要说一下：tabs

第一：所需要的js和css

<script src="/Content/javascript/jQuery/jQueryUI/ui/jquery-ui.js" type="text/javascript"></script>
<link href="/Content/javascript/jQuery/jQueryUI/themes/cupertino/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
<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 type="text/javascript">
    $(function () {

        var tab = $Request.tab;
        $("#tabs").tabs('option', 'cache', false);//不从缓存读取
        $("#tabs").tabs('option', 'ajaxOptions', { async: false });//同步

        $("#tabs").tabs({
            load: function (event, ui) {
                $('a', ui.panel).click(function () {// 
//设置tab对应的标签元素，默认为"a"，这里也可以设为"li",该处相当于jquery的选择器
                    $(ui.panel).load(this.href);//加载相应的选项卡
                    return false;
                });
            }
        });


        $("#tabs").tabs('select', tab)
        if ("userId" == "") {//如果usrid为空，则不启用其他选项卡，默认该页面为0
            $("#tabs").tabs({ disabled: [1, 2, 3, 4] });
        }
       

    });
  
</script>