點選左側選單欄生成選項卡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"></i></a><a id="js-tabNav-next" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont"></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>