部件

动画

UI/API/1.7/Tabs

概述
参数
事件
方法
主题

jQuery UI Tabs

Tabs通常被用来将内容分成不同的场景片段来交换显示,类似于accordion.

通常tab不见通过点击一个tab标头来实现交换, 但是这个事件也可以是onHover. Tab的内容可以使用Ajax来获取其链接的内容.

事件

标签互动时的一系列事件:

tabsselect, tabsload, tabsshow (在该序列中)
tabsadd, tabsremove
tabsenable, tabsdisable

事件绑定示例:

	$('#example').bind('tabsselect', function(event, ui) {
    // 函数上下文中可用的对象:
    ui.tab     // 所选择的tab锚点对象
    ui.panel   // 所选择的tab内容对象
    ui.index   // 所选择的tab的排序序列号(从0开始)
	});

注: 如果tabsselect事件的处理程序返回false, 点击的tab将不会被选中 (例如:在一个表单验证中点击下一步时很有用).

Ajax 模式

Tab支持使用隐式的方式调用Ajax来加载内容.

你需要使用的HTML只有一点少许的不同: 列表的链接指向现有的资源 (从哪里加载内容)并且所有的内容项不需要多余的容器 (隐式的!). 容器标记将是即时创建的:

<div id="example">
     <ul>
         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
     </ul>
</div>

显然这会增强通用性, 例如. 内容的链接在JavaScript被禁用时依然有效.

注: 如果您还是想使用一个现有的容器,你可以给连接设置一个title属性,这个title属性要和内容容器的id相匹配(相同):

<li><a href="hello/world.html" title="Todo Overview"> ... </a></li>

容器设置为类似与下面这样:

<div id="Todo_Overview"> ... </div>

(注: 空格应使用下划线来代替)

这是非常有用的,如果你想使用一个人性化的读取散列来代替隐性生成的那个的话.

返回按钮和书签

两个标签即支持此功能, 虽然历史记录插件第一次在tabs上建立功能时需要重写(不支持Safari 3,而且总体来说有点勉强). 但是事实上UI tabs插件中的bug自身总是有更高的优先.

如何...

...获取当前选中的tab

var $tabs = $('#example').tabs();
var selected = $tabs.data('selected.tabs');

...不离开页面在当前标签中打开链接

经过"Hijax" 链接后,加载tabs的内容:

$('#example').tabs({
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
});

...从一个文本链接选择一个tab而不是点击该tab

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

...根据表单验证来组织在tab上的交换点击

Returning false in the tabs select handler prevents the clicked tab from becoming selected.

$('#example').tabs({
    select: function(event, ui) {
        var isValid = ... // form validation returning true or false
        return isValid;
    }
});

...立即选择刚才添加的tab

var $tabs = $('#example').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});

...使用打开一个新窗口代替打开tab

注意:标签中打开一个新窗口会让人感到意外, 例如. 不一致的行为暴露了可用性问题 (http://www.useit.com/alertbox/tabs.html).

$('#example').tabs({
    select: function(event, ui) {
        location.href = $.data(ui.tab, 'load.tabs');
        return false;
    }
});

...在tab初始化之前预防FOUC (文档样式短暂失效)

立刻添加必要的样式隐藏无效的tab面板 - 注意:在将在JavaScript被禁用时不会影响页面效果:

<div id="example" class="ui-tabs">
  ...
  <div id="a-tab-panel" class="ui-tabs-hide"> </div>
  ...
</div>

为什么...

...我的slider,Google Map,sIFR 等等.无法工作在隐藏的(不在活动的)tab中?

其初始化需要一些空间计算的任何组成部分都不会工作在一个隐藏的tab中, 因为tab面板通过display: none来隐藏自己,所以任何在其中的元素都无法反馈自己的宽度和高度 (大多数浏览器返回0).

这里有一个简单的解决方法. 使用off-left 技巧来隐藏不活动的面板. 例. 在你的样式表中使用下面的代码替换 ".ui-tabs .ui-tabs-hide"

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

对于Google maps 你还可以使用下面的方法在它显示后调整大小:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

resizeMap() 会在指定的地图上调用 Google Map 的 checkResize().

其他附加文件

UI Core
使用cookie选项: jquery.cookie.js

必需的CSS:

.ui-tabs .ui-tabs-hide {
     display: none;
}

一个简单的 jQuery UI Tabs.

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

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="ui/ui.core.js"></script>
  <script type="text/javascript" src="ui/ui.tabs.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#tabs").tabs();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>
</body>
</html>

