锐客网

  1. 首页 > 睿知 > it技术 > >

jQuery UI选项卡

jQueryUIjQueryUI选项卡

本文概述

  • 第一种方法
  • jQuery UI tabs()示例1
  • jQuery UI tabs()示例2
  • jQuery UI tabs()示例3
  • 第二种方法
  • jQuery UI tabs()示例4
选项卡是一组逻辑分组的内容, 可帮助用户在它们之间进行切换。制表符像手风琴一样节省空间。
每个选项卡都必须使用以下标记集才能正常工作。
  • 制表符必须在有序< 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://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类名进行注释。
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://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 switchClass

    下一篇：jQuery UI切换