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

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

 

posted @ 2015-06-08 10:31  william编程  阅读(509)  评论(0编辑  收藏  举报