ajaxOptions

类型:

Options

默认值:

null

在tab内容载入时额外需要的Ajax选项 (参考jQuery文档 $.ajax).
代码示例
使用指定的ajaxOptions参数初始化一个tabs.
```
$('.selector').tabs({ ajaxOptions: { async: false } });
```
在初始化后设置或者获取ajaxOptions参数.
```
//获取
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//设置
$('.selector').tabs('option', 'ajaxOptions', { async: false });
```
cache

类型:

Boolean

默认值:

false

是否缓存远程tab内容, 例如: 是只加载一次还是每次点击都重新加载. 缓存内容是惰性加载的, 譬如只加载一次且只在第一次点击时才加载. 注意:将此项设置为false将阻止你需要的缓存被Ajax从浏览器缓存中取出缓存内容.
代码示例
使用指定的cache参数初始化一个tabs.
```
$('.selector').tabs({ cache: true });
```
在初始化后设置或者获取cache参数.
```
//获取
var cache = $('.selector').tabs('option', 'cache');
//设置
$('.selector').tabs('option', 'cache', true);
```
collapsible

类型:

Boolean

默认值:

false

设置为true时将设置一个选中的tab再此被选中时执行反选操作.
代码示例
使用指定的collapsible参数初始化一个tabs.
```
$('.selector').tabs({ collapsible: true });
```
在初始化后设置或者获取collapsible参数.
```
//获取
var collapsible = $('.selector').tabs('option', 'collapsible');
//设置
$('.selector').tabs('option', 'collapsible', true);
```
cookie

类型:

Object

默认值:

null

存储最后一个选中的tab到cookie中. 如果没有定义selected参数,cookie用来确定最初选定的tab的选项. 需要 cookie 插件. 该对象需要以键/值对的形式提供给Cookie插件作为参数. 可用的选项 (例): { expires: 7, path: '/', domain: 'jquery.com', secure: true }. 从jQuery UI 1.7 开始还可以通过name属性来定义它的cookie名.
代码示例
使用指定的cookie参数初始化一个tabs.
```
$('.selector').tabs({ cookie: { expires: 30 } });
```
在初始化后设置或者获取cookie参数.
```
//获取
var cookie = $('.selector').tabs('option', 'cookie');
//设置
$('.selector').tabs('option', 'cookie', { expires: 30 });
```
deselectable

类型:

Boolean

默认值:

false

jQuery UI 1.7 不推荐使用, 请使用collapsible.
代码示例
使用指定的deselectable参数初始化一个tabs.
```
$('.selector').tabs({ deselectable: true });
```
在初始化后设置或者获取deselectable参数.
```
//获取
var deselectable = $('.selector').tabs('option', 'deselectable');
//设置
$('.selector').tabs('option', 'deselectable', true);
```
disabled

类型:

Array<Number>

默认值:

[]

一个包含tabs序列编号的数组(从0开始),在初始化时他们将被禁用A.
代码示例
使用指定的disabled参数初始化一个tabs.
```
$('.selector').tabs({ disabled: [1, 2] });
```
在初始化后设置或者获取disabled参数.
```
//获取
var disabled = $('.selector').tabs('option', 'disabled');
//设置
$('.selector').tabs('option', 'disabled', [1, 2]);
```
event

类型:

String

默认值:

'click'

出发tab选择事件所使用的事件名称.
代码示例
使用指定的event参数初始化一个tabs.
```
$('.selector').tabs({ event: 'mouseover' });
```
在初始化后设置或者获取event参数.
```
//获取
var event = $('.selector').tabs('option', 'event');
//设置
$('.selector').tabs('option', 'event', 'mouseover');
```
fx

类型:

Options, Array<Options>

默认值:

null

在隐藏或者显示面板的时候开启动画.. duration选项可以是预设的三种速度 ("slow", "normal", "fast") 或者设置一个动画持续的毫秒数 (默认"normal").
代码示例
使用指定的fx参数初始化一个tabs.
```
$('.selector').tabs({ fx: { opacity: 'toggle' } });
```
在初始化后设置或者获取fx参数.
```
//获取
var fx = $('.selector').tabs('option', 'fx');
//设置
$('.selector').tabs('option', 'fx', { opacity: 'toggle' });
```
idPrefix

类型:

String

默认值:

'ui-tabs-'

