经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
中小后台系统UI框架--EasyUI
来源：cnblogs　　作者：彩虹来了　　时间：2019/10/14 9:58:03　　对本文有异议

    后台开发人员不擅长前端UI界面，而小型软件公司没有专职美工岗位，开发人员只能借助开源UI框架，复用已有组件，完成用户操作界面。EasyUI是基于jQuery的UI插件集合体，可帮助开发者轻松构建网页。

    官方地址：http://www.jeasyui.com/

一、引用EasyUI

        官网下载EasyUI组件jquery-easyui-1.*.*.zip，项目工程导入locale文件夹、themes文件夹、jquery.easyui.min.js、jquery.min.js文件。

二、以系统用户首页为例，使用EasyUI

     1) 用户登录系统，首页界面

                                   

       2）home.jsp编码设计

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head >
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title>管理系统</title>    
  7.     <link rel="stylesheet"  href="plugin/easyui/themes/icon.css" />
  8.     <link rel="stylesheet"  href="plugin/easyui/themes/default/easyui.css" />
  9.     <link rel="stylesheet" href="css/home.css"/>
  10.     <script type="text/javascript" src="plugin/easyui/jquery.min.js"></script>
  11.     <script type="text/javascript" src="plugin/easyui/jquery.easyui.min.js"></script>
  12.     <script type="text/javascript" src="plugin/easyui/locale/easyui-lang-zh_CN.js"></script>
  13.         <script type="text/javascript" src="js/pathurl.js"></script> 
  14.     <script type="text/javascript" src="js/home.js?v=1.01"></script>
  15.     <script type="text/javascript" src="js/head.js"></script>
  16.     </head>
  17.     <!-- ${userName} -->
  18. <body  class="easyui-layout" style="overflow-y: hidden"  scroll="no">
  19.   <input id="logUser" type="hidden" value="${userName}"/>
  20.   <input id="userNotice" type="hidden" value="${userNotice}"/>
  21. <div region="north" split="true" border="false" style="overflow: hidden; height: 35px;
  22.         background: url(images/header.jpg) #7f99be repeat-x center 50%;
  23.         line-height: 30px;color: #fff; font-family: Verdana, 宋体">
  24.         <span style="padding-left:5px; font-size: 18px; ">管理系统</span> 
  25.         <span style="float:right; padding-right:20px; font-size: 18px;" class="head">
  26.         <a href="javascript:void(0)" id="menub" class="easyui-menubutton"     
  27.         data-options="menu:'#userfunc',iconCls:'icon-userMgr'">${userName}</a>  
  28.         </span> 
  29.         </div>
  30.     <div region="south" split="true" style="height: 30px; background: #D2E0F2; ">
  31.       <div class="footer">Copyright © 2010-2017 Start, All rights reserved.</div>
  32.     </div>
  33. <div region="west" hide="true" split="true" title="导航菜单" style="width:180px;" id="west">
  34.   <div id="menunav" class="easyui-accordion" fit="true" border="false"> 
  35.     <!--  导航内容 --> 
  36.     
  37.   </div>
  38.     </div>
  39. <div id="mainPanle" region="center" style="background: #eee; overflow-y:hidden">
  40.       <div id="tabs" class="easyui-tabs"  fit="true" border="false" >
  41.     <div title="首页" style="padding:20px;overflow:hidden; color:blue; " >
  42.           <h1 style="font-size:20px;" align="center">欢迎使用管理系统</h1>
  43.         </div>
  44.   </div>
  45.     </div>
  46.  
  47. <!--修改密码窗口-->
  48. <div id="w" class="easyui-window" title="修改密码" collapsible="false" minimizable="false"
  49.         maximizable="false" icon="icon-save"  style="width: 300px; height: 150px; padding: 5px;
  50.         background: #fafafa;">
  51.       <div class="easyui-layout" fit="true">
  52.     <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
  53.        <table cellpadding=3>
  54.         <tr>
  55.               <td>旧密码：</td>
  56.               <td><input id="txtOldPass" type="password" class="easyui-textbox" /></td>
  57.         </tr>
  58.         <tr>
  59.               <td>新密码：</td>
  60.               <td><input id="txtNewPass" type="password" class="easyui-textbox" /></td>
  61.         </tr>
  62.         <tr>
  63.               <td>确认密码：</td>
  64.               <td><input id="txtRePass" type="password" class="easyui-textbox" /></td>
  65.         </tr>
  66.       </table>
  67.         </div>
  68.     <div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;"> <a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" > 确定</a> <a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a> </div>
  69.   </div>
  70. </div>
  71. <div id="mm" class="easyui-menu" style="width:150px;">
  72.       <div id="mm-tabupdate">刷新</div>
  73.       <div class="menu-sep"></div>
  74.       <div id="mm-tabclose">关闭</div>
  75.       <div id="mm-tabcloseall">全部关闭</div>
  76.       <div id="mm-tabcloseother">除此之外全部关闭</div>
  77.       <div class="menu-sep"></div>
  78.       <div id="mm-tabcloseright">当前页右侧全部关闭</div>
  79.       <div id="mm-tabcloseleft">当前页左侧全部关闭</div>
  80.       <div class="menu-sep"></div>
  81.       <div id="mm-exit">退出</div>
  82.     </div>
  83. <div id="userfunc" style="width:150px;">   
  84.     <div id="editpass" data-options="iconCls:'icon-edit'">修改密码</div>   
  85.     <div id="loginOut"  data-options="iconCls:'icon-stop'">注销</div>    
  86. </div>   
  87. </body>
  88. </html>

 　　3）根据easyUI组件，编写功能菜单UI

  1. $(function() { 
  2. 			InitLeftMenu();
  3. 			tabClose();
  4. 			tabCloseEven(); 
  5. 		});
  6.  
  7. // 初始化左侧菜单
  8. function InitLeftMenu() {
  9.  
  10. 	$("#menunav").accordion({
  11. 				animate : false
  12. 			});
  13.  
  14. 	$.ajax({
  15. 		url : "user/getusermenu.do",
  16. 		type : "POST",
  17. 		dataType : "json",
  18. 		success : function(data) {
  19. 			console.log("菜单数据: " + JSON.stringify(data));
  20. 			$.each(data.menus, function(i, n) {
  21. 						var menulist = '';
  22. 						menulist += '<ul>';
  23. 						$.each(n.menus, function(j, o) {
  24. 									menulist += '<li><div><a ref="'
  25. 											+ o.menuId
  26. 											+ '" href="#" rel="'
  27. 											+ o.menuUrl
  28. 											+ '" ><span class="icon '
  29. 											+ o.icon
  30. 											+ '"  > </span><span class="nav">'
  31. 											+ o.menuName
  32. 											+ '</span></a></div></li> ';
  33.  
  34. 								})
  35. 						menulist += '</ul>';
  36.  
  37. 						$('#menunav').accordion('add', {
  38. 									title : n.menuName,
  39. 									content : menulist,
  40. 									iconCls : 'icon ' + n.icon
  41. 								});
  42. 					});
  43.  
  44. 			$('.easyui-accordion li a').click(function() {
  45. 						var tabTitle = $(this).children('.nav').text();
  46. 						var url = $(this).attr("rel");
  47. 						var menuid = $(this).attr("ref");
  48. 						addTab(tabTitle, url);
  49.  
  50. 						$('.easyui-accordion li div').removeClass("selected");
  51. 						$(this).parent().addClass("selected");
  52. 					}).hover(function() {
  53. 						$(this).parent().addClass("hover");
  54. 					}, function() {
  55. 						$(this).parent().removeClass("hover");
  56. 					});
  57. 			// 选中第一个
  58. 			var panels = $('#menunav').accordion('panels');
  59. 			var t = panels[0].panel('options').title;
  60. 			$('#menunav').accordion('select', t);
  61. 		}
  62. 	});
  63. }
  64.  
  65. // 添加选项卡
  66. function addTab(subtitle, url) {
  67. 	if (!$('#tabs').tabs('exists', subtitle)) {
  68. 		$('#tabs').tabs('add', {
  69. 			title : subtitle,
  70. 			content : createFrame(url),
  71. 			closable : true
  72. 				// icon:icon
  73. 			});
  74. 	} else {
  75. 		$('#tabs').tabs('select', subtitle);
  76. 		$('#mm-tabupdate').click();
  77. 	}
  78. 	tabClose();
  79. }
  80.  
  81. // 创建点击菜单时打开框架
  82. function createFrame(url) {
  83. 	var s = '<iframe scrolling="auto" frameborder="0"  src="' + url
  84. 			+ '" style="width:100%;height:100%;"></iframe>';
  85. 	return s;
  86. }
  87.  
  88. // 关闭选项卡
  89. function tabClose() {
  90. 	/* 双击关闭TAB选项卡 */
  91. 	$(".tabs-inner").dblclick(function() {
  92. 				var subtitle = $(this).children(".tabs-closable").text();
  93. 				$('#tabs').tabs('close', subtitle);
  94. 			})
  95. 	/* 为选项卡绑定右键 */
  96. 	$(".tabs-inner").bind('contextmenu', function(e) {
  97. 				$('#mm').menu('show', {
  98. 							left : e.pageX,
  99. 							top : e.pageY
  100. 						});
  101.  
  102. 				var subtitle = $(this).children(".tabs-closable").text();
  103.  
  104. 				$('#mm').data("currtab", subtitle);
  105. 				$('#tabs').tabs('select', subtitle);
  106. 				return false;
  107. 			});
  108. }
  109. // 绑定右键菜单事件
  110. function tabCloseEven() {
  111. 	// 刷新
  112. 	$('#mm-tabupdate').click(function() {
  113. 				var currTab = $('#tabs').tabs('getSelected');
  114. 				var url = $(currTab.panel('options').content).attr('src');
  115. 				$('#tabs').tabs('update', {
  116. 							tab : currTab,
  117. 							options : {
  118. 								content : createFrame(url)
  119. 							}
  120. 						})
  121. 			})
  122. 	// 关闭当前
  123. 	$('#mm-tabclose').click(function() {
  124. 				var currtab_title = $('#mm').data("currtab");
  125. 				$('#tabs').tabs('close', currtab_title);
  126. 			})
  127. 	// 全部关闭
  128. 	$('#mm-tabcloseall').click(function() {
  129. 				$('.tabs-inner span').each(function(i, n) {
  130. 							var t = $(n).text();
  131. 							$('#tabs').tabs('close', t);
  132. 						});
  133. 			});
  134. 	// 关闭除当前之外的TAB
  135. 	$('#mm-tabcloseother').click(function() {
  136. 				$('#mm-tabcloseright').click();
  137. 				$('#mm-tabcloseleft').click();
  138. 			});
  139. 	// 关闭当前右侧的TAB
  140. 	$('#mm-tabcloseright').click(function() {
  141. 				var nextall = $('.tabs-selected').nextAll();
  142. 				if (nextall.length == 0) {
  143. 					$.messager.alert('系统提示', '已关闭', 'error');
  144. 					return false;
  145. 				}
  146. 				nextall.each(function(i, n) {
  147. 							var t = $('a:eq(0) span', $(n)).text();
  148. 							$('#tabs').tabs('close', t);
  149. 						});
  150. 				return false;
  151. 			});
  152. 	// 关闭当前左侧的TAB
  153. 	$('#mm-tabcloseleft').click(function() {
  154. 				var prevall = $('.tabs-selected').prevAll();
  155. 				if (prevall.length == 0) {
  156. 					return false;
  157. 				}
  158. 				prevall.each(function(i, n) {
  159. 							var t = $('a:eq(0) span', $(n)).text();
  160. 							$('#tabs').tabs('close', t);
  161. 						});
  162. 				return false;
  163. 			});
  164.  
  165. 	// 退出
  166. 	$("#mm-exit").click(function() {
  167. 				$('#mm').menu('hide');
  168. 			})
  169. }

