jQuery easyUI 后台界面搭建案例
核心代码
Index.jsp
[html]view plaincopyprint?
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%
3 String path = request.getContextPath();
4 String basePath = request.getScheme() + "://"
5 + request.getServerName() + ":" + request.getServerPort()
6 + path + "/";
7 %>
8
9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
10 <html>
11 <head>
12 <base href="<%=basePath%>">
13
14 <title>My JSP 'index.jsp' starting page</title>
15
16 <meta http-equiv="pragma" content="no-cache">
17 <meta http-equiv="cache-control" content="no-cache">
18 <meta http-equiv="expires" content="0">
19 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
20 <meta http-equiv="description" content="This is my page">
21 <!--
22 <link rel="stylesheet" type="text/css" href="styles.css">
23 -->
24
25 <link rel="stylesheet" type="text/css"
26 href="${pageContext.request.contextPath }/styles/easyui/themes/default/easyui.css">
27 <link rel="stylesheet" type="text/css"
28 href="${pageContext.request.contextPath }/styles/easyui/themes/icon.css">
29 <link rel="stylesheet" type="text/css"
30 href="${pageContext.request.contextPath }/styles/manager/init.css">
31 <script type="text/javascript"
32 src="${pageContext.request.contextPath }/scripts/jquery-1.8.0.min.js"></script>
33 <script type="text/javascript"
34 src="${pageContext.request.contextPath }/scripts/jquery.easyui.min.js"></script>
35 <script type="text/javascript"
36 src="${pageContext.request.contextPath }/scripts/manager/init.js"></script>
37
38 </head>
39
40 <body>
41 <div id="box" class="easyui-layout">
42 <!-- north开始 -->
43 <div data-options="region:'north',title:'North Title',split:true"
44 style="height:100px;"></div>
45 <!-- north结束 -->
46
47
48 <%--<div
49 data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"
50 style="width:100px;"></div>
51
52 --%>
53 <!--west开始 -->
54 <div data-options="region:'west',title:'导航菜单',split:true"
55 style="width:200px;">
56 <div id="nav" class="easyui-accordion"
57 data-options="fit:true,border:false"
58 style="padding-right: 5px; padding-left: 5px;">
59
60 <div title="管理员管理" data-options="iconCls:'icon-save'">
61 <ul>
62 <li><a
63 href="${pageContext.request.contextPath }/backstage/admin/admin_list.jsp">管理员列表</a>
64 </li>
65 </ul>
66 </div>
67
68 <div title="会员管理">
69 <ul>
70
71 <li><a href="#">会员列表</a></li>
72 </ul>
73
74 </div>
75
76
77 <div title="商品类别管理" data-options="iconCls:'icon-reload'"
78 style="padding:10px;">
79 <ul>
80 <li><a href="${pageContext.request.contextPath }/backstage/goodstype_list.jsp">商品类别列表</a></li>
81 </ul>
82
83 </div>
84
85 <div title="商品管理" data-options="iconCls:'icon-reload'"
86 style="padding:10px;">
87 <ul>
88 <li><a href="#">商品列表</a></li>
89 </ul>
90
91 </div>
92 </div>
93 </div>
94 <!-- west结束 -->
95
96 <!-- center开始 -->
97 <div data-options="region:'center'" style="">
98 <div id="tt" class="easyui-tabs" data-options="fit:true">
99 <div title="后台操作的界面" style="padding:20px;">后台操作界面的说明</div>
100 </div>
101 </div>
102 <!-- center结束 -->
103
104
105
106 <!-- south开始 -->
107 <div data-options="region:'south',split:true"
108 style="height:25px; padding: 5px; background: #D2E0F2;">
109 <div align="center">版权归河北软件职业技术学院 @河软CSDN乐知学院所有2013-2020</div>
110 </div>
111 <!-- south结束 -->
112 </div>
113
114 </body>
115 </html>
116
117
Init.js
[javascript]view plaincopyprint?
118 $(document).ready(function() {
119 //获取所有的a元素
120 var $as = $("li>a");
121 //获取id=tabs的元素
122 var $tt = $("#tt");
123
124 //注册点击事件
125 $as.bind("click", function() {
126 var text = $(this).text();
127 var url = this.href;
128
129 //根据标题看这个面板是否存在
130 if ($tt.tabs("exists", text)) {
131 //如果存在 变成被选中的状态
132 $tt.tabs("select", text);
133 } else {
134 //如果不存在则添加
135 $tt.tabs('add', {
136 title : text,
137 closable : true,
138 content : createFrame(url), //创建面板内容
139 tools : [{
140 iconCls : 'icon-mini-refresh',
141 handler : function() {
142 alert('refresh');
143 }
144 }]
145 });
146 }
147
148 return false;
149 });
150
151 });
152
153 //创建面板
154 function createFrame(url) {
155 var src = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';
156 return src;
157 }