一、为EasyUI的“选项卡Tabs”增加“刷新”和“全部关闭”按钮，见下列tools代码
<div id="mainTab" class="easyui-tabs" data-options="fit:true, tools:[ {iconCls:'icon-reload',text:'刷新', handler:refreshTab }, {iconCls:'icon-cancel',text:'关闭全部', handler:closeTab} ]"> <div id="home" title="我的主页" data-options="closable:false,fit:true" style="padding:3px"> <iframe scrolling="auto" frameborder="0" src="" style=" 100%; height: 100%;"></iframe> </div> </div>
二、添加JS代码，手动敲入script，按Tab键，页面自动补齐<script></script> ，内部新增JS代码
<script>
//菜单树
$('#tree').tree({
onClick: function (node) { //节点的点击事件
if (node.text == '菜单一') { var url = '/SysSampleMVC'; };
if (node.text == '菜单二') { var url = '/SysSampleEasyUI'; };
if (node.text == '菜单三') { var url = '/SysSample'; };
if ($('#tree').tree('isLeaf', node.target)) { //判断是否是叶子节点
addTab(node.text, url);
} else { //如果是父节点，单击文本切换展开/折叠节点的状态
$(this).tree('toggle', node.target);
}
}
});
//增加选项卡
function addTab(subtitle, url) {
if (!$("#mainTab").tabs('exists', subtitle)) { //若选项卡不存在，生成新的选项卡
var con = '<iframe frameborder="0" scrolling="auto" style="99.5%; height:99%" src="' + url + '"></iframe>';
$("#mainTab").tabs('add', {
title: subtitle,
content: con,
closable: true,
loadingMessage: '加载中......'
});
} else { //若选项卡已存在，选择该选项卡
$("#mainTab").tabs('select', subtitle);
$("#tab_menu-tabrefresh").trigger("click");
}
}
//刷新选项卡
function refreshTab() {
var index = $('#mainTab').tabs('getTabIndex', $('#mainTab').tabs('getSelected'));
if (index != -1) {
var tab = $('#mainTab').tabs('getTab', index);
$('#mainTab').tabs('update', {
tab: tab,
options: {
selected: true
}
});
}
}
//关闭选项卡
function closeTab() {
$('.tabs-inner span').each(function (i, n) {
var t = $(n).text();
if (t != '') {
if (t != "我的主页") {
$('#mainTab').tabs('close', t);
}
}
});
}
</script>
添加完毕后的效果如下：因为未添加SysSample控制器及视图，会显示无法找到资源。
三、创建一个视图模版（布局页）
在View文件夹下面的新建Shared文件夹，新建_Index_Layout.cshtml布局页，以后系统用到的index视图基本要引用这个模版
把内部代码修改为：
<!DOCTYPE html>
<html>
<head>
<title>Main</title>
@Styles.Render("~/Content/themes/css")
@Styles.Render("~/Content/themes/bootstrap/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryeasyui")
</head>
<body>
@RenderBody()
</body>
</html>
新建_Index_LayoutEdit.cshtml布局页，以后系统用到的create、edit视图基本要引用这个模版
<!DOCTYPE html> <html> <head> <title>Main</title> @Styles.Render("~/Content/themes/bootstrapcss") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/bootstrap") </head> <body> @RenderBody() </body> </html>