1、效果图

2、导入js和css

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

  default.css是对tabs效果绘制

/*jquery-ui-bootstrap tabs*/
.tabs ul {
/* border-bottom: 3px solid #39aef5!important;*/
}
.tabs ul li:not(:first-child){
padding-right:15px!important; }
.tabs ul li{
border-top:1px solid #ccc!important;
border-left:1px solid #ccc!important;
/*border-bottom: 1px solid #39aef5!important;*/
}
.tabs ul li a{
color:#666!important;
}
.tabs ul li span:hover{
color:#C61010!important;
}
.tabs ul li a:hover,
.tabs ul li:hover,
.tabs ul li:focus{
border-bottom: 0!important;
}
.tabs ul li:last-child{
border-right:1px solid #ccc!important;
}
.tabs ul li.ui-state-active.ui-tabs-active a,
.tabs ul li.ui-state-active.ui-tabs-active span,
.tabs ul li.ui-state-active.ui-tabs-active{
/*border-top:3px solid red!important;*/
background: #39aef5!important;
border-bottom: 2px solid #39aef5!important;
color:#ddd!important;
}
.tabs ul li.ui-state-active.ui-tabs-active a:hover,
.tabs ul li.ui-state-active.ui-tabs-active span:hover
{
color:#fff!important;
}
.tabs ul li .fa-times-circle{
position: absolute;
top: 10px;
right:18px;
}

  default.js

$(function(){
var tabs = $( "#tabs3" ).tabs();
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='fa fa-times-circle'></span></li>";
$('.menu li').click(function(){
//获取tabs下a[href]的值
var id="#tabs-"+this.id;
//tabs初始化时就有一个li,所以要减1,添加时index会返回-1,再减1变为-2,可根据实际情况而定。这里实际上是通过Id定位#id所在li的位置,然后设置active
var index=$("#tabs3").find(id).index()-1;
$( "#tabs3" ).tabs('option','active',index);
if(index==-2){
addTab(this.innerText,this.id);
} }); function addTab(tabTitle,id) {
var label = tabTitle,
id = "tabs-" + id,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
var tabContentHtml = $("."+id).html();
var existing=tabs.find("[id='"+id+"']");
if(existing.length==0){
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
tabs.tabs( "refresh" );
} var index=tabs.find('.ui-tabs-nav li').index(existing);
//添加时总是返回-1
tabs.tabs('option','active',index); }
// close icon: removing the tab on click
$( "#tabs3" ).on( "click",'span.fa-times-circle', function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
}); })

  3、html片段

<h5>动态标签页</h5>
<ul class="menu">
<li id="menu1">
<a href="#" >菜单1</a>
</li>
<li id="menu2">
<a href="#">菜单2</a>
</li>
<li id="menu3">
<a href="#">菜单3</a>
</li>
</ul>
<div id="tabs3" class="tabs">
<ul>
<li>
<a href="#tabs-4">主页xxxxx</a>
</li> </ul>
<div id="tabs-4">主页内容</div> </div>
<div id="tab_content" style="display: none;">
<div class="tabs-menu1">111</div>
<div class="tabs-menu2">222</div>
<div class="tabs-menu3">333</div>
</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. [Python]How to handle the exception in Python?

    This post demonstrates how to use try clause to handle the exceptions def test_exception(case=None): ...

  2. gradle(转)

    一.声明dependency     在build.gradle文件编辑以下代码: apply plugin: 'java' repositories { mavenCentral() } depen ...

  3. javascript 的bind/apply/call性能

    javascript有两种使用频率非常高的三个内置的功能:bind/apply/call.许多技术是基于高点,这些功能实现.这三个功能被用来改变的功能运行环境.从而达到代码复用的目的. 先来所说bin ...

  4. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  5. Duanxx的STM32学习: 启动模式,BOOT0和BOOT1具体解释

    在画STM32的电路图的时候,关于STM32的启动方式纠结了一下,现有的參考设计都是在STM32的启动选择引脚BOOT0和BOOT1上使用了跳帽,用以人工选择STM32的启动方式,可是在实际应用中这样 ...

  6. 返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, .net 4.5 带来的更方便的异步操作

    原文:返璞归真 asp.net mvc (11) - asp.net mvc 4.0 新特性之自宿主 Web API, 在 WebForm 中提供 Web API, 通过 Web API 上传文件, ...

  7. HDU 4915 Parenthese sequence _(:зゝ∠)_ 哈哈

    哦,我没做 #include <cstdio> #include <cstring> #include <algorithm> const int N = 1000 ...

  8. Eclipse在Jar形成和应用程序包

    最近的熟悉Java语言.在学习过程中Eclipse经常使用再熟悉它.本文简单说下Jar形成和应用程序包. Java在Jar相当于包C/C++该lib库,它是.class文件打包:经常使用Jar包有AP ...

  9. poj 3237 Tree(树链拆分)

    题目链接:poj 3237 Tree 题目大意:给定一棵树,三种操作: CHANGE i v:将i节点权值变为v NEGATE a b:将ab路径上全部节点的权值变为相反数 QUERY a b:查询a ...

  10. SqlServer中存储过程中将Exec的执行结果赋值给变量输出

    原文 SqlServer中存储过程中将Exec的执行结果赋值给变量输出 背景: 遇到这样一种情况:动态向存储过程中传入表名和表的某些属性(这里用到的是主键ID),然后利用这两个变量查出一条数据的某些字 ...