点击左侧菜单栏生成选项卡js代码

js 代码部分

/*创建iframe*/
function creatIframe(href,titleName){
    var topWindow=$(window.parent.document),
        show_nav=topWindow.find('#min_title_list'),//选项卡ul标签id
        iframe_box=topWindow.find('#iframe_box'),//选项卡内容区域div的id
        iframeBox=iframe_box.find('.show_iframe'),//div的class属性
        $tabNav = topWindow.find(".acrossTab"),//
        $tabNavWp = topWindow.find(".Hui-tabNav-wp"),
        $tabNavmore =topWindow.find(".Hui-tabNav-more");
    var taballwidth=0;
        
    show_nav.find('li').removeClass("active");    
    show_nav.append('<li class="active"><span data-href="'+href+'">'+titleName+'</span><i></i><em></em></li>');//在ul标签后添加<li class="active"><span data-href="'+href+'">'+titleName+'</span><i></i><em></em></li>
    if('function'==typeof $('#min_title_list li').contextMenu){
        $("#min_title_list li").contextMenu('Huiadminmenu', {
            bindings: {
                'closethis': function(t) {
                    var $t = $(t);                
                    if($t.find("i")){
                        $t.find("i").trigger("click");
                    }
                },
                'closeall': function(t) {
                    $("#min_title_list li i").trigger("click");
                },
            }
        });
    }else {
        
    }    
    var $tabNavitem = topWindow.find(".acrossTab li");
    if (!$tabNav[0]){return}
    $tabNavitem.each(function(index, element) {
        taballwidth+=Number(parseFloat($(this).width()+60))
    });
    $tabNav.width(taballwidth+25);
    var w = $tabNavWp.width();
    if(taballwidth+25>w){
        $tabNavmore.show()}
    else{
        $tabNavmore.hide();
        $tabNav.css({left:0})
    }    
    iframeBox.hide();
    iframe_box.append('<div class="show_iframe"><div class="loading"></div><iframe frameborder="0" src='+href+'></iframe></div>');
    var showBox=iframe_box.find('.show_iframe:visible');
    showBox.find('iframe').load(function(){
        showBox.find('.loading').hide();
    });
}
 

html 代码 部分

 

<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>
<section class="Hui-article-box">
    <div id="Hui-tabNav" class="Hui-tabNav hidden-xs">
        <div class="Hui-tabNav-wp">
            <ul id="min_title_list" class="acrossTab cl">
                <li class="active">
                    <span title="我的桌面" data-href="welcome.html">我的桌面</span>
                    <em></em></li>
        </ul>
    </div>
        <div class="Hui-tabNav-more btn-group"><a id="js-tabNav-prev" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont">&#xe6d4;</i></a><a id="js-tabNav-next" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont">&#xe6d7;</i></a></div>
</div>
    <div id="iframe_box" class="Hui-article">
        <div class="show_iframe">
            <div style="display:none" class="loading"></div>
            <iframe scrolling="yes" frameborder="0" src="welcome.html"></iframe>
    </div>
</div>
</section>

<div class="contextMenu" id="Huiadminmenu">
    <ul>
        <li id="closethis">关闭当前 </li>
        <li id="closeall">关闭全部 </li>
</ul>
</div>