本文概述
- 第一种方法
- jQuery UI tabs()示例1
- jQuery UI tabs()示例2
- jQuery UI tabs()示例3
- 第二种方法
- jQuery UI tabs()示例4
每个选项卡都必须使用以下标记集才能正常工作。
- 制表符必须在有序< ol> 或无序< ul> 列表中。
- 每个选项卡标题必须位于每个< li> 中, 并由带有href属性的锚点(< a> )标记包裹。
- 每个选项卡面板可以是任何有效元素, 但必须具有一个ID, 该ID对应于关联的选项卡的锚点中的哈希值。
句法:
你可以通过两种形式使用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。 |
<
!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://img.readke.com/220430/0135453437-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0135455594-1.jpg">
<
/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="http://www.srcmini.com/#tabs-2">
Poem<
/a>
<
/li>
<
li>
<
a href="http://www.srcmini.com/#tabs-3">
Joke<
/a>
<
/li>
<
li>
<
a href="http://www.srcmini.com/#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://img.readke.com/220430/0135453437-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0135455594-1.jpg">
<
/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="http://www.srcmini.com/#tabs-6">
Poem<
/a>
<
/li>
<
li>
<
a href="http://www.srcmini.com/#tabs-7">
Joke<
/a>
<
/li>
<
li>
<
a href="http://www.srcmini.com/#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://img.readke.com/220430/0135453437-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0135455594-1.jpg">
<
/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="http://www.srcmini.com/#tabs-10">
Poem<
/a>
<
/li>
<
li>
<
a href="http://www.srcmini.com/#tabs-11">
Joke<
/a>
<
/li>
<
li>
<
a href="http://www.srcmini.com/#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类名进行注释。 |
让我们举个例子来看一下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://img.readke.com/220430/0135453437-0.jpg">
<
/script>
<
script src="http://img.readke.com/220430/0135455594-1.jpg">
<
/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="http://www.srcmini.com/#tabs-14">
Tab 1<
/a>
<
/li>
<
li>
<
a href="http://www.srcmini.com/#tabs-15">
Tab 2<
/a>
<
/li>
<
li>
<
a href="http://www.srcmini.com/#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>
【jQuery UI选项卡】立即测试
推荐阅读
- jQuery UI切换
- jQuery UI switchClass
- jQuery UI微调器
- jQueryUI可排序
- jQuery UI滑块
- jQuery UI展示
- jQuery UI选择菜单
- jQuery UI可选
- jQuery UI可调整大小