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" );
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT研究僧大师兄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值