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 ><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] ) //第二个参数是停留时间，第三个参数是当用户选中一个标签页后是否继续执行