知问前端--选项卡UI

知问前端

选项卡（tab），是一种能提供给用户在同一个页面切换不同内容的UI。尤其是在页面布局紧凑的页面上，提供了非常好的用户体验。

一、使用tabs

使用tabs比较简单，但需要按照指定的规范即可。如：

<div id="tabs">
    <ul>
        <li><a href="#tab1">tab1</a></li>
        <li><a href="#tab2">tab2</a></li>
        <li><a href="#tab3">tab3</a></li>
    </ul>
    <div id="tab1">tab1-content</div>
    <div id="tab2">tab2-content</div>
    <div id="tab3">tab3-content</div>
</div>

怎样使用呢？jQuery代码：

$('#tabs').tabs();

二、修改tabs样式

在弹出的tabs对话框中，在火狐浏览器中打开Firebug或者右击->查看元素。这样，我们可以看看tabs的样式，根据样式进行修改。我们为了和网站主题符合，对tabs的标题背景进行修改。
修改选项卡的header的背景：

//无须修改ui里的CSS，直接用style.css替代掉
.ui-widget-header {
    background: url(img/ui_header_bg.png);
}

去掉外边框，并调整位置：

#tabs {
    margin: 200px;
    border: none;
}

各个选项卡内容区域的修饰：

#tab1,#tab2,#tab3 {
    border: 1px solid #ccc;
    border-top: none;
    position: relative;
    top: -2px;
}

三、tabs()方法的属性

选项卡的方法有两种形式：

1. tabs(options)，options是以对象键值对的形式传参，每个键值对表示一个选项；
2. tabs('action', param)，action是操作选项卡方法的字符串，param则是options的某个选项。

tabs外观选项

**注意：**show和hide设置为true后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串参数。

show和hide可选特效

jQuery测试代码：

$('#tabs').tabs({
    collapsible : true,
    disabled : [0,1],
    //disabled : true,
    event : "mouseover", //鼠标悬浮过去触发
    //active : 1,
    active : false,
    heightStyle : "content",
    //heightStyle : "auto",
    //heightStyle : "fill",
    show : true,
    hide : true
});

四、tabs()方法的事件

除了属性设置外，tabs()方法也提供了大量的事件。这些事件可以给各种不同的状态提供回调函数。
tab事件选项

jQuery测试create、activate、beforeActivate事件代码：

$('#tabs').tabs({
    create : function(event,ui) {
        //alert("创建tab时触发！");
        //alert(ui.tab); //[object Object]
        //alert(ui.tab.get()); //[object HTMLLIElement]
        alert($(ui.tab.get()).html()); //<a id="ui-id-5" tabindex="-1" role="presentation" class="ui-tabs-anchor" href="#tab1">tab1</a>
        alert($(ui.panel.get()).html()); //tab1-content
    },
    activate : function(event,ui) {
        alert("切换到另一个活动卡后触发！");
        alert($(ui.oldTab.get()).html());
        alert($(ui.newTab.get()).html());
        alert($(ui.oldPanel.get()).html());
        alert($(ui.newPanel.get()).html());
    },
    beforeActivate : function(event,ui) {
        alert("切换到另一个活动卡之前触发！");
        alert($(ui.oldTab.get()).html());
        alert($(ui.newTab.get()).html());
        alert($(ui.oldPanel.get()).html());
        alert($(ui.newPanel.get()).html());
    }
});

在使用load和beforeLoad事件之前，我们先要了解一下ajax调用的基本方法。
HTML部分代码：

<div id="tabs">
    <ul>
        <li><a href="tab1.html">tab1</a></li>
        <li><a href="tab2.html">tab2</a></li>
        <li><a href="tab3.html">tab3</a></li>
    </ul>
</div>

其中tab1.html、tab2.html和tab3.html只要书写即可，无须包含<div>，如：

1. tab1.html内容：tab1-content
2. tab2.html内容：tab2-content
3. tab3.html内容：tab3-content11

而这个时候，就要修改各个选项卡内容区域的修饰了，右击->查看元素，就可以查找到各个选项卡内容区域<div>的id了。如，我的style.css修改后：

#ui-id-6, #ui-id-8, #ui-id-10 {
    border: 1px solid #ccc;
    border-top: none;
    position: relative;
    top: -2px;
}

jQuery测试load、beforeLoad事件代码：

$('#tabs').tabs({
    load : function(event,ui) {
        alert("ajax远程加载文档后触发！");
        alert($(ui.tab.get()).html());
        alert($(ui.panel.get()).html());
    },
    beforeLoad : function(event,ui) {
        //alert("ajax远程加载文档前触发！");
        //alert($(ui.tab.get()).html());
        //alert($(ui.panel.get()).html()); //还未加载，所以得不到
        //ui.jqXHR.success(function(responseText) {
        //    alert(responseText); //暂时还未加载，但可得到内容
        //});
        ui.ajaxSettings.url = "tab3.html"; //远程加载的均是tab3.html文档的内容
    }
});

tabs('action', param)方法

这里，只测试如下方法：
jQuery代码：

$("#tabs").tabs();
$("#tabs").tabs("disable"); //禁用全部选项卡
$("#tabs").tabs("enable"); //启用全部选项卡
$("#tabs").tabs("disable",0); //仅禁用第一个选项卡
$("#tabs").tabs("enable",0); //仅启用第一个选项卡

重点看以下tabs('load')方法，该方法有局部刷新的功能。
HTML部分添加如下代码：

<input type="button" id="button" value="更新内容"></input>

jQuery代码如下：

$("#button").click(function () {
    $("#tabs").tabs("load", 0); //重载第一个选项卡内容
});

达到的效果是当tab1.html文档内容发生改变时，无须整个页面刷新，只要点击更新内容按钮，就可局部重载第一个选项卡内容。

五、tabs中使用on()

在tabs的事件中，提供了使用on()方法处理的事件方法。
on()方法触发的选项卡事件

如，ajax远程加载文档后触发：

$("#tabs").on("tabsload", function(event, ui) {
    alert("ajax远程加载文档后触发！");
});