首页 > Web开发 > 详细

jquery-ui-1.11.4 tabs 动态添加和关闭

时间:2015-06-08 11:17:39      阅读:411      评论:0      收藏:0      [点我收藏+]
        var tabs = $( "#tabs" ).tabs();
       var tabCount=0;
         function jqui_addTab(tabid,url,caption){
                if($("#tabs-"+tabid).length==0){
                    tabCount++;
                    var panelId = tabs.find( ".ui-tabs-active" ).attr( "aria-controls" );
                    tabs.find(‘.ui-tabs-active‘).removeClass("ui-tabs-active");
                    $("#tabs-"+panelId).css(‘display‘,‘none‘);
                    var li = ‘<li tabindex="‘+tabCount+‘"><a href="#tabs-‘+tabid+‘">‘+caption+‘</a> <span class="ui-icon ui-icon-close ui-tabs-active" role="presentation" onclick="jqui_closeTab(this)">关闭</span></li>‘;
                    tabs.find( ".ui-tabs-nav" ).append( li );
                    tabs.append( "<div id=‘tabs-" + tabid + "‘><iframe class=‘tabsframe‘ frameborder=‘no‘ border=‘0‘ src=‘"+url+"‘ width=‘100%‘ height=‘"+frameHeight+"px‘></iframe></div>" );
                    tabs.tabs(‘refresh‘);
                    
                    $(‘#tabs‘).tabs(‘option‘, ‘active‘, tabCount);//显示刚刚添加的tab
                }
            }
            function jqui_closeTab(obj){//关闭tab
                var ctlid = $(obj).parent().attr(‘aria-controls‘);
                $("#"+ctlid).remove();
                $(obj).parent().remove();
                tabCount--;
                tabs.tabs(‘refresh‘);
            }

 

jquery-ui-1.11.4 tabs 动态添加和关闭

原文:http://www.cnblogs.com/kdjfkj/p/4560289.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!