jQuery UI tabs
jQuery UI tabs
选项卡是一组逻辑分组的内容，可帮助用户在它们之间进行切换。选项卡可以像手风琴一样节省空间。
每个选项卡都必须使用以下标记集才能正常工作。
选项卡必须位于有序<ol>或无序列表中。
每个选项卡标题必须位于每个<li>中，并由带有href属性的锚点(<a>)标签包裹。
每个选项卡面板都可以是任何有效元素，但是它必须具有与关联的选项卡的锚点中的哈希值相对应的ID。
jQuery UI tabs()方法用于更改页面内HTML元素的外观。此方法遍历HTML代码，并向该元素添加新的CSS类以为其提供适当的样式。
语法:
您可以以两种形式使用tabs()方法:
$(selector, context).tabs(options)
$(selector, context).tabs("action", params)
第一个方法
tabs(options)方法指定应将HTML元素及其内容作为选项卡进行管理。这里的"选项"参数是一个对象，用于指定选项卡的外观和行为。
语法:
$(selector, context).tabs(options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示:
$(selector, context).tabs({option1: value1, option2: value2..... });
以下是可以与该方法一起使用的选项列表:
| 选项 | 说明 |
| active | 此选项指示当前活动的选项卡/面板。默认情况下，其值为0。 |
| collapsible | 如果将此选项设置为TRUE，则可以取消选择选项卡。如果将其设置为false(默认值)，则单击选定的选项卡不会取消选择(保持选中状态)。默认情况下，其值为false。 |
| disabled | 此选项使用数组来指示已禁用(因此无法选择)的索引选项卡。例如，使用[0，1]禁用前两个标签。默认情况下，其值为false。 |
| event | 此选项是事件的名称，可让用户选择一个新选项卡。例如，如果将此选项设置为" mouseover"，则将鼠标移到选项卡上将选中它。默认情况下，其值为" click"。 |
| heightStyle | 此选项控制选项卡小部件的高度。默认情况下，其值为" content"。 |
| hide | 此选项指定如何设置面板隐藏动画。默认情况下，其值为null。 |
| show | 此选项指定如何对面板显示进行动画处理。默认情况下，其值为NULL。 |
jQuery UI tabs()示例1
让我们举一个简单的示例来演示tab的功能，不将任何参数传递给tabs()方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-1").tabs();
});
</script>
<style>
#tabs-1{font-size: 14px;}
.ui-widget-header {
background:lightpink;
border: 1px solid #b9cd6d;
color: lightyellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="tabs-1">
<ul>
<li><a href="#tabs-2">Poem</a></li>
<li><a href="#tabs-3">Joke</a></li>
<li><a href="#tabs-4">Quote</a></li>
</ul>
<div id="tabs-2">
<p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
</p>
</div>
<div id="tabs-3">
<p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/>
God said to man --- So that they will love you.<br/> </p>
</div>
<div id="tabs-4">
<p>" The whole secret of existence is to have no fear."
Buddha</p>
</div>
</div>
</body>
</html>
jQuery UI tabs()示例2
heightStyle的使用，可折叠和隐藏:
让我们举一个例子在jQueryUI的tabs函数中演示heightStyle选项的用法，可折叠和隐藏。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-5").tabs({
heightStyle:"fill",
collapsible:true,
hide:"slideUp"
});
});
</script>
<style>
#tabs-5{font-size: 14px;}
.ui-widget-header {
background:lightpink;
border: 1px solid #b9cd6d;
color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="tabs-5">
<ul>
<li><a href="#tabs-6">Poem</a></li>
<li><a href="#tabs-7">Joke</a></li>
<li><a href="#tabs-8">Quote</a></li>
</ul>
<div id="tabs-6">
<p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
</p>
</div>
<div id="tabs-7">
<p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/>
God said to man --- So that they will love you.<br/> </p>
</div>
<div id="tabs-8">
<p>" The whole secret of existence is to have no fear."
Buddha</p>
</div>
</div>
</body>
</html>
jQuery UI tabs()示例3
事件的使用:
让我们以一个示例来演示使用jQueryUI的标签功能中的选项事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-9").tabs({
event:"mouseover"
});
});
</script>
<style>
#tabs-9{font-size: 14px;}
.ui-widget-header {
background:lightpink;
border: 1px solid #b9cd6d;
color: lightyellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="tabs-9">
<ul>
<li><a href="#tabs-10">Poem</a></li>
<li><a href="#tabs-11">Joke</a></li>
<li><a href="#tabs-12">Quote</a></li>
</ul>
<div id="tabs-10">
<p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
</p>
</div>
<div id="tabs-11">
<p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/>
God said to man --- So that they will love you.<br/> </p>
</div>
<div id="tabs-12">
<p>" The whole secret of existence is to have no fear."
Buddha</p>
</div>
</div>
</body>
</html>
第二种方法
tabs ("action",params)方法允许对选项卡进行操作(通过JavaScript程序)以选择，禁用，添加或删除选项卡。在这里，"操作"在第一个参数中指定为字符串(例如，"添加"以添加新标签)。
语法:
$(selector, context).tabs("action", params);
以下是可与该方法一起使用的不同操作的列表。
| 动作 | 说明 |
| destroy | 此操作将完全destroy元素的选项卡功能，并使元素返回其初始状态。此方法不接受任何参数。 |
| disable | 此操作将禁用所有选项卡。此方法不接受任何参数。 |
| disable(index) | 此操作用于禁用指定的选项卡。这里的index是要禁用的标签。 |
| enable | 此操作将激活所有选项卡。此签名不接受任何参数。 |
| enable(index) | 此操作将激活指定的选项卡。索引是要启用的标签。 |
| load(index) | 此操作将强制重新加载索引的选项卡，而忽略缓存。这里的index是要加载的标签。 |
| option(optionName) | 此操作获取当前与指定的optionName关联的值。 |
| option | 此操作获取一个对象，该对象包含表示当前选项卡选项哈希的键/值对。 |
| option(optionName，value) | 此操作设置与指定的optionName关联的tabs选项的值。参数optionName是要设置的选项的名称，value是要设置的选项的值。 |
| option(Options) | 此操作会将一个或多个选项设置到选项卡。 |
| refresh | 当直接在DOM中添加或删除任何选项卡时，此操作将重新计算选项卡面板的高度。其结果取决于内容和heightStyle选项。 |
| widget | 此操作将返回用作选项卡小部件的元素，并带有UI-tabs类名。 |
jQuery UI tabs()示例4
使用动作diable():
让我们例子来了解如何使用action disable()方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-13").tabs();
$( "#tabs-13").tabs("disable");
});
</script>
<style>
#tabs-13{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="tabs-13">
<ul>
<li><a href="#tabs-14">Tab 1</a></li>
<li><a href="#tabs-15">Tab 2</a></li>
<li><a href="#tabs-16">Tab 3</a></li>
</ul>
<div id="tabs-14">
<p>Twinkle, twinkle, little star,<br/>
How I wonder what you are.<br/>
Up above the world so high,<br/>
Like a diamond in the sky.<br/>
Twinkle, twinkle, little star,<br/>
How I wonder what you are!<br/>
</p>
</div>
<div id="tabs-15">
<p>Man said to God --- Why did you make women so beautiful?<br/>
God said to man --- So that you will love them.<br/>
Man said to God --- But why did you make them so dumb?<br/>
God said to man --- So that they will love you.<br/> </p>
</div>
<div id="tabs-16">
<p>" The whole secret of existence is to have no fear."
Buddha</p>
</div>
</div>
</body>
</html>