bootstrap nav-tabs添加关闭按钮，并实现点击关闭按钮实现tabs和页面的清除

先给出示例html代码

<div>

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist" id="contentnavid">

<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">tab1</a></li>

<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">tab2</a></li>

<li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">tab3</a></li>

<li role="presentation" id="closetabli"><a href="#closetab" aria-controls="closetab" role="tab" data-toggle="tab"><span>closetab</span>

<button type="button" class="close" aria-label="Close" id="closetabbtn"><span aria-hidden="true" style="color:red">×</span></button>

</a></li>

</ul>

<!-- Tab panes -->

<div class="tab-content">

<div role="tabpanel" class="tab-pane active" id="tab1">this is tab1</div>

<div role="tabpanel" class="tab-pane active" id="tab2">this is tab2</div>

<div role="tabpanel" class="tab-pane active" id="tab3">this is tab3</div>

<div role="tabpanel" class="tab-pane active" id="closetab">this is closetab</div>

</div>

</div>

上面的html代码中，显示的导航组件有4个tab页，其中最后一个tab页的标签的右边有一个 x 的关闭按钮。

下面我们要实现就是当点击x关闭按钮时，可以把这个带关闭按钮的tab隐藏掉，并显示最近一次显示的tab页。

根据需要d出窗体，但是可以移动，不遮挡下面的内容，所以就修改了源代码，添加了一个属性：dataBackdrop，如果为false，则不生成遮罩。同时添加了缩小按钮

var dialogId = 'eventModal'

var dialog = new BootstrapDialog({

id: dialogId,

title: obj.EVENTNAME,

message: detailHtml,

draggable: true,

dataBackdrop: false,

closeByBackdrop: false,

closeByKeyboard: false,

buttons: [

{

label: '关闭',

 /**

  * 增加标签页

  */

 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

 }

---