easyui菜单栏的使用

<div id="tabs" class="easyui-tabs" data-options="plain:true,fit:true,border:'false'">
</div>
<div id="mm" class="easyui-menu" style="width:150px;">
<div id="tabupdate">刷新</div>
<div class="menu-sep"></div>
<div id="mm-tabclose">关闭</div>
<div id="mm-tabcloseall">关闭全部</div>
<div id="mm-tabcloseother">关闭其他</div>
<div class="menu-sep"></div>
<div id="mm-tabcloseright">关闭右侧标签</div>
<div id="mm-tabcloseleft">关闭左侧标签</div>
</div> $(function () {
bindTabEvent();
bindTabMenuEvent();
}); //绑定tab的双击事件、右键事件
function bindTabEvent() {
$(".tabs-inner").live('dblclick', function () {
var subtitle = $(this).children("span").text();
if ($(this).next().is('.tabs-close')) {
$('#tabs').tabs('close', subtitle);
}
});
$(".tabs-inner").live('contextmenu', function (e) {
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
var subtitle = $(this).children("span").text();
$('#mm').data("currtab", subtitle);
         
 $('#tabs').tabs('select', subtitle);//右击时触发切换选
return false;
});
}
//绑定tab右键菜单事件
function bindTabMenuEvent() {
//刷新
$('#tabupdate').click(function () {
var currentTab = $('#tabs').tabs('getSelected');
var iframe = $(currentTab.panel('options').content);
var url = iframe.attr('src');//获得连接
var title = currentTab.panel('options').title;//获得表头信息
var content = "<iframe scrolling='auto' frameborder='0' src='"
+ url + "' style='width:100%;height:100%;'></iframe>"; $('#tabs').tabs('update', {
tab: currentTab,
options: {
content: content
}
});
});
//关闭当前
$('#mm-tabclose').click(function () {
var currtab_title = $('#mm').data("currtab");
$('#tabs').tabs('close', currtab_title);
});
//全部关闭
$('#mm-tabcloseall').click(function () {
$('.tabs-inner span').each(function (i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
$('#tabs').tabs('close', t);
}
});
});
//关闭除当前之外的TAB
$('#mm-tabcloseother').click(function () {
var currtab_title = $('#mm').data("currtab");
$('.tabs-inner span').each(function (i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
if (t != currtab_title)
$('#tabs').tabs('close', t);
}
});
});
//关闭当前右侧的TAB
$('#mm-tabcloseright').click(function () {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == ) {
alert('已经是最后一个了');
return false;
}
nextall.each(function (i, n) {
if ($('a.tabs-close', $(n)).length > ) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
}
});
return false;
});
//关闭当前左侧的TAB
$('#mm-tabcloseleft').click(function () {
var prevall = $('.tabs-selected').prevAll();
if (prevall.length == ) {
alert('已经是第一个了');
return false;
}
prevall.each(function (i, n) {
if ($('a.tabs-close', $(n)).length > ) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
}
});
return false;
});
}
function addTab(title, url) {
if ($('#tabs').tabs('exists', title)) {
$('#tabs').tabs('select', title);
} else {
var content = "<iframe scrolling='auto' frameborder='0' src='"
+ url + "' style='width:100%;height:100%;'></iframe>";
$('#tabs').tabs('add', {
title: title,
content: content,
closable: true,
iconCls: 'icon-add'
});
}
};
上一篇:[文章汇总]ASP.NET Core框架揭秘[最近更新:2018/10/31]


下一篇:更多的贴片SOT-23三极管,请点击以下表格购买。