How to implement closeable tabs in bootstrap-Bootstrap Tutorial-php.cn

How to implement closeable tabs in bootstrap

藏色散人

Release： 2023-02-10 14:36:51

Original

2598 people have browsed it

Bootstrap implements the method of closing the tab tab page: 1. Use the script tag to introduce jquery; 2. Use the script tag to introduce the "closable-tab-div" plug-in; 3. Through "var item={'id' :'1','name':'Menu Management','url':'...}" statement can be used to implement the tab label.

How to implement closeable tabs in bootstrap

The operating environment of this tutorial: windows7 system, bootstrap3 version, Dell G3 computer.

Bootstrap comes from Twitter and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, and JavaScript, and it is simple and flexible. During the development process, we only need to add the corresponding class to the DOM element to call it, making Web development faster.

bootstrap implements a closeable tab page

A tab plug-in that can be closed from the Internet: bootstrap-closable-tab plug-in

Reference the bootstrap-closable-tab plug-in in the page to achieve the closable tab effect.

1. The bootstrap-closable-tab component is a component that can close tab tabs. It is based on jquery and bootstrap; therefore, bootstrap related plug-ins must be introduced.

How to implement closeable tabs in bootstrap

The prerequisite is to introduce jquery:

How to implement closeable tabs in bootstrap

2. Introduce the plug-in:

How to implement closeable tabs in bootstrap

The code is as follows:

//子页面不用iframe，用div展示
var closableTab = {
    //添加tab
addTab:function(tabItem){ //tabItem = {id,name,url,closable}
 
var id = "tab_seed_" + tabItem.id;
var container ="tab_container_" + tabItem.id;
 
$("li[id^=tab_seed_]").removeClass("active");
$("div[id^=tab_container_]").removeClass("active");
 
if(!$(&#39;#&#39;+id)[0]){
var li_tab = &#39;<li role="presentation" class="" id="&#39;+id+&#39;"><a href="#&#39;+container+&#39;"  role="tab" data-toggle="tab" style="position: relative;padding:2px 20px 2px 15px">&#39;+tabItem.name;
if(tabItem.closable){
li_tab = li_tab + &#39;<i class="glyphicon glyphicon-remove small" tabclose="&#39;+id+&#39;" style="position: absolute;right:4px;top: 4px;"  οnclick="closableTab.closeTab(this)"></i></a></li> &#39;;
}else{
li_tab = li_tab + &#39;</a></li>&#39;;
}
var tabpanel = &#39;<div role="tabpanel" class="tab-pane" id="&#39;+container+&#39;" style="width: 100%;">&#39;+
      &#39;正在加载...&#39;+
       &#39;</div>&#39;;
 
 
$(&#39;.nav-tabs&#39;).append(li_tab);
$(&#39;.tab-content&#39;).append(tabpanel);
$(&#39;#&#39;+container).load(tabItem.url,function(response,status,xhr){
if(status==&#39;error&#39;){//status的值为success和error，如果error则显示一个错误页面
$(this).html(response);
}
});
}
$("#"+id).addClass("active");
$("#"+container).addClass("active");
},
 
//关闭tab
closeTab:function(item){
var val = $(item).attr(&#39;tabclose&#39;);
var containerId = "tab_container_"+val.substring(9);
       
       if($(&#39;#&#39;+containerId).hasClass(&#39;active&#39;)){
       $(&#39;#&#39;+val).prev().addClass(&#39;active&#39;);
       $(&#39;#&#39;+containerId).prev().addClass(&#39;active&#39;);
       }
 
 
$("#"+val).remove();
$("#"+containerId).remove();
}
}

Copy after login

3. HTML code:

<div class="iframe_div_wrap">
        <!-- 此处是相关代码 -->
        <ul class="nav nav-tabs" role="tablist">
        </ul>
        <div class="tab-content" style="width:100%;">
        </div>
        <!-- 相关代码结束 -->
    </div>

Copy after login

4. The usage method is as follows:

var item = {&#39;id&#39;:&#39;1&#39;,&#39;name&#39;:&#39;菜单管理&#39;,&#39;url&#39;:&#39;./menuctrl.html&#39;,&#39;closable&#39;:false};
closableTab.addTab(item);

Copy after login

Recommended related tutorials: "bootstrap Tutorial》

The above is the detailed content of How to implement closeable tabs in bootstrap. For more information, please follow other related articles on the PHP Chinese website!