文档章节

jQuery UI tabs中tab的索引

l
 lei.D
发布于 2016/12/07 22:41
字数 386
阅读 10
收藏 0

1. 前言

最近在项目中使用了jQuery UI tab组件。其中遇到两个问题,解决之后,小记一下。

A. 选中标签页

B. 获得标签页的索引

2.环境说明

jQuery-1.8

jQuery-ui-1.12.0

3.关于选中标签页

直接百度获得的结果往往是这样的

var tabs = $("#tabs").tabs();

tabs.tabs("select",$index); // 其中$index是要激活的tab-panel的索引

tabs.tabs("select",$selector); // 其中$selector是要激活的tab-panel的id选择器表达式

试了一下不能用,是版本问题。这种写法是jQuery-ui 1.9之前的,jQuery-1.12的写法是这样的

var tabs = $("#tabs").tabs();

tabs.tabs("option","active",$index); // 其中$index是要激活的tab-panel的索引

// 此外经过试验,将$index替换为$selector是不行的

到此,A问题搞定。但是又引出了问题B,索引该如何获得呢?

4.关于获得标签页索引

jQuery-1.12 API提供的方法中,无法获得当前tabs组件有多少个tab,每个tab的索引又是多少。仔细阅读了API文档之后,我将目光投向了instance方法。如下所示:

var widget =  tabs.tabs("instance"); // 得到tab组件的实例

widget.tabs // 得到tab组件的所有tab,似乎还是1个jQuery对象经过尝试,如下代码如愿得到了索引

/**
其中$tab-panel-id是要激活的tab-panel的id。通常在生成新的标签页时,其tab-title和tab-panel的对应关系是明确的
*/
widget.tabs.index($("a[href='#$tab-panel-id']").parent('li'));  

至此,B问题搞定,A问题彻底解决。

© 著作权归作者所有

共有 人打赏支持
l
粉丝 0
博文 3
码字总数 1828
作品 0
郑州
Jquery Tabs 插件简介-更友好地组织你的页面

转自:http://www.cnblogs.com/ywqu/archive/2009/09/02/1558423.html 关于Jquery Tab插件,比较流行的是jQuery UI Tabs,最近此插件也已经有了更新,地址为http://stilbuero.de/jquery/tabs...

晨曦之光
2012/03/09
0
0
[笔记]jQuery UI的tabs组件在IE浏览器中的缓存问题~

jQuery中禁用缓存 最近在使用jQuery ui中的tabs插件时,遇到一个问题。 在非IE浏览器下,标签是自动刷新的。就是在不同的标签间切换,不用刷新整个页面,如果某个标签内容有更新,比如显示时...

leeoo
2011/12/24
0
0
超级简单:使用JQUERY Tabs插件宿主IFRAMES

/Files/zhuqil/HomeSite.zip 这篇文章提供了一个使用asp.net和JQuery UI Tabs plug-in用IFRAME元素去宿主web页面。 必备的东西: Windows XP/Vista/7/2003/2008 Visual Studio 2005 or 2008 ......

晨曦之光
2012/03/09
0
0
240多个jQuery插件(2)

表格等(Tables, Grids etc.) UI/Tablesorter. jQuery ingrid. jQuery Grid Plugin. Table Filter - awesome!. TableEditor. jQuery Tree Tables. Expandable “Detail” Table Rows. Sortab......

五味格子
2011/05/11
0
0
Jquery Tools——不可错过的Jquery UI库

发表于: Jquery, 有用的示例 | 作者: IIduce Jquery Tools是一组基于Jquery构建的用户界面常用组件的集合。通过使用Jquery Tools,网站前端开发无疑会变得更加高效。值得注意的是,Jquery To...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

what f,,

anlve
34分钟前
0
0
初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
9
0
现场看路演了!

HiBlock
昨天
19
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
13
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部