有没有Bootstrap3.3 动态添加和关闭 tab的方案

 /**

  * 增加标签页

  */

 function addTab(options) {

     //option:

     //tabMainName:tab标签页所在的容器

     //tabName:当前tab的名称

     //tabTitle:当前tab的标题

     //tabUrl:当前tab所指向的URL地址

     var exists = checkTabIsExists(options.tabMainName, options.tabName)

     if(exists){

         $("#tab_a_"+options.tabName).click()

     } else {

         $("#"+options.tabMainName).append('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this)">×</button>'+options.tabTitle+'</a></li>')

         

         //固定TAB中IFRAME高度

         mainHeight = $(document.body).height() - 5

         

         var content = ''

         if(options.content){

             content = option.content

         } else {

             content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'

         }

         $("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>')

         $("#tab_a_"+options.tabName).click()

     }

 }

 

 

 /**

  * 关闭标签页

  * @param button

  */

 function closeTab (button) {

     

     //通过该button找到对应li标签的id

     var li_id = $(button).parent().parent().attr('id')

     var id = li_id.replace("tab_li_","")

     

     //如果关闭的是当前激活的TAB，激活他的前一个TAB

     if ($("li.active").attr('id') == li_id) {

         $("li.active").prev().find("a").click()

     }

     

     //关闭TAB

     $("#" + li_id).remove()

     $("#tab_content_" + id).remove()

 }

 

 /**

  * 判断是否存在指定的标签页

  * @param tabMainName

  * @param tabName

  * @returns {Boolean}

  */

 function checkTabIsExists(tabMainName, tabName){

     var tab = $("#"+tabMainName+" > #tab_li_"+tabName)

     //console.log(tab.length)

     return tab.length > 0

 }

从后台异步取数据，然后，按照这个格式

<li role="presentation">

<a role="menuitem" tabindex="-1" href="#">阳台新风机</a>

</li>

<li role="presentation">

<a role="menuitem" tabindex="-1" href="#">办公室新风机</a>

</li>

拼接上去就好

工具/原料

使用bootstrap的框架, v3以上版本, 还需要用到ul, li, 包括定义的一些样式.

bootstrap列表组的使用

bootstrap中的列表组, 是通过样式.list-group 来定义的. 然后列表组中的项是用样式: .list-group-item 在html中, 列表也是使用ul标签, 这里也是默认使用ul标签, 举例说明. 这个是一个默认的基本的例子. 使用的是ul>li的标签. 然后加上样式. 最后出现一个列表的内容. 可以修改li中的内容. 增加一个测试的页面.

从上面的例子当中我们可以看出来, 这个列表几乎是万能的列表.上面的方式. 还有另外一种实现方式, 使用div和a链接, 就是要做一个带有a链接的样式. 使用a链接之后, 鼠标移上去的时候, 会有一个浅灰色的背景. 你可以看一下效果图的第五条信息.

有时候, 文章是有了, 但是想显示有多少人浏览, 又想有个标识在列表上. 这里的话, bootstrap有一个实现的效果, 如果不是你想要的, 可以根据自己的需求来定义这个. 这个样式, 叫做徽章, 也就是在列表上显示一个数.使用样式.badge来实现效果. 看代码和效果.

有时候, 我们也可以把列表组, 当作是一个分类, 或者叫做导航, 只要控制好宽度. 然后当作导航的时候, 需要有一个选中的状态, 这里我们就是使用, bootstrap中通用的选中状态, 样式.active. 看一下上面的案例如果使用了状态是什么样子的.

当然, 除了状态之外还有另外的一些改变背景颜色的样式. 在.list-group-item中使用.list-group-item-*(不同的显示状态.). 现在有以下4中, 如果没有你想要的. 通过自定义来进行增加你自己的背景颜色的样式.

1.list-group-item-success 成功

2.list-group-item-info 信息

3.list-group-item-warning 警告

4.list-group-item-danger 失败(危险)

需要注意的是: 该属性只在最新版本3.2.0中, 3.2以下版本没有该样式.

除了简单的列表组以外, 还有一些带有标题的和内容的列表组.

在样式.list-group-item中添加.list-group-item-heading(代表着头部也就是标题部分. )

在样式.list-group-item中添加.list-group-item-text(代表的是内容部分.)

在这个样式中, 一样可以加入徽章, 和只要.list-group-item-heading样式. 或者只要.list-group-item-text样式. 而且一样可以加入.active. 下面演示的没有内容的标题, 而且还加上了.active状态, 然后在最后一个列表中, 加入了徽章.

自己按照第6步骤, 来做一个, 带有.list-group-item-info的带有标题的内容. 这里给出效果. 自己动手做一下吧. 只有自己动手了, 才能明白里面的东西, 看是看不会的.

---