JQuery UI之(三)可切换面板——tabs

一、          前言

Tabs组件的使用与dialog一样十分简单,  默认的配置即可实现最简单的tab, 通过设置更多的options可以实现更复杂的应用.

 

二、          直入主题

引入样式和js库：

    <link type="text/css" rel="Stylesheet" href="Css/redmond/jquery-ui-1.7.2.custom.css" />

    <script type="text/javascript" src="Js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="Js/jquery-ui-1.7.2.custom.min.js"></script>

      编写tab代码，JQuery使用div作为tabs的标签：

        <div id="divTabs" style="width:500px; position:relative;">

            <ul>

                <li><a href="#tab1_1">one</a></li>

                <li><a href="Dialog.aspx">two</a></li>  //引用页面的话是默认使用ajax进行加载

                <li><a href="#tab1_3">three</a></li>

            </ul>

            <div id="tab1_1">tab1_1内容</div>

            <div id="tab1_3">tab1_3内容</div>

        </div>

      编写JQuery代码：

        <script type="text/javascript">

        $(function(){

            $("#divTabst").tabs();

        });

        </script>

      这是默认的tabs的加载

 

三、          其它加载方法

可折叠的tabs加载：

        <script type="text/javascript">

        $(function(){

            $("#divTabs").tabs({collapsible:true});

        });

        </script>

 

鼠标滑动即切换tabs：

        <script type="text/javascript">

        $(function(){

            $("#divTabs").tabs({event:"mouseover"});

        });

        </script>

 

四、          活用事件

tab有很多事件: select, load, show, add, remove, enable, disable

使用这些事件可以完成很多复杂任务. 需要注意事件的签名:

$('#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

});

第一个是事件对象, 第二个ui对象是传递的额外参数, 我们可以获取tab对象, tab所在容器和tab的索引值.

 

比如我们可以在事件中做验证:

$('#example').tabs({

    select: function(event, ui) {

        var isValid = ... // form validation returning true or false

        return isValid;

    }

});

或者当添加一个tab时立刻切换到选中状态:

var $tabs = $('#example').tabs({

    add: function(event, ui) {

        $tabs.tabs('select', '#' + ui.panel.id);

    }

});

 

活学活用, 更多应用大家也可以参见tab组件的官方文档:

http://jqueryui.com/demos/tabs