Jquery UI学习笔记（2）

Jquery UI之Tabs

1、选项卡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>

            <li><a href="#tab4">Tab4</a></li>

        </ul>

        <div id="tab1">Contents of first tab</div>

        <div id="tab2">Contents of the second tab</div>

        <div id="tab3">Contents of the third tab</div>

        <div id="tab4">Contents of the fourth tab</div>

    </div>

    <script>

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

    </script>

1.1两种方式使用:$(selector,context).tabs(options)和$(selector,context).tabs(“action”,params)

1.1.1 tabs(options)方法:

选项卡的外观和行为:

$("#tabs").tabs({

collapsible:true,//允许取消选项卡，false不允许

event:"mouseover",//选中新选项卡的事件

selected:2,//指定首次选中的选项卡索引

fx:{opacity:"toggle"},//指定伴随选项卡时的特效

ajaxOptions:"指定Ajax选项"

});

管理与选项卡相关的事件:如选择、添加和删除选项卡。

方法有:select/show/add/remove/enable/disable/load

1.2 bind()方法来管理这些事件

/* $("#tabs").tabs({

    fx:{opacity:"toggle"},

    ajaxOptions:{Hus:"Gexiuhua",Wife:"Caixia"}

    }).tabs("url",0,"actions.php").tabs("load",0); */

    

     /*使用tabsadd事件来  */

     /* $("#tabs").tabs({fx:{opacity:"toggle"},

    collapsible:true,

    }).bind("tabsadd",function(event,tab){

    $(tab.panel).load("actions.php");

    }).tabs("add","#tab4","Tab 4"); */