Tab插件使用

最新推荐文章于 2024-07-25 11:52:08 发布

ionic2starter

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量984

点赞数

文章标签： stylesheet tabs button function div html

本文链接：https://blog.csdn.net/supermanjames/article/details/5078699

版权

2.6 使用选项卡方法

选项卡控件包括许多不同的方法，这意味着它具有丰富的行为。同时选项卡控件还支持更高级的函数实现，以允许采用编程方式使用它。现在来看看表2-5中所列出来的这些方法。

表2-5

方法	用途
add	通过编程方式增加选项卡，并在参数中指明选项卡内容的URL、label和索引号（可选的）
remove	通过编程方式除去选项卡，需要指明要去除选项卡的索引
enable	根据索引号激活被禁用的选项卡
disable	根据索引号禁用选项卡
select	通过编程方式根据索引号选择选项卡，其效果与访问者单击选项卡相同
load	选项卡被禁用
url	改变AJAX选项卡内容的URL；该方法需要指明选项卡的索引号和新的URL
destroy	彻底地去除整个选项卡控件
length	控件中选项卡的数量
rotate	一次性或重复地在经过指定的毫秒数之后，自动改变控件中活动的选项卡。

第1章里曾提到过jQuery UI的简化API，在接下来的几个范例中，将会表明使用它们到底简单到什么程度。

2.6.1 激活和禁用选项卡

可以通过使用enable和disable方法实现以编程方式激活和禁用特定的选项卡。这种方法可以有效地打开在控件初始化时被禁用的选项卡。在前面的例子中，默认禁用了第一个选项卡，下面可以使用enable方法来打开它。将tabs4.html文件修改如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/

TR/html4/strict.dtd">

<head>

themes/flora/flora.tabs.css">

tabsTheme.css">

charset=utf-8">

<title>jQuery UI Tabs Example 8</title>

</head>

<body>

</ul>

<div id="0">This is the content panel linked to the first tab, it

is shown by default.</div>

<div id="1">This content is linked to the second tab and will be

shown when its tab is clicked.</div>

<button id="enable">Enable!</button> <button id="disable">Disable!

</button>

jquery-1.2.6.js"></script>

ui.core.js"></script>

ui.tabs.js"></script>

//define function to be executed on document ready

