jQuery easyUI 后台界面搭建案例


核心代码

Index.jsp

[html]view plaincopyprint?

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 

<

String path = request.getContextPath(); 

String basePath = request.getScheme() + "://" 

+ request.getServerName() + ":" + request.getServerPort() 

+ path + "/"; 

%> 

<!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 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值