So schließen Sie die Registerkarte im Bootstrap

藏色散人
Freigeben: 2023-02-10 11:26:48
Original
2298 Leute haben es durchsucht

So schließen Sie Tabs in Bootstrap: 1. Führen Sie jquery ein. 2. Verweisen Sie auf das Plug-In „bootstrap-closable-tab“ auf der entsprechenden Seite. 3. Verwenden Sie „closeTab:function(item){...}“. Methode zur Erzielung der Schließbarkeit Der Tab-Seiteneffekt reicht aus.

So schließen Sie die Registerkarte im Bootstrap

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrap3, 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.

Wie mache ich Tabs im Bootstrap schließbar?

Ich habe ein Tab-Plug-in für schließbare Tabs aus dem Internet gefunden: Bootstrap-Closable-Tab-Plug-In.

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 schließen Sie die Registerkarte im BootstrapVoraussetzung ist die Einführung von jquery:

So schließen Sie die Registerkarte im Bootstrap2. Einführung des Plug-Ins:

So schließen Sie die Registerkarte im BootstrapDer 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

Empfohlen: „

Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonSo schließen Sie die Registerkarte 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