如果是远程tab, 其锚点元素, 没有从id产生title属性, 将从这个前缀创建一个 id/片段的标识和使用$.data(el)产生的唯一标识, 例如 "ui-tabs-54".
代码示例
使用指定的idPrefix参数初始化一个tabs.
```
$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });
```
在初始化后设置或者获取idPrefix参数.
```
//获取
var idPrefix = $('.selector').tabs('option', 'idPrefix');
//设置
$('.selector').tabs('option', 'idPrefix', 'ui-tabs-primary');
```
panelTemplate

类型:

String

默认值:

'<div></div>'

在使用添加方法创建新的tab面板并且添加到tab 上时它所使用的HTML模板.
代码示例
使用指定的panelTemplate参数初始化一个tabs.
```
$('.selector').tabs({ panelTemplate: '<li></li>' });
```
在初始化后设置或者获取panelTemplate参数.
```
//获取
var panelTemplate = $('.selector').tabs('option', 'panelTemplate');
//设置
$('.selector').tabs('option', 'panelTemplate', '<li></li>');
```
selected

类型:

Number

默认值:

0

从0开始的序列值,设置第几个tab将在初始化时被选中. 设置为-1则不选中所有tab.
代码示例
使用指定的selected参数初始化一个tabs.
```
$('.selector').tabs({ selected: 3 });
```
在初始化后设置或者获取selected参数.
```
//获取
var selected = $('.selector').tabs('option', 'selected');
//设置
$('.selector').tabs('option', 'selected', 3);
```
spinner

类型:

String

默认值:

'<em>Loading…</em>'

这个设置在远程内容加载时显示在tab标题的文字. 设置为空字符串则这个动作无效.
代码示例
使用指定的spinner参数初始化一个tabs.
```
$('.selector').tabs({ spinner: 'Retrieving data...' });
```
在初始化后设置或者获取spinner参数.
```
//获取
var spinner = $('.selector').tabs('option', 'spinner');
//设置
$('.selector').tabs('option', 'spinner', 'Retrieving data...');
```
tabTemplate

类型:

String

默认值:

'<li><a href="#{href}"><span>#{label}</span></a></li>'

在创建并添加一个新的tab的时候所使用的HTML模板. 通过add方法#{href} and #{label} 占位符会被 url 和 tab label 替换.
代码示例
使用指定的tabTemplate参数初始化一个tabs.
```
$('.selector').tabs({ tabTemplate: '<div><a href="#{href}"><span>#{label}</span></a></div>' });
```
在初始化后设置或者获取tabTemplate参数.
```
//获取
var tabTemplate = $('.selector').tabs('option', 'tabTemplate');
//设置
$('.selector').tabs('option', 'tabTemplate', '<div><a href="#{href}"><span>#{label}</span></a></div>');
```

select

类型:

tabsselect

这个事件在点击一个tab的时候触发.
代码示例
提供一个回调函数对select事件进行操作.
```
$('.selector').tabs({
   select: function(event, ui) { ... }
});
```
使用tabsselect类型来绑定select事件.
```
$('.selector').bind('tabsselect', function(event, ui) {
  ...
});
```
load

类型:

tabsload

这个事件在一个远程的tab被加载以后触发.
代码示例
提供一个回调函数对load事件进行操作.
```
$('.selector').tabs({
   load: function(event, ui) { ... }
});
```
使用tabsload类型来绑定load事件.
```
$('.selector').bind('tabsload', function(event, ui) {
  ...
});
```
show

类型:

tabsshow

这个事件在一个tab显示的时候触发.
代码示例
提供一个回调函数对show事件进行操作.
```
$('.selector').tabs({
   show: function(event, ui) { ... }
});
```
使用tabsshow类型来绑定show事件.
```
$('.selector').bind('tabsshow', function(event, ui) {
  ...
});
```
add

类型:

tabsadd

这个事件在一个tab被添加后触发.
代码示例
提供一个回调函数对add事件进行操作.
```
$('.selector').tabs({
   add: function(event, ui) { ... }
});
```
使用tabsadd类型来绑定add事件.
```
$('.selector').bind('tabsadd', function(event, ui) {
  ...
});
```
remove

类型:

tabsremove

这个事件在一个tab被移除时触发.
代码示例
提供一个回调函数对remove事件进行操作.
```
$('.selector').tabs({
   remove: function(event, ui) { ... }
});
```
使用tabsremove类型来绑定remove事件.
```
$('.selector').bind('tabsremove', function(event, ui) {
  ...
});
```
enable

类型:

tabsenable

这个事件在一个tab被启用时触发.
代码示例
提供一个回调函数对enable事件进行操作.
```
$('.selector').tabs({
   enable: function(event, ui) { ... }
});
```
使用tabsenable类型来绑定enable事件.
```
$('.selector').bind('tabsenable', function(event, ui) {
  ...
});
```
disable

