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"); */ |