easyui创建与刷新tab页示例

一个简单的创建与刷新tab页的示例。从远程服务器读取菜单树,点击树节点打开tab页。tab页标题上绑定右键菜单,可关闭或刷新tab页。

//初始化左侧
function InitLeftMenu(name) {
$(“#nav”).accordion( {
animate : false,
fit : true,
border : false
});
var selectedPanelname = name;

$.each(_menus.menus, function(i, n) {
var menulist = ”;
menulist += ‘<ul class=”navlist”>’;
$.each(n.menus, function(j, o) {
//tupengfei 20141110 某些菜单需要弹出显示,先写死在这里
if( o.menuname==”固定视频”||
o.menuname==”机动车实时定位”){
menulist += ‘<li><div ><a id=”‘+o.menuid+'” ref=”‘+o.menuid
+'” href=”‘+o.url+'” target=”_blank” rel=”” ><span class=”icon ‘
+ o.icon+'” >&nbsp;</span><span class=”nav”>’
+ o.menuname + ‘</span></a></div> ‘;
}
else{
menulist += ‘<li><div ><a id=”‘ + o.menuid + ‘” ref=”‘ + o.menuid
+ ‘” href=”#” rel=”‘ + o.url + ‘” ><span class=”icon ‘
+ o.icon + ‘” >&nbsp;</span><span class=”nav”>’
+ o.menuname + ‘</span></a></div> ‘;
}

if (o.child && o.child.length > 0) {
//li.find(‘div’).addClass(‘icon-arrow’);
menulist += ‘<ul class=”third_ul”>’;
$.each(o.child, function(k, p) {

//tupengfei 20141110 某些菜单需要弹出显示,先写死在这里
if(o.menuname==”邮件办公”){
menulist += ‘<li><div><a id=”‘ + p.menuid + ‘” ref=”‘
+ p.menuid + ‘” href=”‘+p.url+'” target=”_blank” rel=”‘ + p.url
+ ‘” ><span class=”icon ‘ + p.icon
+ ‘” >&nbsp;</span><span class=”nav”>’ + p.menuname
+ ‘</span></a></div> </li>’
}
else{
menulist += ‘<li><div><a id=”‘ + p.menuid + ‘” ref=”‘
+ p.menuid + ‘” href=”#” rel=”‘ + p.url
+ ‘” ><span class=”icon ‘ + p.icon
+ ‘” >&nbsp;</span><span class=”nav”>’ + p.menuname
+ ‘</span></a></div> </li>’
}
});
menulist += ‘</ul>’;
}

menulist += ‘</li>’;
})
menulist += ‘</ul>’;

$(‘#nav’).accordion(‘add’, {
title : n.menuname,
content : menulist,
border : false,
iconCls : ‘icon ‘ + n.icon,
id : n.menuid
});

if (selectedPanelname == ” && i == 0)
selectedPanelname = n.menuname;

});
$(‘#nav’).accordion(‘select’, selectedPanelname);

$(‘.navlist li a’).click(function() {
var tabTitle = $(this).children(‘.nav’).text();

var url = $(this).attr(“rel”);
var menuid = $(this).attr(“ref”);
var icon = $(this).find(‘.icon’).attr(‘class’);

var third = find(menuid);
if (third && third.child && third.child.length > 0) {
$(‘.third_ul’).slideUp();

var ul = $(this).parent().next();
if (ul.is(“:hidden”))
ul.slideDown();
else
ul.slideUp();
} else {
addTab(tabTitle, url, icon);
$(‘.navlist li div’).removeClass(“selected”);
$(this).parent().addClass(“selected”);
}
}).hover(function() {
$(this).parent().addClass(“hover”);
}, function() {
$(this).parent().removeClass(“hover”);
});

//选中第一个
//var panels = $(‘#nav’).accordion(‘panels’);
//var t = panels[0].panel(‘options’).title;
//$(‘#nav’).accordion(‘select’, t);
}
//获取左侧导航的图标
function getIcon(menuid) {
var icon = ‘icon ‘;
$.each(_menus.menus, function(i, n) {
$.each(n.menus, function(j, o) {
if (o.menuid == menuid) {
icon += o.icon;
}
})
})

return icon;
}