$(function(){

//define config object

var tabOpts = {

selected: 1,

disabled: [0]

};

//create the tabs

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

//set click hander for the enable button

$("#enable").click(function() {

//enable the first tab

$("#myTabs").tabs("enable", 0);

});

//set click handler for the disable button

$("#disable").click(function() {

//disbale the second tab

$("#myTabs").tabs("disable", 1);

});

</script>

</body>

</html>

将修改后的文件保存为 jqueryui文件夹下的tabs8.html。例子中使用enable按钮的click事件来再次调用选项卡控件的构造函数，其中传递字符串 “enable”指明调用enable方法，还传递了想要激活的选项卡的索引号。disable方法的使用方式是完全相同的。本例中第二个选项卡只有在第一个选项卡被激活并选中后才能被禁用。

随着不断深入地阅读本书，读者将会发现每种组件所开放的方法都是以同样简单的方式使用的。

2.6.2 增加和除去选项卡

和以编程方式激活和禁用选项卡一样，还可以简单地动态增加新的完整选项卡或除去已有的选项卡。将tabs8.html修改如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/

TR/html4/strict.dtd">

<head>

themes/flora/flora.tabs.css">

charset=utf-8">

<title>jQuery UI Tabs Example 9</title>

</head>

<body>

<div>

</ul>

<div id="0">This is the content panel linked to the first tab,

it is shown by default.</div>

<div id="1">This content is linked to the second tab and will be

shown when its tab is clicked.</div>

</div>

<label>Enter a tab to remove:</label><input id="indexNum"><button

id="remove">Remove!</button><br><br>

<div id="newTab">This content will become part of the tabs when the

above button is clicked!</div>

</script>

ui.core.js"></script>

ui.tabs.js"></script>

//define function to be executed on document ready

$(function(){

//create the tabs

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

//add click handler for 'remove' button

$("#remove").click(function() {

//get the index to remove

var indexNumber = $("#indexNum").val() - 1;

//remove the tab

$("#myTabs").tabs("remove", indexNumber);

});

//add click handler for 'add' button

$("#add").click(function() {

//define tab label

var newLabel = "A New Tab!"

//add the new tab

$("#myTabs").tabs("add", "#newTab", newLabel);

});

</script>

</body>

</html>

将代码保存为jqueryui文件夹下的tabs9.html。本例中第一个变化为链接到新的名为tabsTheme2.css的样式表，它与第一个自定义的主题大致相同，除了下面的选项和规则：

label { float:left; width:140px; }

input, button {

float:left; display:block; width:90px; margin-right:10px;

}

button { width:79px; }

#add { width:134px; }

除了一些新的调用add方法所需要的JavaScript之外，还需要在<div>容器中封装选项卡和相关的内容。否则，新的选项卡将会被增加为<body>中的最后一个元素，而不是选项卡控件中的最后一个元素。

页面所具有的第一个新功能是使用remove方法来除去特定的选项卡。该方法需要一个额外的参数以指明需要除去的选项卡的索引号。本例先获取文本框中键入的数字值，再将之作为参数传递。

而add方法是向控件中添加新的选项卡，这可以通过几种不同的方式来实现。本例将页面上已有的内容（id为newTab的<div>元素）增加到选项卡控件中。除了需要传递字符串“add”之外，还需要指定想要增加到选项卡控件的元素的引用，同时还指定了新选项卡的标题。

作为可选项，还可以指定新选项卡需要插入位置的索引号。如果没有提供该数值，新选项卡将会被增加为控件的最后一个选项卡。在浏览器中运行该页面后，将会发现尽管所指定的<div>元素被添加到选项卡控件的界面上，但是它并不能自动清除原有元素的显示。在被添加到控件之前，<div>元素最初是可见的，如图2-6所示。

图2-6

有几种简单的方法可以修复这个问题，如果要添加的选项卡内容在开始时并不需要显示的话，可以简单地在内容容器元素中增加适当的样式类：

<div id="newTab" class="ui-tabs-panel ui-tabs-hide">This content will be

part of the tabs when the above button is clicked!</div>

现在当载入页面时，该内容将不可见，并且一直保持隐藏状态，直到被增加到选项卡控件且被选中后为止，如图2-7所示。

图2-7

如果在页面载入时需要显示该内容，或者不确定页面上的哪一个元素将被添加到选项卡控件的话，可以简单地在按钮被点击时才将这些样式类加入到选项卡内容<div>元素中去。

2.6.3 模拟点击

有时或许需要通过编程方式选择特定的选项卡并显示其内容，这可能是访问者进行其他交互的结果。可以使用select方法来实现此目的，其效果与单击选项卡的动作完全类似。将tabs9.html中最后的<script>代码块修改如下：

//define function to be executed on document ready

$(function(){

//create the tabs

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

//add click handler for 'remove' button

$("#remove").click(function() {

//get the index to remove

var indexNumber = $("#indexNum").val() - 1;

//remove the tab

$("#myTabs").tabs("remove", indexNumber);

});

//add click handler for 'add' button

$("#add").click(function() {

//define tab label

var newLabel = "A New Tab!"

//add the new tab

$("#myTabs").tabs("add", "#newTab", newLabel);

//new tab will be at end, get index

var newIndex = $("#myTabs").tabs("length") - 1;

//select the new tab

$("#myTabs").tabs("select", newIndex);

});

</script>

将之保存到jqueryui文件下的tabs10.html。现在当新的选项卡被增加到控件时，将会自动被选中。select方法只需要一个额外的参数以指明所选选项卡的索引号。

由于界面上增加的选项卡都会成为最后一个选项卡，同时选项卡的索引值是从0开始的，因此必须使用length方法以获取选项卡的数目，然后减去1，得到的结果被传递给select方法。

2.6.4 创建选项卡的幻灯效果

本章最后介绍rotate方法，该方法使所有的选项卡以及它们关联的内容面板自动地轮流显示。这将产生很好的视觉效果，特别是对于确保访问者能够看到所有的选项卡内容是非常有用的。可以在http://www.cnet.com 主页上看到这种动作效果的一个示例。

和已经了解的其他方法一样，rotate方法也是很容易使用的。在文本编辑器中新建一个文件并添加下面的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/

TR/html4/strict.dtd">

<head>

themes/flora/flora.tabs.css">

tabsTheme2.css">

charset=utf-8">

<title>jQuery UI Tabs Example 11</title>

</head>

<body>

<div>

</ul>

<div id="0">This is the content panel linked to the first tab,

it is shown by default.</div>

<div id="1">This content is linked to the second tab and will be

shown when its tab is clicked.</div>

</div>

jquery-1.2.6.js"></script>

ui.core.js"></script>

ui.tabs.js"></script>

//define function to be executed on document ready

$(function(){

//create the tabs and make them rotate

$("#myTabs").tabs().tabs("rotate", 1000, true);

});

</script>

</body>

</html>

将文件保存为jqueryui文件下的tabs11.html。尽管不能使用选项卡控件的初始化构造方法直接调用rotate方法，但是可以将之串接在构造方法后面，与标准jQuery库内的方法类似。

rotate方法需要两个额外的参数。第一个参数是整数，用于指定每个选项卡在被下一个选项卡取代之前所显示的毫秒数。第二个参数是布尔值，用于指示选项卡的切换是一次性的还是持续不断的。

选项卡控件还包含destroy方法，该方法是jQuery UI中所有控件普遍带有的。下面介绍它是如何工作的。新建一个页面并添加下面的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/

TR/html4/strict.dtd">

<head>

themes/flora/flora.tabs.css">

tabsTheme2.css">

charset=utf-8">

<title>jQuery UI Tabs Example 12</title>

</head>

<body>

<div>

</ul>

<div id="0">This is the content panel linked to the first tab,

it is shown by default.</div>

<div id="1">This content is linked to the second tab and will be

shown when its tab is clicked.</div>

</div>

<button id="destroy">Destroy the tabs!</button>

jquery-1.2.6.js"></script>

ui.core.js"></script>

ui.tabs.js"></script>

//define function to be executed on document ready

$(function(){

//create the tabs

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

//add click handler for button

$("#destroy").click(function() {

//destroy the tabs

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

});

</script>

</body>

</html>

将该文件保存为 jqueryui文件夹下的tabs12.html。本例中通过单击<button>调用destroy方法，从而完全除去整个选项卡控件，将底层的HTML恢复成原始的状态。单击该按钮后，将会看到每个选项卡的标准HTML列表元素和文本，如图2-8所示。

图2-8

ionic2starter

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tab插件使用

2.6 使用选项卡方法选项卡控件包括许多不同的方法，这意味着它具有丰富的行为。同时选项卡控件还支持更高级的函数实现，以允许采用编程方式使用它。现在来看看表2-5中所列出来的这些方法。表2-5方法用途add通过编程方式增加选项卡，并在参数中指明选项卡内容的URL、label和索引号（可选的）remove
复制链接

扫一扫