布局样式
引入easyui+jquery+css代码
<script type="text/javascript"
src="../js/jquery.min.js"></script>
<script type="text/javascript"
src="../js/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="../js/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="../themes/icon.css">
<style type="text/css">
.content {
padding: 10px 10px 10px 10px;
}
</style>
<script type="text/javascript">
布局前台代码
<body class="easyui-layout">
<div data-options="region:'north',split:true"
style="height:100px;">
<center style="margin-top: 40px;">
<h3>sccc后台</h3>
</center>
</div>
<div data-options="region:'west',title:'菜单',split:true" style="width:180px;">
<ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
<li><span id="sms">短信群发</span></li>
<li><span id="massagemanage">短信模板管理</span></li>
</ul>
</div>
<div data-options="region:'center',title:''">
<div id="tabs" class="easyui-tabs">
<div title="首页" style="padding:20px;">
</div>
</div>
</div>
</body>
jquery点击节点,打开tabs实现
<script type="text/javascript">
$(function(){
//异步树发送ajax请求,获取菜单数据
$("#menu").tree({
onClick: function(node){
//点击叶子结点,如果对应tab已经存在,则选中这个tab;如果对应tab不存在,新开tab
//判断点击叶子结点
if($('#menu').tree('isLeaf', node.target)){
var tabs = $('#tabs');
//根据点击叶子节点的文本信息得到tab
var tab = tabs.tabs('getTab',node.text);
//初始设置为短信模板管理页面
var href='listMassage.html';
//若选择节点为短信群发,则修改页面
if(node.text=='短信群发'){
href='listMassageRecording.html';
}
if(tab){
//tab页已经打开,则选中这个tab
tabs.tabs('select',node.text);
}else{
//对应tab不存在,新开tab
tabs.tabs('add',{
title:node.text,
href:href,
closable:true,
});
}
}
}
});
});
</script>