@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>HomePage</title>
<link href="~/jquery-easyui-1.5.2/themes/default/easyui.css" rel="stylesheet" />
<link href="~/jquery-easyui-1.5.2/themes/icon.css" rel="stylesheet" />
<script src="~/jquery-easyui-1.5.2/jquery.min.js"></script>
<script src="~/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<script src="~/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<style>
.txt{
font-size:20px;
color:blue;
margin-top:15px;
margin-left:100px;
float:left;
}
</style>
<script>
function bindClickEvent() {
$('.detailLink').click(function () {
var title = $(this).text();
var url = $(this).attr('url');
var isExist = $('#tt').tabs('exists', title);
if (!isExist) {
$('#tt').tabs('add', {
title: title,
content: showContent(url),
closable: true
});
} else {
$('#tt').tabs('select', title);
}
});
}
function showContent(url) {
return '<iframe src='+url+' width="100%" height="100%" frameborder="0"></iframe>';
}
$(function () {
bindClickEvent();
})
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height: 80px; background: #B3DFDA; padding: 10px;
background-image: url('../../Content/Images/bg.png');">
<img src="~/Content/Images/logo.gif" style="float:left"/>
<span class="txt" >OA办公系统</span>
</div>
<div data-options="region:'west',split:true,title:'West'" style="150px;padding:3px">
<div class="easyui-accordion" style="auto;height:auto;">
<div title="用户管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:5px;">
<a href="javascript:void(0)" class="detailLink" url="/UserInfo/Index">用户管理</a>
</div>
<div title="角色管理" data-options="iconCls:'icon-help'" style="padding:5px;">
<a href="javascript:void(0)" class="detailLink" url="/RoleInfo/Index">角色管理</a>
</div>
</div>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'">
<div id="tt" class="easyui-tabs" style="700px;height:250px" fit="true">
</div>
</div>
</body>
</html>