1、效果图

2、导入js和css

  1. <link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
  2. <link rel="stylesheet" type="text/css" href="font/Font-Awesome/css/font-awesome.css">
  3. <link rel="stylesheet" type="text/css" href="css/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.0.custom.css"/>
  4. <link rel="stylesheet" type="text/css" href="css/default.css"></head>
  5. <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  6. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  7. <script src="css/jquery-ui-bootstrap/assets/js/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
  8. <script type="text/javascript" src="js/default.js"></script>

  default.css是对tabs效果绘制

  1. /*jquery-ui-bootstrap tabs*/
  2. .tabs ul {
  3. /* border-bottom: 3px solid #39aef5!important;*/
  4. }
  5. .tabs ul li:not(:first-child){
  6. padding-right:15px!important;
  7.  
  8. }
  9. .tabs ul li{
  10. border-top:1px solid #ccc!important;
  11. border-left:1px solid #ccc!important;
  12. /*border-bottom: 1px solid #39aef5!important;*/
  13. }
  14. .tabs ul li a{
  15. color:#666!important;
  16. }
  17. .tabs ul li span:hover{
  18. color:#C61010!important;
  19. }
  20. .tabs ul li a:hover,
  21. .tabs ul li:hover,
  22. .tabs ul li:focus{
  23. border-bottom: 0!important;
  24. }
  25. .tabs ul li:last-child{
  26. border-right:1px solid #ccc!important;
  27. }
  28. .tabs ul li.ui-state-active.ui-tabs-active a,
  29. .tabs ul li.ui-state-active.ui-tabs-active span,
  30. .tabs ul li.ui-state-active.ui-tabs-active{
  31. /*border-top:3px solid red!important;*/
  32. background: #39aef5!important;
  33. border-bottom: 2px solid #39aef5!important;
  34. color:#ddd!important;
  35. }
  36. .tabs ul li.ui-state-active.ui-tabs-active a:hover,
  37. .tabs ul li.ui-state-active.ui-tabs-active span:hover
  38. {
  39. color:#fff!important;
  40. }
  41. .tabs ul li .fa-times-circle{
  42. position: absolute;
  43. top: 10px;
  44. right:18px;
  45. }

  default.js

  1. $(function(){
  2. var tabs = $( "#tabs3" ).tabs();
  3. var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='fa fa-times-circle'></span></li>";
  4. $('.menu li').click(function(){
  5. //获取tabs下a[href]的值
  6. var id="#tabs-"+this.id;
  7. //tabs初始化时就有一个li,所以要减1,添加时index会返回-1,再减1变为-2,可根据实际情况而定。这里实际上是通过Id定位#id所在li的位置,然后设置active
  8. var index=$("#tabs3").find(id).index()-1;
  9. $( "#tabs3" ).tabs('option','active',index);
  10. if(index==-2){
  11. addTab(this.innerText,this.id);
  12. }
  13.  
  14. });
  15.  
  16. function addTab(tabTitle,id) {
  17. var label = tabTitle,
  18. id = "tabs-" + id,
  19. li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
  20. var tabContentHtml = $("."+id).html();
  21. var existing=tabs.find("[id='"+id+"']");
  22. if(existing.length==0){
  23. tabs.find( ".ui-tabs-nav" ).append( li );
  24. tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
  25. tabs.tabs( "refresh" );
  26. }
  27.  
  28. var index=tabs.find('.ui-tabs-nav li').index(existing);
  29. //添加时总是返回-1
  30. tabs.tabs('option','active',index);
  31.  
  32. }
  33. // close icon: removing the tab on click
  34. $( "#tabs3" ).on( "click",'span.fa-times-circle', function() {
  35. var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
  36. $( "#" + panelId ).remove();
  37. tabs.tabs( "refresh" );
  38. });
  39.  
  40. })

  3、html片段

  1. <h5>动态标签页</h5>
  2. <ul class="menu">
  3. <li id="menu1">
  4. <a href="#" >菜单1</a>
  5. </li>
  6. <li id="menu2">
  7. <a href="#">菜单2</a>
  8. </li>
  9. <li id="menu3">
  10. <a href="#">菜单3</a>
  11. </li>
  12. </ul>
  13. <div id="tabs3" class="tabs">
  14. <ul>
  15. <li>
  16. <a href="#tabs-4">主页xxxxx</a>
  17. </li>
  18.  
  19. </ul>
  20. <div id="tabs-4">主页内容</div>
  21.  
  22. </div>
  23. <div id="tab_content" style="display: none;">
  24. <div class="tabs-menu1">111</div>
  25. <div class="tabs-menu2">222</div>
  26. <div class="tabs-menu3">333</div>
  27. </div>

  

