上一篇教程《asp.net mvc+jquery easyui開發實戰教程之網站后台管理系統開發3-登錄模塊開發》完成了本項目的登錄模塊，登錄后就需要進入后台管理首頁了，需要准備一個后台模板，本文主要講解如何創建這個后台模板，本文創建的后台模板不集成到項目內部，只是靜態html頁面。后台模板是系統開發必須的，一般小公司有個3套后台模板就夠用了。本項目后台模板主要是jquery easyui插件創建的，不需要美工設計就可以創建出來，而且效果還可以，具體效果圖如下：
這個版面的缺點是，只能適應2層菜單級別的項目，如果項目包含3層以上級別菜單時需要將左側二級菜單改為樹形控件即可，這里不多介紹了。
整個模板除頂部需要使用Div+Css簡單設計外，其他部分都是easyui組件實現的。
一、創建前准備工作
新建一個名為：EasyUiTemp的文件夾，里面包含Css、Images、Js文件夾和一個index.html文件，Css、Images、Js三個文件夾是一個網站包含的3個基本的目錄，分別用於存放樣式文件、圖片資源和腳本資源。
本模板中Css文件夾內主要放網頁基本css樣式文件（初始樣式文件必須的）、還有模板頭部樣式文件，Images文件夾放置Logo圖片，Js文件夾存放jquery和EasyUI類庫，jquery和EasyUI這倆類庫需要讀者自己下載，本文最后也提供資源下載鏈接。
最終項目目錄結構如下圖所示：
二、核心頁面代碼
|
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
|
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>網站后台模板</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1,user-scalable=no"
>
<
script
src
=
"Js/jquery-1.7.1.min.js"
></
script
>
<
script
src
=
"Js/jquery.easyui.min.js"
type
=
"text/javascript"
></
script
>
<
link
href
=
"Css/themes/default/easyui.css"
rel
=
"stylesheet"
/>
<
link
href
=
"Css/themes/icon.css"
rel
=
"stylesheet"
/>
<
link
href
=
"Css/Public.css"
rel
=
"stylesheet"
/>
<
link
href
=
"Css/Index.css"
rel
=
"stylesheet"
/>
<
script
src
=
"Js/ShowMyWindow.js"
></
script
>
<
script
type
=
"text/javascript"
>
function windowClose() {
$('#myWindow').window('close');
$.messager.alert('提示信息', '密碼修改成功，請重新登錄！', 'info');
window.location.href = '/Login/AdminLogin';
}
$(document).ready(function () {
$('.easyui-accordion li a').click(function () {
var tabTitle = $(this).text();//tab標題
var url = $(this).attr("href");//tab連接
addTab(tabTitle, url);
$('.easyui-accordion li div').removeClass("selected");
$(this).parent().addClass("selected");
}).hover(function () {
$(this).parent().addClass("hover");
}, function () {
$(this).parent().removeClass("hover");
});
function addTab(subtitle, url) {
if (!$('#tabs').tabs('exists', subtitle)) {
$('#tabs').tabs('add', {
title: subtitle,
content: createFrame(url),
closable: true,
cache: true,
width: $('#mainPanle').width() - 10,
height: $('#mainPanle').height() - 26,
tools: [{
iconCls: 'icon-reload',
handler: function () {
refreshTab();
}
}]
});
} else {
$('#tabs').tabs('select', subtitle);
}
tabClose();
tabCloseEven();
}
//切換選項卡刷新
$('#tabs').tabs({
onSelect: function (title, index) {
refreshTab();
}
});
//刷新當前選項卡
function refreshTab() {
var currTab = self.parent.$('#tabs').tabs('getSelected'); //獲得當前tab
var url = $(currTab.panel('options').content).attr('src');
if (url == undefined) url = "/Statistics/CountyStatistics";
self.parent.$('#tabs').tabs('update', {
tab: currTab,
options: {
content: createFrame(url)
}
});
}
function createFrame(url) {
var s = '<
iframe
name
=
"mainFrame"
scrolling
=
"auto"
frameborder
=
"0"
src
=
"' + url + '"
style
=
"width:100%;height:100%;"
></
iframe
>';
return s;
}
function tabClose() {
/*雙擊關閉TAB選項卡*/
$(".tabs-inner").dblclick(function () {
var subtitle = $(this).children("span").text();
$('#tabs').tabs('close', subtitle);
})
//綁定右鍵菜單
$(".tabs-inner").bind('contextmenu', function (e) {
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY,
});
var subtitle = $(this).children("span").text();
$('#mm').data("currtab", subtitle);
return false;
});
}
//綁定右鍵菜單事件
function tabCloseEven() {
//刷新
$('#mm-refresh').click(function () {
refreshTab();
})
//關閉當前
$('#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) {
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) {
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 == 0) {
//msgShow('系統提示','后邊沒有啦~~','error');
//alert('后邊沒有啦~~');
return false;
}
nextall.each(function (i, n) {
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 == 0) {
//alert('到頭了，前邊沒有啦~~');
return false;
}
prevall.each(function (i, n) {
var t = $('a:eq(0) span', $(n)).text();
$('#tabs').tabs('close', t);
});
return false;
});
//退出
$("#mm-exit").click(function () {
$('#mm').menu('hide');
})
}
$("#exitSystem").click(function () {
window.location.href = "/Login/AdminLoginOff";
});
$("#modifyPassSystem").click(function () {
showMyWindow("修改密碼", "http://www.baidu.com", 500, 350);
});
});
</
script
>
</
head
>
<
body
>
<
body
class
=
"easyui-layout"
>
<
div
class
=
"clear"
></
div
>
<
div
region
=
"north"
border
=
"true"
split
=
"true"
style
=
"overflow: hidden; height: 80px;"
>
<
div
class
=
"top"
>
<
div
class
=
"button-tools"
>
<
div
class
=
"exit-system"
><
a
id
=
"exitSystem"
class
=
"easyui-linkbutton"
data-options
=
"iconCls:'icon-cancel'"
>安全退出</
a
></
div
>
<
div
class
=
"exit-system"
><
a
id
=
"modifyPassSystem"
target
=
"mainFrame"
class
=
"easyui-linkbutton"
data-options
=
"iconCls:'icon-key-delete'"
>修改密碼</
a
></
div
>
<
div
class
=
"exit-system"
>
<
div
class
=
"curUserInfo"
>當前登錄用戶：Admin</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
region
=
"south"
border
=
"true"
split
=
"true"
style
=
"overflow: hidden; height: 40px;"
>
</
div
>
<
div
region
=
"west"
split
=
"true"
title
=
"導航菜單"
style
=
"width: 200px;"
>
<
div
id
=
"menu-content"
class
=
"easyui-accordion"
style
=
"position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;"
>
<
div
title
=
"文章管理"
iconcls
=
"icon-folder-page"
style
=
"overflow: auto; padding: 0px;"
>
<
ul
>
<
li
>
<
div
class
=
""
><
a
target
=
"mainFrame"
href
=
"http://www.baidu.com"
><
span
class
=
"defined-icon icon-chart-organisation"
> </
span
><
span
class
=
"nav"
>文章管理</
span
></
a
></
div
>
</
li
>
<
li
>
<
div
class
=
""
><
a
target
=
"mainFrame"
href
=
"http://www.baidu.com"
><
span
class
=
"defined-icon icon-chart-organisation"
> </
span
><
span
class
=
"nav"
>欄目管理</
span
></
a
></
div
>
</
li
>
<
li
>
<
div
class
=
""
><
a
target
=
"mainFrame"
href
=
"http://www.baidu.com"
><
span
class
=
"defined-icon icon-chart-organisation"
> </
span
><
span
class
=
"nav"
>專題管理</
span
></
a
></
div
>
</
li
>
</
ul
>
</
div
>
<
div
title
=
"會員管理"
iconcls
=
"icon-folder-page"
style
=
"overflow: auto; padding: 0px;"
>
<
ul
>
<
li
>
<
div
class
=
""
><
a
target
=
"mainFrame"
href
=
"http://www.baidu.com"
><
span
class
=
"defined-icon icon-chart-organisation"
> </
span
><
span
class
=
"nav"
>會員管理</
span
></
a
></
div
>
</
li
>
<
li
>
<
div
class
=
""
><
a
target
=
"mainFrame"
href
=
"http://www.baidu.com"
><
span
class
=
"defined-icon icon-chart-organisation"
> </
span
><
span
class
=
"nav"
>訂單管理</
span
></
a
></
div
>
</
li
>
</
ul
>
</
div
>
<
div
title
=
"系統管理"
iconcls
=
"icon-folder-page"
style
=
"overflow: auto; padding: 0px;"
>
<
ul
>
<
li
>
<
div
class
=
""
><
a
target
=
"mainFrame"
href
=
"http://www.baidu.com"
><
span
class
=
"defined-icon icon-chart-organisation"
> </
span
><
span
class
=
"nav"
>友情鏈接</
span
></
a
></
div
>
</
li
>
<
li
>
<
div
class
=
""
><
a
target
=
"mainFrame"
href
=
"http://www.baidu.com"
><
span
class
=
"defined-icon icon-chart-organisation"
> </
span
><
span
class
=
"nav"
>用戶管理</
span
></
a
></
div
>
</
li
>
<
li
>
<
div
class
=
""
><
a
target
=
"mainFrame"
href
=
"http://www.baidu.com"
><
span
class
=
"defined-icon icon-chart-organisation"
> </
span
><
span
class
=
"nav"
>角色管理</
span
></
a
></
div
>
</
li
>
<
li
>
<
div
class
=
""
><
a
target
=
"mainFrame"
href
=
"http://www.baidu.com"
><
span
class
=
"defined-icon icon-chart-organisation"
> </
span
><
span
class
=
"nav"
>日志管理</
span
></
a
></
div
>
</
li
>
<
li
>
<
div
class
=
""
><
a
target
=
"mainFrame"
href
=
"http://www.baidu.com"
><
span
class
=
"defined-icon icon-chart-organisation"
> </
span
><
span
class
=
"nav"
>預約參觀</
span
></
a
></
div
>
</
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"mainPanle"
region
=
"center"
style
=
"overflow: hidden;"
>
<
div
id
=
"tabs"
class
=
"easyui-tabs"
fit
=
"true"
border
=
"false"
>
</
div
>
<
div
id
=
"mm"
class
=
"easyui-menu"
style
=
"width: 150px;"
>
<
div
id
=
"mm-refresh"
>刷新</
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
class
=
"menu-sep"
></
div
>
<
div
id
=
"mm-exit"
>退出</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
|
技術交流QQ：806693619