JQuery UI - tabs
- 标签页插件通常用于将内容分解成多个部分，可交换查看，节省空间。有点类似于手风琴插件。
- 官方示例地址：http://jqueryui.com/demos/tabs/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
·概述
标签页插件通常用于将内容分解成多个部分，可交换查看，节省空间。有点类似于手风琴插件。
官方示例地址：http://jqueryui.com/demos/tabs/
·丰富的事件支持：
tabsselect, tabsload, tabsshow
tabsadd, tabsremove
tabsenable, tabsdisable事件绑定示例:
$('#example').bind('tabsselect', function(event, ui) {
// 在事件函数的上下文中可使用:
ui.tab // 锚元素选中的标签页
ui.panel // 锚元素选中的标签页的内容
ui.index // 锚元素选中的标签页的索引（从0开始）
});
注意：一个tabsselect事件如果返回false，那么新的标签页将不会被激活。（可用于验证表单内容）·Ajax模式：
标签页插件支持通过ajax动态加载一个标签的内容。
你需要的仅是一个带有链接的HTML列表，告诉插件需要到哪获取内容。
<div id="example">
<ul>
<li><a href="ahah_1.html" mce_href="ahah_1.html"><span>Content 1</span></a></li>
<li><a href="ahah_2.html" mce_href="ahah_2.html"><span>Content 2</span></a></li>
<li><a href="ahah_3.html" mce_href="ahah_3.html"><span>Content 3</span></a></li>
</ul>
</div>
显然，这将会减缓内容加载的速度。注意：如果你要重用一个标签页容器，你可以试着匹配其title属性和容器的id，
例如: <li><a href="hello/world.html" mce_href="hello/world.html" title="Todo Overview"> ... </a></li>
容器: <div id="Todo_Overview"> ... </div>
·关于后退按钮和书签
Tabs 2 已经支持此功能（不支持Safari 3）·How to...
·检索选中标签的索引
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
·在当前标签中打开链接，而不是跳转页面
$('#example').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
·点击链接跳转到指定的标签页（非标签头链接）
var $tabs = $('#example').tabs(); // 选中第一个标签
$('#my-text-link').click(function() { // 绑定点击事件
$tabs.tabs('select', 2); // 激活第三个标签
return false;
});
·选中表单前验证
$('#example').tabs({
select: function(event, ui) {
var isValid = ... // 表单验证返回结果true或false
return isValid;
}
});
·添加一个标签并选中
var $tabs = $('#example').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});
·follow a tab's URL instead of loading its content via ajax
Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).
$('#example').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
if( url ) {
location.href = url;
return false;
}
return true;
}
});
·prevent a FOUC (Flash of Unstyled Content) before tabs are initialized
Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:
<div id="example" class="ui-tabs">
...
<div id="a-tab-panel" class="ui-tabs-hide"> </div>
...
</div>
·参数（参数名 : 参数类型 : 默认名称）
ajaxOptions : Options : null
Ajax加载标签内容时，附加的参数 (详见 $.ajax)。
初始：$('.selector').tabs({ ajaxOptions: { async: false } });
获取：var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
设置：$('.selector').tabs('option', 'ajaxOptions', { async: false });cache : Boolean : false
是否缓存Ajax加载的标签内容，如果缓存则只在第一次加载时获取。
初始：$('.selector').tabs({ cache: true });
获取：var cache = $('.selector').tabs('option', 'cache');
设置：$('.selector').tabs('option', 'cache', true);collapsible : Boolean : false
设置为true，则允许一个已选中的标签变成未选中状态。
初始：$('.selector').tabs({ collapsible: true });
获取：var collapsible = $('.selector').tabs('option', 'collapsible');
设置：$('.selector').tabs('option', 'collapsible', true);cookie : Object : null
利用cookie记录最后选中的标签，需要cookie插件支持。
初始：$('.selector').tabs({ cookie: { expires: 30 } });
获取：var cookie = $('.selector').tabs('option', 'cookie');
设置：$('.selector').tabs('option', 'cookie', { expires: 30 });deselectable : Boolean : false
设置标签插件为不可选中的。（不推荐使用在1.7版本，应使用collapsible）
初始：$('.selector').tabs({ deselectable: true });
获取：var deselectable = $('.selector').tabs('option', 'deselectable');
设置：$('.selector').tabs('option', 'deselectable', true);disabled : Array : []
在加载时，禁用哪些标签页，填写标签页的索引。
初始：$('.selector').tabs({ disabled: [1, 2] });
获取：var disabled = $('.selector').tabs('option', 'disabled');
设置：$('.selector').tabs('option', 'disabled', [1, 2]);event : String : 'click'
设置什么事件将触发选中一个标签页。
初始：$('.selector').tabs({ event: 'mouseover' });
获取：var event = $('.selector').tabs('option', 'event');
设置：$('.selector').tabs('option', 'event', 'mouseover');fx : Options, Array : null
启用动画效果当标签页显示和隐藏。
初始：$('.selector').tabs({ fx: { opacity: 'toggle' } });
获取：var fx = $('.selector').tabs('option', 'fx');
设置：$('.selector').tabs('option', 'fx', { opacity: 'toggle' });idPrefix : String : 'ui-tabs-'
If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".
初始：$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });
获取：var idPrefix = $('.selector').tabs('option', 'idPrefix');
设置：$('.selector').tabs('option', 'idPrefix', 'ui-tabs-primary');panelTemplate : String : '<div></div>'
当动态添加一个标签容器时，它的容器的HTML元素。
初始：$('.selector').tabs({ panelTemplate: '<li></li>' });
获取：var panelTemplate = $('.selector').tabs('option', 'panelTemplate');
设置：$('.selector').tabs('option', 'panelTemplate', '<li></li>');selected : Number : 0
设置初始化时，选中的标签页的索引（从0开始）。如果全部未选中，则使用-1
初始：$('.selector').tabs({ selected: 3 });
获取：var selected = $('.selector').tabs('option', 'selected');
设置：$('.selector').tabs('option', 'selected', 3);spinner : String : '<em>Loading…</em>'
设置当从远程加载内容时，标签的标题显示的文本内容，如果设置为空则停用此行为。
初始：$('.selector').tabs({ spinner: 'Retrieving data...' });
获取：var spinner = $('.selector').tabs('option', 'spinner');
设置：$('.selector').tabs('option', 'spinner', 'Retrieving data...');tabTemplate : String : '<li><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></li>'
当动态添加一个标签页时，它的标签样式，#{href}和#{label}是用于替换add时的参数。
初始：$('.selector').tabs({ tabTemplate: '<div><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></div>' });
获取：var tabTemplate = $('.selector').tabs('option', 'tabTemplate');
设置：$('.selector').tabs('option', 'tabTemplate', '<div><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></div>');
·事件
select : tabsselect
当点击一个标签标题时，触发此事件。
初始：$('.selector').tabs({ select: function(event, ui) { ... } });
绑定：$('.selector').bind('tabsselect', function(event, ui) { ... });load : tabsload
当远程加载一个标签页内容完成后，触发此事件。
初始：$('.selector').tabs({ load: function(event, ui) { ... } });
绑定：$('.selector').bind('tabsload', function(event, ui) { ... });show : tabsshow
当一个标签页内容显示出来后，触发此事件。
初始：$('.selector').tabs({ show: function(event, ui) { ... } });
绑定：$('.selector').bind('tabsshow', function(event, ui) { ... });add : tabsadd
当添加一个标签页后，触发此事件。
初始：$('.selector').tabs({ add: function(event, ui) { ... } });
绑定：$('.selector').bind('tabsadd', function(event, ui) { ... });remove : tabsremove
当移除一个标签页后，触发此事件。
初始：$('.selector').tabs({ remove: function(event, ui) { ... } });
绑定：$('.selector').bind('tabsremove', function(event, ui) { ... });enable : tabsenable
当一个标签页被设置成启用后，触发此事件。
初始：$('.selector').tabs({ enable: function(event, ui) { ... } });
绑定：$('.selector').bind('tabsenable', function(event, ui) { ... });disable : tabsdisable
当一个标签页被设置成禁用后，触发此事件。
初始：$('.selector').tabs({ disable: function(event, ui) { ... } });
绑定：$('.selector').bind('tabsdisable', function(event, ui) { ... });
·属性
destroy
销毁一个标签插件对象。
用法：.tabs( 'destroy' )disable
禁用标签插件。
用法：.tabs( 'disable' )enable
启用标签插件。
用法：.tabs( 'enable' )option
获取或设置标签插件的参数。
用法：.tabs( 'option' , optionName , [value] )add
添加一个标签页。
用法：.tabs( 'add' , url , label , [index] )remove
移除一个标签页。
用法：.tabs( 'remove' , index )enable
启用一组标签页。
用法：.tabs( 'enable' , index ) //index是数组disable
禁用一组标签页。
用法：.tabs( 'disable' , index ) //index是数组select
选中一个标签页。
用法：.tabs( 'select' , index )load
重新加载一个ajax标签页的内容。
用法：.tabs( 'load' , index )url
改变一个Ajax标签页的URL。
用法：.tabs( 'url' , index , url )length
获取标签页的数量。
用法：.tabs( 'length' )
abort
终止正在进行Ajax请求的的标签页的加载和动画。
用法：.tabs( 'abort' )rotate
自动滚动显示标签页。
用法：.tabs( 'rotate' , ms , [continuing] ) //第二个参数是停留时间，第三个参数是当用户选中一个标签页后是否继续执行