文档章节

jQuery UI tabs中tab的索引

l
 lei.D
发布于 2016/12/07 22:41
字数 386
阅读 10
收藏 0
点赞 0
评论 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
郑州

暂无相关文章

来自一个优秀Java工程师的简历

写在前面: 鉴于前几天的一份前端简历,虽然带着很多不看好的声音,但却帮助了很多正在求职路上的人,不管评论怎么说,我还是决定要贴出一份后端的简历。 XXX ID:357912485 目前正在找工作 ...

颖伙虫 ⋅ 14分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部