　　4）菜单Json对象数据格式

  1. {"menus":[{"icon":null,"menuId":"A","menuName":"机构管理","menus":[{"menuId":"A1","menuName":"部门机构","parentId":"A","menuUrl":"dept/index.do","serialNo":null,"icon":null}]},{"icon":"icon-overview","menuId":"H","menuName":"系统管理","menus":[{"menuId":"H1","menuName":"用户管理","parentId":"H","menuUrl":"system/user/index.do","serialNo":null,"icon":"icon-overview"},{"menuId":"H2","menuName":"角色管理","parentId":"H","menuUrl":"system/role/index.do","serialNo":null,"icon":"icon-overview"},{"menuId":"H3","menuName":"菜单管理","parentId":"H","menuUrl":"system/menu/index.do","serialNo":null,"icon":"icon-overview"},{"menuId":"H4","menuName":"岗位成员","parentId":"H","menuUrl":"system/rolemember/index.do","serialNo":null,"icon":null},{"menuId":"H5","menuName":"系统日志","parentId":"H","menuUrl":"system/log/index.do","serialNo":null,"icon":"icon-overview"},{"menuId":"H6","menuName":"数据字典","parentId":"H","menuUrl":"system/param/index.do","serialNo":null,"icon":"icon-overview"}]}]}
View Code

 三、API手册

 1) 官网组件（英文）地址：http://www.jeasyui.com/documentation/index.php#

 2) jQuery EasyUI 官方API文档中文版,下载地址：http://download.csdn.net/album/detail/343

     

原文链接：http://www.cnblogs.com/walkwithmonth/p/11667901.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号