Bootstrap中可关闭的tab标签页怎么做
导读:在实际案例的操作过程中,我们可能会遇到“Bootstrap中可关闭的tab标签页怎么做”这样的问题,那么我们该如何处理和解决这样的情况呢?这篇小编就给大家总结了一些方法,具有一定的借鉴价值,希望对大家有所帮助,接下来就让小编带领大家一起了解...
在实际案例的操作过程中,我们可能会遇到“Bootstrap中可关闭的tab标签页怎么做”这样的问题,那么我们该如何处理和解决这样的情况呢?这篇小编就给大家总结了一些方法,具有一定的借鉴价值,希望对大家有所帮助,接下来就让小编带领大家一起了解看看吧。bootstrap关闭tab的方法:首先引入jquery;然后在相应的页面中引用“bootstrap-closable-tab”插件来实现可关闭的tab标签页效果即可。
本文操作环境:Windows7系统、bootstrap3、Dell G3电脑。
Bootstrap 来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的,它简洁灵活。开发过程中,我们只需通过给DOM元素添加相应的class即可调用,使得 Web 开发更加快捷。
bootstrap怎么实现可关闭tab标签页?
从网上找的一款可以关闭的tab标签页插件:bootstrap-closable-tab插件
在页面中引用bootstrap-closable-tab插件来实现可关闭的tab标签页效果。
1、bootstrap-closable-tab组件是一个可关闭tab标签页的组件,是基于jquery和bootstrap的;因此要引入bootstrap的相关插件。
前提得引入jquery:
2、引入该插件:
代码如下:
//子页面不用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 = 'li role="presentation" class="" id="'+id+'"> a href="#'+container+'" role="tab" data-toggle="tab" style="position: relative; padding:2px 20px 2px 15px"> '+tabItem.name; if(tabItem.closable){ li_tab = li_tab + 'i class="glyphicon glyphicon-remove small" tabclose="'+id+'" style="position: absolute; right:4px; top: 4px; " οnclick="closableTab.closeTab(this)"> /i> /a> /li> '; } else{ li_tab = li_tab + '/a> /li> '; } var tabpanel = 'div role="tabpanel" class="tab-pane" id="'+container+'" style="width: 100%; "> '+ '正在加载...'+ '/div> '; $('.nav-tabs').append(li_tab); $('.tab-content').append(tabpanel); $('#'+container).load(tabItem.url,function(response,status,xhr){ if(status=='error'){ //status的值为success和error,如果error则显示一个错误页面 $(this).html(response); } } ); } $("#"+id).addClass("active"); $("#"+container).addClass("active"); } , //关闭tab closeTab:function(item){ var val = $(item).attr('tabclose'); var containerId = "tab_container_"+val.substring(9); if($('#'+containerId).hasClass('active')){ $('#'+val).prev().addClass('active'); $('#'+containerId).prev().addClass('active'); } $("#"+val).remove(); $("#"+containerId).remove(); } }
3、html代码:
div class="iframe_div_wrap"> !-- 此处是相关代码 --> ul class="nav nav-tabs" role="tablist"> /ul> div class="tab-content" style="width:100%; "> /div> !-- 相关代码结束 --> /div>
4、使用方法如下:
var item = { 'id':'1','name':'菜单管理','url':'./menuctrl.html','closable':false} ; closableTab.addTab(item);
以上就是关于“Bootstrap中可关闭的tab标签页怎么做”的介绍了,感谢各位的阅读,希望文本对大家有所帮助。如果想要了解更多知识,欢迎关注网络,小编每天都会为大家更新不同的知识。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Bootstrap中可关闭的tab标签页怎么做
本文地址: https://pptw.com/jishu/654878.html