类型:

tabsdisable

这个事件在一个tab被禁用时触发.
代码示例
提供一个回调函数对disable事件进行操作.
```
$('.selector').tabs({
   disable: function(event, ui) { ... }
});
```
使用tabsdisable类型来绑定disable事件.
```
$('.selector').bind('tabsdisable', function(event, ui) {
  ...
});
```

destroy

方法签名:

.tabs( 'destroy' )

完全移除tabs功能. 这将使元素返回到之前的初始化状态.
disable

方法签名:

.tabs( 'disable' )

禁用 tabs.
enable

方法签名:

.tabs( 'enable' )

启用 tabs.
option

方法签名:

.tabs( 'option', optionName, [value] )

获取或者设置tabs参数. 如果没有提供参数值则是获取.
add

方法签名:

.tabs( 'add', url, label, [index] )

添加一个新的tab. 第二个参数是一个url地址或者是一个组成的片段标识符,只允许在Ajax tab上创建一个页内的tab或者一个完整的url (相对或绝对, 不支持跨域). 第三个参数是该tab要插入的位置标识(从0开始,可选参数). 默认新添加的tab会添加到最后一个位置.
remove

方法签名:

.tabs( 'remove', index )

移除一个tab. 第二个参数是一个从0开始的标识,它标识了要移除的tab在tabs中的排序位置.
enable

方法签名:

.tabs( 'enable', index )

让一个tab启用. 可以设置属性象下面这样一次重置多个tab的disabled属性: $('#example').data('disabled.tabs', []);. 第二个参数是要启用的tab在tabs中的排序位置(从0开始).
disable

方法签名:

.tabs( 'disable', index )

禁用一个tab. 当前选中的tab不能被禁用. 一个禁用多个tab的用法: $('#example').data('disabled.tabs', [1, 2, 3]); 第二个参数是要启用的tab在tabs中的排序位置(从0开始).
select

方法签名:

.tabs( 'select', index )

选中一个tab, 如果它被点击过. 第二个参数是要选中的tab在tabs中的排序位置(从0开始)或者是一个选择该tab内容面板区域的选择器(selector)(tab的href片段标识, 例如. 指向面板id的序列).
load

方法签名:

.tabs( 'load', index )

使用Ajax加载一个重新面板的内容. 即使cache设置为true这个方法也始终从远程地址获取tab的内容. 第二个参数是要加载的内容区在tabs中的排序位置(从0开始).
url

方法签名:

.tabs( 'url', index, url )

改变一个Ajax(远程)tab要加载的url地址. 指定的URL讲在之后的加载中使用. 注意:你不仅可以用此方法更改一个现有的远程tab,还可以用它使一个页内tab成为一个远程tab. 第二个参数标识了第几个tab要更新URL(从0开始). 第三个参数是要加载的地址.
length

方法签名:

.tabs( 'length' )

返回tabs第一次匹配的tab的数量.
abort

方法签名:

.tabs( 'abort' )

终止tab中所有在运行的ajax和动画效果.
rotate

方法签名:

.tabs( 'rotate', ms, [continuing] )

设置一个面板自动轮换的tab. 第二个参数是轮换到下个面板之前显示多长的时间(单位毫秒). 设置为0或者null可终止轮换. 第三个参数设置在用户选择了一个tab后是否还自动轮换,默认:false.

jQuery UI Tabs插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.

如果有更深层次的个性化需要，有特定类别的工具ui.tabs.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。

jQuery UI CSS Framework classes示例

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

Note: 注：这是一个示例tabs插件所产生的标记,而不是你应该使用的标记.创建一个tabs唯一需要的标记是
<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>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>.

部件

动画

UI/API/1.7/Tabs

jQuery UI Tabs

概述

目录

事件

Ajax 模式

返回按钮和书签

如何...

...获取当前选中的tab

...不离开页面在当前标签中打开链接

...从一个文本链接选择一个tab而不是点击该tab

...根据表单验证来组织在tab上的交换点击

...立即选择刚才添加的tab

...使用打开一个新窗口代替打开tab

...在tab初始化之前预防FOUC (文档样式短暂失效)

为什么...

...我的slider,Google Map,sIFR 等等.无法工作在隐藏的(不在活动的)tab中?

其他附加文件

示例

参数

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

事件

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

代码示例

方法

主题

jQuery UI CSS Framework classes示例