srcmini本文概述
选项卡是一组逻辑分组的内容, 可帮助用户在它们之间进行切换。制表符像手风琴一样节省空间。
每个选项卡都必须使用以下标记集才能正常工作。
- 制表符必须在有序<ol>或无序<ul>列表中。
- 每个选项卡标题必须位于每个<li>中, 并由带有href属性的锚点（<a>）标记包裹。
- 每个选项卡面板可以是任何有效元素, 但必须具有一个ID, 该ID对应于关联的选项卡的锚点中的哈希值。
jQuery UI tabs()方法用于更改页面内HTML元素的外观。此方法遍历HTML代码, 并向该元素添加新的CSS类以为其赋予适当的样式。
句法：
你可以通过两种形式使用tabs()方法：
$(selector, context).tabs (options) Method$(selector, context).tabs ("action", params) Method第一种方法
tabs（选项）方法指定应将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的tab函数中选项事件的用法。
<!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>立即测试
第二种方法
选项卡（“动作”, 参数）方法允许选项卡上的动作（通过JavaScript程序）选择, 禁用, 添加或删除选项卡。在这里, “操作”在第一个参数中指定为字符串（例如, “添加”以添加新标签）。
句法：
$(selector, context).tabs ("action", params);以下列出了可以与该方法一起使用的不同操作。
| 行动 | 描述 |
|---|---|
| destroy | 此操作将完全破坏元素的选项卡功能, 并使元素返回其初始状态。此方法不接受任何参数。 |
| disable | 此操作将禁用所有选项卡。此方法不接受任何参数。 |
| disable( index ) | 此操作用于禁用指定的选项卡。索引是要禁用的选项卡。 |
| enable | 此操作将激活所有选项卡。该签名不接受任何参数。 |
| enable( index ) | 此操作将激活指定的选项卡。索引是要启用的标签。 |
| load( 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>立即测试
评论前必须登录！
注册