jQuery Ui Tabs插件使用问题记录

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" );
    }
}