[转] JQuery UI Tabs 动态添加页签,并跳转到新页签
[From] https://blog.csdn.net/zhangfeng2124/article/details/76672403
需求:
1、tabs默认只有一个页签,但是需要点击某按钮,动态添加页签(添加多个)
2、tabs动态添加页签后,需要跳转到新添加的页签
查找tabs api以及tabs的源码后,发现tabs没有直接实现这两个功能的方法 附上一文化tabs api链接:http://www.css88.com/jquery-ui-api/tabs/
最后通过查看tabs的页签添加规则后,自己实现动态添加和跳转。
tabs添加的页签都是在class属性值为ui-tabs-nav下的ui标签下,页签头都是li标签
找到规则后,那么动态添加页签就容易了。
请看代码:
- var tabs = $( "#tabs" ).tabs();
- tabs.find( ".ui-tabs-nav" ).append( "<li id='add_tab' ><a href='#tabs-2'>页签1</a></li>" );
- tabs.tabs( "refresh" );
注意tabs的refresh方法,必须要刷新一下,新添加的页签才会生效。
下面解决跳转新页签问题:
tabs也没有提供获取所有页签的方法,所以还得自己想办法获取所有的页签,再来比较。
查看tabs生成的html发现,tabs生成的li标签有个aria-controls属性,这个属性的值就是我们自定义的页签名(tabs-2)
请看代码:
- var lies = tabs.find( ".ui-tabs-nav li" );
- for(var i = 0; i < lies.length; i++){
- if($(lies[i]).attr("aria-controls") == 'tabs-2'){
- $( "#tabs" ).tabs( "option", "active", i );
- }
- }
动态添加的页签下具体内容,需要预先定义好并隐藏。
ok,就这么愉快的解决了。
下面附上一个完整的tabs例子,例了与上面动态添加不相关:
HTML:
- <div id="tabs">
- <ul>
- <li><a href="#tabs-1">基本信息</a></li>
- <li><a href="#tabs-2">扩展内容</a></li>
- </ul>
- <div id="tabs-1" style="width:97%;overflow-y:auto;margin: 0 auto;height: 95%;">基本信息</div>
- <div id="tabs-2" style="width:97%;overflow-y:auto;margin: 0 auto;height: 95%;">扩展内容</div>
- </div>
JS:
- $( "#tabs" ).tabs({
- beforeActivate: function( event, ui ) {
- var id = ui.newPanel[0].id;
- if(id == "tabs-1"){
- // 跳转到基本信息页签时触发
- }
- if(id == "tabs-2"){
- // 跳转到扩展内容页签时触发
- }
- }
- });
[转] JQuery UI Tabs 动态添加页签,并跳转到新页签的更多相关文章
- jquery mobile Checkbox动态添加刷新及事件绑定
jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...
- jQuery ui背景色动态渐变导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在vue中无论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去
在vue中如论使用router-link 还是 @click事件,发现都没法从列表页点击跳转到内容页去,以前都是可以的,想着唯一不同的场景就是因为运用了scroll组件(https://ustbhua ...
- jquery.UI.tabs
今天对jquery UI的tabs进行了进一步的了解,目的是想把死板的切换效果变得动感点,不过经过这进一步的了解,发现它并不合适或都说并不能实现我想要的效果,我想要的效果就是类似淘宝商城的banner ...
- 获取JQuery UI tabs中被选中的tabs的方法
JQuery标签事件处理实例 如果你正在使用JQuery tabs而且想从基本的功能扩展到自定义的功能,这是你最好知道如何处理JQuery的点击事件. 在这篇文章中: 1.回顾如何添加当tab被点击时 ...
- jquery ui tabs详解(中文)
1 属性1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和succes ...
- 如何解决jQuery Validation针对动态添加的表单无法工作的问题?
为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案 ...
- jQuery如何获取动态添加的元素
1. 使用 on()方法 本质上使用了事件委派,将事件委派在父元素身上 自 jQuery 版本 1.7 起,on() 方法是 bind().live() 和 delegate() ...
- jquery监听动态添加的input的change事件
使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...
随机推荐
- PCL 编译中遇到 error C4996: 'pcl::SAC_SAMPLE_SIZE'
1. error C4996: 'pcl::SAC_SAMPLE_SIZE': This map is deprecated and is kept only to prevent breaking ...
- MVC5应用程序生命周期lifecycle
- 查询某张表被哪些存储过程或者视图用到的sql语句
/*查询某张表被哪些存储过程或者视图用到的sql语句*/select distinct object_name(id) from syscomments where id in (select id ...
- Django实战之古风博客
感谢 感谢杨青 大大的古风模板,设计的很棒,给个赞. 如有侵权,请联系我 运行环境 python3.6 Django==1.11.4 django-ckeditor==5.4.0 django-js- ...
- C# return、continue、break
return 终止当前进程 可用循环判断,验证,等功能 if (ew == v) { PublicControlLib.Class.PublicProperties.ShowSuccess(); re ...
- C#存取数据库图片
form1 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...
- 【Linux-学习笔记-不定期更新】
command--help ./当前的路径 目录操作命令: mkdir 创建目录: 创建多级目录 : mkdir -p 查看目录:ls ls -a:显示所有文件,包括隐藏文件 隐藏文件以.开头 ls ...
- android studio中使用recyclerview制作个显示考勤打卡的日历来
1. 用户在app端选择个日期就能查询这个月的考勤打卡信息,并以日历上标注不同的颜色来显示给用户,当然这个日历是recyclerview做出来的,只是每行显示7个,表示一周的七天. 2. 员工考勤打卡 ...
- IIS将http强转为https(重定向和重写)
最近接到一个需求,客户希望无论是http还是https请求都可以访问,并且http能转换成https.研究了一圈发现iis的重定向和重写都可以实现http强转https,记录一下. 用到的东东: In ...
- go tcp使用
TCP clientThere have been countless times during penetration tests that I've neededto whip up a TCP ...