function find(menuid) {
var obj = null;
$.each(_menus.menus, function(i, n) {
$.each(n.menus, function(j, o) {
if (o.menuid == menuid) {
obj = o;
}
});
});

return obj;
}
function addTab(subtitle, url, icon) {

if (!$(‘#tabs’).tabs(‘exists’, subtitle)) {

$(‘#tabs’).tabs(‘add’, {
title : subtitle,
content : createFrame(url),
closable : true,
icon : icon
});

} else {

$(‘#tabs’).tabs(‘select’, subtitle);
$(‘#mm-tabupdate’).click();
}
tabClose();
}

function createFrame(url) {

var s = ‘http://'+url+'‘;
return s;
}

function tabClose() {
/*双击关闭TAB选项卡*/
$(“.tabs-inner”).dblclick(function() {
var subtitle = $(this).children(“.tabs-closable”).text();
$(‘#tabs’).tabs(‘close’, subtitle);
})
/*为选项卡绑定右键*/
$(“.tabs-inner”).bind(‘contextmenu’, function(e) {
$(‘#mm’).menu(‘show’, {
left : e.pageX,
top : e.pageY
});

var subtitle = $(this).children(“.tabs-closable”).text();

$(‘#mm’).data(“currtab”, subtitle);
$(‘#tabs’).tabs(‘select’, subtitle);
return false;
});
}

//绑定右键菜单事件
function tabCloseEven() {

$(‘#mm’).menu( {
onClick : function(item) {
closeTab(item.id);
}
});

return false;
}

function closeTabByname(tabname) {
var alltabs = $(‘#tabs’).tabs(‘tabs’);
var currentTab = $(‘#tabs’).tabs(‘getSelected’);
var allTabtitle = [];
$.each(alltabs, function(i, n) {
allTabtitle.push($(n).panel(‘options’).title);
})
var iframe = $(currentTab.panel(‘options’).content);

var src = iframe.attr(‘src’);
var currtab_title = currentTab.panel(‘options’).title;
$(‘#tabs’).tabs(‘close’, tabname);
}

function closeTab(action) {
var alltabs = $(‘#tabs’).tabs(‘tabs’);
var currentTab = $(‘#tabs’).tabs(‘getSelected’);
var allTabtitle = [];
$.each(alltabs, function(i, n) {
allTabtitle.push($(n).panel(‘options’).title);
})

switch (action) {
case “tabupdate”:
var iframe = $(currentTab.panel(‘options’).content);

var src = iframe.attr(‘src’);

$(‘#tabs’).tabs(‘update’, {
tab : currentTab,
options : {
content : createFrame(src)
}
})
break;
case “close”:
var currtab_title = currentTab.panel(‘options’).title;
$(‘#tabs’).tabs(‘close’, currtab_title);
break;
case “closeall”:
$.each(allTabtitle, function(i, n) {
if (n != onlyOpenTitle) {
$(‘#tabs’).tabs(‘close’, n);
}
});
break;
case “closeother”:
var currtab_title = currentTab.panel(‘options’).title;
$.each(allTabtitle, function(i, n) {
if (n != currtab_title && n != onlyOpenTitle) {
$(‘#tabs’).tabs(‘close’, n);
}
});
break;
case “closeright”:
var tabIndex = $(‘#tabs’).tabs(‘getTabIndex’, currentTab);

if (tabIndex == alltabs.length – 1) {
alert(‘亲,后边没有啦 ^@^!!’);
return false;
}
$.each(allTabtitle, function(i, n) {
if (i > tabIndex) {
if (n != onlyOpenTitle) {
$(‘#tabs’).tabs(‘close’, n);
}
}
});

break;
case “closeleft”:
var tabIndex = $(‘#tabs’).tabs(‘getTabIndex’, currentTab);
if (tabIndex == 1) {
alert(‘亲,前边那个上头有人,咱惹不起哦。 ^@^!!’);
return false;
}
$.each(allTabtitle, function(i, n) {
if (i < tabIndex) {
if (n != onlyOpenTitle) {
$(‘#tabs’).tabs(‘close’, n);
}
}
});

break;
case “exit”:
$(‘#closeMenu’).menu(‘hide’);
break;
}
}

$(‘#west’).panel({
headerCls:’west-header’
});

function addTabsFrame(subtitle,url,icon){
addTab(subtitle,url,icon);
}

function closeTabAction(action){
closeTab(action);
}

function closeTabActionByname(tabname){
closeTabByname(tabname);
}

<body class=”easyui-layout” style=”overflow-y: hidden” fit=”true”
scroll=”no”>

<noscript>
<div
style=”position: absolute; z-index: 100000; height: 2046px; top: 0px; left: 0px; width: 100%; background: white; text-align: center;”>
<img src=”images/noscript.gif” alt=’抱歉,请开启脚本支持!’ />
</div>
</noscript>
<div id=”loading-mask”
style=”position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: #D2E0F2; z-index: 20000″>
<div id=”pageloading”
style=”position: absolute; top: 50%; left: 50%; margin: -120px 0px 0px -120px; text-align: center; border: 2px solid #EFEFEF; width: 200px; height: 40px; font-size: 14px; padding: 10px; font-weight: bold; background: #fff; color: #15428B;”>
<img src=”images/loading.gif” align=”absmiddle” /> 正在加载中,请稍候…
</div>
</div>

<div region=”north” split=”false” border=”false”
style=”overflow: hidden; height: 85px;”>
<!– http://map/top.html –>
http://top.html
</div>
<!– 开始控制声音播放 –>
<div style=’display: none’></div>
<audio id=”alarm_sound” src=”alarm.mp3″ controls=”controls” loop=”true”
hidden=”true”></audio>
</div>

<div region=”south” split=”false”
style=”height: 30px; background: #0F6596; border: 0px; top: 1px”>
<table border=”0px” height=”23px” width=”100%” style=”top: 0px” />
<tr>
<td height=”23px” width=”33%”><font color=”#FFFFFF”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<%=session.getAttribute(“session_orgname”)%>-<%=session.getAttribute(“fr_username”)%></font>
<a href=javascript:openPwd()>修改密码</a></td>

<td height=”23px” width=”34%” align=”center”><font
color=”#FF2D2D”> 本系统只在谷歌Chrome浏览器下正常使用</font></td>

<td height=”23px” width=”33%” align=”right”>
<a href=javascript:debug()>调试</a>&nbsp;&nbsp;
<font
color=”#FFFFFF”> 版权所有:卡斯柯信号有限公司 CASCO Signal
LTD.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font></td>
</tr>
</table>
</div>
<div region=”center” class=”easyui-layout” scroll=”no”
style=”width: 100%; height: 100%; overflow: hidden; border: 0px;”>
<div region=”west” split=”true” title=”导航菜单”
style=”width: 200px; height: 100%;” id=”west” class=”easyui-panel”>
<div id=”nav”></div>
</div>

<div id=”mainPanle” region=”center”
style=”overflow: hidden;width: 100%; height: 100%; border: 0px;”>
<div id=”tabs” class=”easyui-tabs” fit=”true” border=”false” style=”overflow: hidden;”></div>
</div>
</div>

<div id=”mm” class=”easyui-menu” style=”width: 150px;”>
<div id=”tabupdate”>刷新</div>
<div class=”menu-sep”></div>
<div id=”close”>关闭</div>
<div id=”closeall”>全部关闭</div>
<div id=”closeother”>除此之外全部关闭</div>
<div class=”menu-sep”></div>
<div id=”closeright”>当前页右侧全部关闭</div>
<div id=”closeleft”>当前页左侧全部关闭</div>
<div class=”menu-sep”></div>
<div id=”exit”>退出</div>
</div>

页面:

68d3f37cf7181f99a23aa9b493968f46

This entry was posted in Computer, javascript. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s