So implementieren Sie schließbare Tabs im Bootstrap

藏色散人
Freigeben: 2023-02-10 14:36:51
Original
2564 Leute haben es durchsucht

So implementiert Bootstrap das Schließen von Tab-Tabs: 1. Verwenden Sie das Skript-Tag, um jquery einzuführen. 2. Verwenden Sie das Skript-Tag, um das Plug-In „closable-tab-div“ einzuführen. 3. Verwenden Sie „var item={'id‘; Die Anweisung :'1' ,'name':'Menu Management','url':'...}" kann zum Implementieren der Tab-Beschriftung verwendet werden.

So implementieren Sie schließbare Tabs im Bootstrap

Die Betriebsumgebung dieses Tutorials: Windows7-System, Bootstrap3-Version, Dell G3-Computer.

Bootstrap kommt von Twitter und ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JavaScript und ist einfach und flexibel. Während des Entwicklungsprozesses müssen wir nur die entsprechende Klasse zum DOM-Element hinzufügen, um es aufzurufen, was die Webentwicklung beschleunigt.

bootstrap implementiert schließbare Tab-Tabs

Ich habe ein Tab-Tab-Plug-in gefunden, das über das Internet geschlossen werden kann: bootstrap-closable-tab plug-in

Verweisen Sie auf das Bootstrap-closable-tab-Plug-in auf der Seite um den Effekt einer verschließbaren Registerkarte zu erzielen.

1. Die Bootstrap-Closable-Tab-Komponente ist eine Komponente, die Tabs schließen kann. Sie basiert auf JQuery und Bootstrap. Daher müssen Bootstrap-bezogene Plug-Ins eingeführt werden.

So implementieren Sie schließbare Tabs im Bootstrap

Voraussetzung ist die Einführung von jquery:

So implementieren Sie schließbare Tabs im Bootstrap

2. Einführung des Plug-Ins:

So implementieren Sie schließbare Tabs im Bootstrap

Der Code lautet wie folgt:

//子页面不用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(!$('#'+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();
}
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

4. Die Die Verwendungsmethode lautet wie folgt:

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);
Nach dem Login kopieren

Verwandte Tutorial-Empfehlung: „Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie schließbare Tabs im Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!