leftMenu.html
3.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<!--<div id="leftMenu">
</div>-->
<head>
<meta charset="UTF-8">
<title>Keep Expandable Panel in Accordion - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../js/easyui.css">
<link rel="stylesheet" type="text/css" href="../../js/jquery/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../js/demo.css">
<script type="text/javascript" src="../../js/jquery/easyui/jquery.easyui.min.js"></script>
</head>
<style>
body{ margin:0;font-family:微软雅黑;}
.left{ width:200px; height:100%; border-right:1px solid #CCCCCC ;#FFFFFF; color:#000000; font-size:14px; text-align:center;}
.div1{text-align:center; width:200px; padding-top:10px;}
.div2{height:40px; line-height:40px;cursor: pointer; font-size:13px; position:relative;border-bottom:#ccc 1px dotted;}
.jbsz {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(../../images/leftmenu/1.png);}
.xwzx {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(../../images/leftmenu/2.png);}
.zxcp {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(../../images/leftmenu/4.png);}
.lmtj {position: absolute; height: 20px; width: 20px; left: 40px; top: 10px; background:url(../../images/leftmenu/8.png);}
.div3{display: none;cursor:pointer; font-size:13px;}
.div3 ul{margin:0;padding:0;}
.div3 li{ height:30px; line-height:30px; list-style:none; border-bottom:#ccc 1px dotted; text-align:center;}
</style>
<div class="easyui-accordion left" style="width:500px;">
<div class="div1">
<!--<div class="div2"><div class="jbsz"> </div>基本管理</div>
<div class="div3">
<ul>
<li> 网站配置</li>
<li> 管理设置</li>
<li> 导航菜单</li>
</ul>
</div>
<div class="div2"><div class="xwzx"> </div>新闻中心</div>
<div class="div3">
<ul>
<li> 管理文章</li>
<li> 文章分类</li>
<li> 添加文章</li>
</ul>
</div>-->
</div>
</div>
<script>
$(function() {
function menuClickInit() {
$('.menuClass').each( function( index, item) {
var url = $(item).attr('url');
var name = $(item).html();
var menu_id = $(item).attr('menu_id');
$(item).click(function(){
if ($("#right").tabs("exists", name)) {
$("#right").tabs("select", name);
} else {
var iframeId = "iframe_" + menu_id;
var iframe = $("<iframe>").attr({
width : "100%",
height : "100%",
frameborder : 0,
id : iframeId
});
if (url.indexOf("?") > 0) {
iframe.attr("src", contextPath + url + "&menuId=" + menu_id + "&iframeId=" + iframeId + "&time_version=" + new Date().getTime());
} else {
iframe.attr("src", contextPath + url + "?menuId=" + menu_id + "&iframeId=" + iframeId + "&time_version=" + new Date().getTime());
}
$("#right").tabs("add", {
title : name,
content : iframe,
closable : true,
selected : true,
cache : true
});
}
});
});
$(".div2").click(function(){
$(this).next("div").slideToggle("slow")
.siblings(".div3:visible").slideUp("slow");
});
}
$.post(contextPath + "/loginController/getLoginUserMenu.do", function(data) {
data = data.data;
for (var key in data) {
var dataList = data[key];
var liList = '';
for (var subMenu in dataList) {
liList += '<li class="menuClass" url="';
liList += dataList[subMenu]['menu_url'];
liList += '" menu_id="';
liList += dataList[subMenu]['id'];
liList += '">';
liList += dataList[subMenu]['menu_name'];
liList += '</li>';
}
var divGroup = '<div class="div2"><div class="jbsz"> </div>' + key + '</div>';
divGroup += '<div class="div3">';
divGroup += '<ul>';
divGroup += liList;
divGroup += '</ul>';
divGroup += '</div>';
$('.div1').append(divGroup);
}
menuClickInit();
});
$('.div1').css("width","200px");
})
</script>