一.使用tabs 使用tabs 比较简单,但需要按照指定的规范即可。 //HTML 部分 <div id="tabs"> <ul> <li><a href="#tabs1">tab1</a></li> <li><a href="#tabs2">tab2</a></li> <li><a href="#tabs3">tab3</a></li> </ul> <div id="tabs1">tab1-content</div> <div id="tabs2">tab2-content</div> <div id="tabs3">tab3-content</div> </div> //jQuery 部分 $('#tabs').tabs();
$('#tabs').tabs({ collapsible : true, disabled : [0], event : 'mouseover', active : false, heightStyle : 'content', hide : true, show : true, }); 注意:设置true 后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字 符串参数。
//当选项卡创建时触发 $('#tabs').tabs({ create : function (event, ui) { alert($(ui.tab.get()).html()); alert($(ui.panel.get()).html()); }, }); //当切换到一个活动卡时触发 $('#tabs').tabs({ activate : function (event, ui) { alert($(ui.oldTab.get()).html()); alert($(ui.oldPanel.get()).html()); alert($(ui.newTab.get()).html()); alert($(ui.newPanel.get()).html()); }, }); //当切换到一个活动卡之前触发 $('#tabs').tabs({ beforeActivate : function (event, ui) { alert($(ui.oldTab.get()).html()); alert($(ui.oldPanel.get()).html()); alert($(ui.newTab.get()).html()); alert($(ui.newPanel.get()).html()); }, }); 在使用load 和beforeLoad 事件之前,我们先要了解一下ajax 调用的基本方法。 //HTML 部分 <ul> <li><a href="tabs1.html">tab1</a></li> <li><a href="tabs2.html">tab2</a></li> <li><a href="tabs3.html">tab3</a></li> </ul> 而tabs1.html、tabs2.html 和tabs3.html 只要书写即可,无须包含<div>。比如: tabs1-content 而这个时候,我们的CSS 需要做一定的修改,只要将之前的ID 换成如下即可: #ui-tabs-1, #ui-tabs-2, #ui-tabs-3 {} //ajax 加载后触发 $('#tabs').tabs({ load : function (event, ui) { alert('ajax 加载后触发!'); } }); //ajax 加载前触发 $('#tabs').tabs({ beforeLoad : function (event, ui) { ui.ajaxSettings.url = 'tabs2.html'; ui.jqXHR.success(function (responseText) { alert(responseText); }); } });
//禁用选项卡 $('#tabs').tabs('disable'); //$('#tabs').tabs('disable', 0); //启用选项卡 $('#tabs').tabs('enable'); //$('#tabs').tabs('enable', 0); //获取选项卡jQuery 对象 $('#tabs').tabs('widget'); //更新选项卡 $('#tabs').tabs('refresh'); //删除tabs 选项卡 $('#tabs').tabs('destroy'); //重载指定选项卡内容 $('#button').click(function () { $('#tabs').tabs('load', 0); }); //得到tabs 的options 值 alert($('#tabs').tabs('option', 'active')); //设置tabs 的options 值 $('#tabs').tabs('option', 'active', 1);
//ajax 加载后触发 $('#tabs').on('tabsload', function () { alert('ajax 加载后触发!'); }); //ajax 加载前触发 $('#tabs').on('tabsbeforeload', function () { alert('ajax 加载前触发!'); }); //选项卡切换时触发 $('#tabs').on('tabsactivate', function () { alert('选项卡切换时触发!'); }); //选项卡切换前触发 $('#tabs').on('tabsbeforeactivate ', function () { alert('选项卡切换前触发!'); });