1.为标签页添加关闭按钮,单击该按钮移除标签页,添加双击标签页移除。其中按钮图标使用了font-awesome字体图标。
先上效果图:
样式如下:
#nav-tabs ul li a .tab-close { float: right; /* margin: 0.4em 0.2em 0 0; */margin-left: 10px;margin-right: -10px;margin-top: -22px;padding: 2px;cursor: pointer; }#nav-tabs ul li a .tab-close:hover, #nav-tabs ul li a .tab-close:focus{ color: #EE2C2C;}
布局:
<div id="nav-tabs"><div class="tab-wrap"><ul><li><a href="#tabs-0"><span>首页</span><span class='ace-icon fa fa-times tab-close'></span></a> </li></ul></div><div class="page-content"><!-- PAGE CONTENT BEGINS --><div class="row"><div id="tab-content" class="col-xs-12"><div id="tabs-0">首页</div></div></div><!-- PAGE CONTENT ENDS --></div><!-- /.page-content --></div>
jQuery事件:
var tabs;jQuery(function($){//jquery-ui tab.js初始化tab导航tabs = $( "#nav-tabs" ).tabs({beforeLoad: function( event, ui ) {ui.jqXHR.error(function() {ui.panel.html("无法加载改页面,我们会尽快修复这个问题。" );});}}); // 关闭图标:当点击时移除标签页tabs.delegate( "span.tab-close", "click", function() {var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );$( "#" + panelId ).remove();tabs.tabs( "refresh" );});tabs.delegate( "li", "dblclick", function() {if($(this).index() != 0){var panelId = $(this).remove().attr( "aria-controls" );$( "#" + panelId ).remove();tabs.tabs( "refresh" );}});});
2.动态创建Tab标签页,创建完成后打开该标签页
var tab_counter = 2;//创建标签页function createTab(title,uri) {var tabTemplate = "<li><a href='@{href}'><span>@{title}</span><span class='ace-icon fa fa-times tab-close'></span></a></li>";id = "tabs-" + tab_counter++,li = $(tabTemplate.replace( /@\{href\}/g, "#" + id ).replace( /@\{title\}/g, title )),tabs.find( ".ui-tabs-nav" ).append( li );tabContentHtml = "测试";tabs.find("#tab-content").append( "<div id='" + id + "'>" + tabContentHtml + "</div>" );tabs.tabs( "refresh" );tabs.find("[href='#" + id + "']").trigger( "click" );}
查看了jqueryui tabs官方文档,由于是全英文的,而且也没有直观的解释,没能找到手动切换Tab标签页的方式,看到了stackoverflow上有人发的文章,我尝试他的方法,但不奏效,最后只能委曲求全,用了tabs.find(“[href=’#” + id + “’]”).trigger( “click” );这种方式,模拟触发click事件……╮(╯▽╰)╭
3.避免重复创建相同的标签页,实现点击相同的菜单,重新打开已经创建好的标签页。只需修改createTab函数即可:
//创建标签页function createTab(title,uri) {if(tabs.find("#tab-" + title).length == 0){ //如果未找到该标签页则创建var tabTemplate = "<li id='tab-@{title}'><a href='@{href}'><span>@{title}</span><span class='ace-icon fa fa-times tab-close'></span></a></li>";id = "tabs-" + tab_counter++,li = $(tabTemplate.replace( /@\{href\}/g, "#" + id ).replace( /@\{title\}/g, title )),tabs.find( ".ui-tabs-nav" ).append( li );tabContentHtml = "测试";tabs.find("#tab-content").append( "<div id='" + id + "'>" + tabContentHtml + "</div>" );tabs.tabs( "refresh" );tabs.find("[href='#" + id + "']").trigger( "click" );}else{ //找到该标签页,说明其已创建,则打开tabs.find("#tab-" + title + " > a").trigger( "click" );}}