jquery-ui-bootstrap动态添加和删除标签页封装【效果更炫】的更多相关文章

  1. js动态添加和删除标签

    html代码 <h1>动态添加和删除标签</h1> <div id="addTagTest"> <table> <thead& ...

  2. [转] JQuery UI Tabs 动态添加页签,并跳转到新页签

    [From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...

  3. jquery 动态添加和删除 ul li列表

    今天需要实现一个jquery动态添加和删除  ul li列表中的li行,自己简单的实现乐一个,分享一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  4. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  5. Unity NGUI中动态添加和删除sprite

    (以后,参考链接和作者将在文章首部给出,转载请保留此部分内容) 参考链接:http://www.narkii.com/club/thread-299977-1.html,作者:纳金网 比巴卜: 参考链 ...

  6. 插件~使用ECharts动态在地图上标识点~动态添加和删除标识点

    之前写过一个Echarts的文章,没有基础的同学可以先看这<上一篇>,对于一个地图和说,我们在初始化之后,你可能被在地图上标识出一些点,当然这根据你的业务去标识,而如果每次更新数据都加载全 ...

  7. [Flex] Accordion系列-动态添加或删除Accordion容器中项目

    <?xml version="1.0" encoding="utf-8"?> <!--Flex中如何使用addChild()和removeCh ...

  8. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

随机推荐

  1. Ubuntu下安装KDE及安装中文环境

    进入Ubuntu的默认安装的桌面后打开终端,输入 sudo apt-get install kubuntu-desktop 回车后输入密码接下来提示下载KDE需要多少空间,解压后需要多少空间,询问是否 ...

  2. 玩转web之JQuery(二)---改变表单和input的可编辑状态(封装的js)

    var FormDeal = { /** * 功能 :将表单的所有input都设为可编辑的 *@param 要操作表单的id */ formWritable: function (formId) { ...

  3. APUE学习总结

    简介 本文总结了个人,一个数字,对应称号<APUE>第一版的每一章,但是,独立的二级标题和书,人需求进行编写. 3.文件I/O 本章所说明的函数常常被称之为不带缓存的I/O(与第5章中说明 ...

  4. Android使用的开发MediaRecorder录制声音

    至 Android 录制声音的应用,Android提供 MediaRecorder 类别.大约MediaRecorder可以参考一个特定的解释<Android开发之MediaRecorder类具 ...

  5. 程序员---C语言细节7(增加两个整数溢出检测)

    主要内容:增加两个整数溢出检测 #include <stdio.h> #include <limits.h> int main(int argc, char *argv[]) ...

  6. CC2530存储空间——Code

    硬件平台:CC2530-F256 开发环境:IAR 8051(版本号 8.10) 參考: .<CC2530 User's Guide.pdf>(swru191c) .<IAR C/C ...

  7. OpenCV+MFC显示图像

    1.首先下载openCV. 2.安装OpenCV.现在的版本号2.4.9,你并不需要配置环境变量. 3.设置包括文件夹,设定project库文件夹. 4.配置链接库.注意,链接库包含了文件名中包含一个 ...

  8. 错误: 无法找到或可以不被加载到主类 Main

    于eclipse导入Javaproject,执行错误:错误: 无法找到或可以不被加载到主类 Main! 百思不得其解,该解决方案是非常在线,但不是正确的方式,最后,例如,由下列溶液: 打开debug ...

  9. docker-gitlab(转)

    Issues Docker is a relatively new project and is active being developed and tested by a thriving com ...

  10. hibernate它5.many2one单向

    关系数据库表之间的关系: 1 正确 1 1 正确 许多 许多 正确 许多 表间关系设计 基于主键关联 基于外键关联 基于中间表 1 对 1关系实现: 基于主键关联 基于外键关联 基于中间表 1 对 多 ...