Small back-office systems UI framework --EasyUI

Background developers are not good at front-end UI interface, and small software companies do not post full-time artists, developers can only use open source UI framework, reuse existing components, complete user interface. EasyUI is based on a collection of jQuery UI plug-in, can help developers easily build Web pages.

Official Address: http://www.jeasyui.com/

A, quote EasyUI

Official website to download EasyUI components jquery-easyui-1. *. *. Zip, project import locale folders, themes folder, jquery.easyui.min.js, jquery.min.js file.

Second, the users of the system home page, for example, use EasyUI

1) user login system, Home Interface

2) home.jsp coding design

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>管理系统</title>    
    <link rel="stylesheet"  href="plugin/easyui/themes/icon.css" />
    <link rel="stylesheet"  href="plugin/easyui/themes/default/easyui.css" />
    <link rel="stylesheet" href="css/home.css"/>
    <script type="text/javascript" src="plugin/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="plugin/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="plugin/easyui/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="js/pathurl.js"></script> 
    <script type="text/javascript" src="js/home.js?v=1.01"></script>
    <script type="text/javascript" src="js/head.js"></script>
    </head>
    <!-- ${userName} -->
<body  class="easyui-layout" style="overflow-y: hidden"  scroll="no">
  <input id="logUser" type="hidden" value="${userName}"/>
  <input id="userNotice" type="hidden" value="${userNotice}"/>
<div region="north" split="true" border="false" style="overflow: hidden; height: 35px;
        background: url(images/header.jpg) #7f99be repeat-x center 50%;
        line-height: 30px;color: #fff; font-family: Verdana, 宋体">
        <span style="padding-left:5px; font-size: 18px; ">管理系统</span> 
        <span style="float:right; padding-right:20px; font-size: 18px;" class="head">
        <a href="javascript:void(0)" id="menub" class="easyui-menubutton"     
        data-options="menu:'#userfunc',iconCls:'icon-userMgr'">${userName}</a>  
        </span> 
        </div>
    <div region="south" split="true" style="height: 30px; background: #D2E0F2; ">
      <div class="footer">Copyright © 2010-2017 Start, All rights reserved.</div>
    </div>
<div region="west" hide="true" split="true" title="导航菜单" style="width:180px;" id="west">
  <div id="menunav" class="easyui-accordion" fit="true" border="false"> 
    <!--  导航内容 --> 
    
  </div>
    </div>
<div id="mainPanle" region="center" style="background: #eee; overflow-y:hidden">
      <div id="tabs" class="easyui-tabs"  fit="true" border="false" >
    <div title="首页" style="padding:20px;overflow:hidden; color:blue; " >
          <h1 style="font-size:20px;" align="center">欢迎使用管理系统</h1>
        </div>
  </div>
    </div>

<!--修改密码窗口-->
<div id="w" class="easyui-window" title="修改密码" collapsible="false" minimizable="false"
        maximizable="false" icon="icon-save"  style="width: 300px; height: 150px; padding: 5px;
        background: #fafafa;">
      <div class="easyui-layout" fit="true">
    <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
       <table cellpadding=3>
        <tr>
              <td>旧密码：</td>
              <td><input id="txtOldPass" type="password" class="easyui-textbox" /></td>
        </tr>
        <tr>
              <td>新密码：</td>
              <td><input id="txtNewPass" type="password" class="easyui-textbox" /></td>
        </tr>
        <tr>
              <td>确认密码：</td>
              <td><input id="txtRePass" type="password" class="easyui-textbox" /></td>
        </tr>
      </table>
        </div>
    <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>
  </div>
</div>
<div id="mm" class="easyui-menu" style="width:150px;">
      <div id="mm-tabupdate">刷新</div>
      <div class="menu-sep"></div>
      <div id="mm-tabclose">关闭</div>
      <div id="mm-tabcloseall "> Close All </ div> 
      <div ID =" mm-tabcloseleft "> Close all left of the current page </ div>
      <div ID =" mm-tabcloseright "> Close all right of the current page </ div>
      <div class =" On Sep-MENU "> </ div>
      <div ID =" mm-tabcloseother "> Close all except </ div>
      <div class="menu-sep"></div>
      <div id="mm-exit">退出</div>
    </div>
<div id="userfunc" style="width:150px;">   
    <div id="editpass" data-options="iconCls:'icon-edit'">修改密码</div>   
    <div id="loginOut"  data-options="iconCls:'icon-stop'">注销</div>    
</div>   
</body>
</html>

　　3) According to easyUI components, write the function menu UI

$(function() { 
			InitLeftMenu();
			tabClose();
			tabCloseEven(); 
		});

// 初始化左侧菜单
function InitLeftMenu() {

	$("#menunav").accordion({
				animate : false
			});

	$.ajax({
		url : "user/getusermenu.do",
		type : "POST",
		dataType : "json",
		success : function(data) {
			console.log("菜单数据: " + JSON.stringify(data));
			$.each(data.menus, function(i, n) {
						var menulist = '';
						menulist += '<ul>';
						$.each(n.menus, function(j, o) {
									menulist += '<li><div><a ref="'
											+ o.MenuId 
											+ '" href="#" rel="'
											Tasu O.MenuUrl
											+ '" ><span class="icon '
											+ o.icon
											+ '"  > </span><span class="nav">'
											+ o.menuName
											+ '</span></a></div></li> ';

								})
						menulist += '</ul>';

						$('#menunav').accordion('add', {
									title : n.menuName,
									content : menulist,
									iconCls : 'icon ' + n.icon
								});
					});

			$('.easyui-accordion li a').click(function() {
						var tabTitle = $(this).children('.nav').text();
						var url = $(this).attr("rel");
						var menuid = $(this).attr("ref");
						addTab(tabTitle, url);

						$('.easyui-accordion li div').removeClass("selected");
						$(this).parent().addClass("selected");
					}).hover(function() {
						$(this).parent().addClass("hover");
					}, function() {
						$(this).parent().removeClass("hover");
					});
			// 选中第一个
			var panels = $('#menunav').accordion('panels');
			var t = panels[0].panel('options').title;
			$('#menunav').accordion('select', t);
		}
	});
}

// 添加选项卡
function addTab(subtitle, url) {
	if (!$('#tabs').tabs('exists', subtitle)) {
		$('#tabs').tabs('add', {
			title : subtitle,
			content : createFrame(url),
			the closable: to true 
				// icon:icon
			}); 
	} the else { 
		$ ( '# tabs') tabs ( 'SELECT', SUBTITLE);. 
		$ ( '# tabupdate-mm') the Click ();. 
	} 
	tabclose (); 
} 

// Create Click open menu frame 
function createFrame (URL) { 
	var S = '<iframes scrolling = "Auto" frameborder = "0" the src = "' + URL 
			+ '" style = "width: 100%; height: 100%;"> </ iframes> '; 
	return S; 
} 

// close a tab 
function tabclose () { 
	/ * Double-off tab tAB * / 
	$ DblClick (function () {( "Inner-tabs."). 
				var SUBTITLE = $ ( . the this) .children (. "the closable-tabs") text (); 
				. $ ( '# tabs') tabs ( 'Close', SUBTITLE);
			}) 
	/ * * Binding Right / Tab is 
	$ ( ". Tabs-inner" ). Bind ( 'contextmenu', function (e) { 
				$ ( '# mm') the MENU ( 'Show', {. 
							Left: e.pageX,
							top : e.pageY
						});

				var subtitle = $(this).children(".tabs-closable").text();

				$('#mm').data("currtab", subtitle);
				$('#tabs').tabs('select', subtitle);
				return false;
			});
}
// 绑定右键菜单事件
function tabCloseEven() {
	// 刷新
	$('#mm-tabupdate').click(function() {
				var currTab = $('#tabs').tabs('getSelected');
				var url = $(currTab.panel('options').content).attr('src');
				$('#tabs').tabs('update', {
							tab : currTab,
							options : {
								content :createFrame (URL) 
	$ ( '# mm-tabclose'
	// Close the current
						})
							}
			}) 
				var currtab_title = $ ( '# mm') Data ( "currtab");. 
				. $ ( '# Tabs') tabs (' Close ', currtab_title); 
			}) 
	// Close All 
	$ (' # mm -tabcloseall '.) the Click (function () { 
				$ (' Inner-span tabs. ') each (function (I, n-) {. 
							var = $ T (n-) .text (); 
							$ (' # tabs') .tabs ( 'Close', T); 
						}); 
			}); 
	// Close the current other than the TAB 
	. $ ( '# tabcloseother-mm') the Click (function () { 
				$ ( '# tabcloseright-mm') .click (); 
				$ ( '# tabcloseleft-mm') the Click ();. 
			}); 
	// Close the current right of the TAB 
	$ ( '# tabcloseright-mm') the Click (function (.) { 
				var = $ nextAll ( '.tabs-selected') nextAll ().;
				if (nextall.length == 0) {
					$ .messager.alert ( 'prompted', 'off', 'error'); messager.alert ( 'prompted', 'off', 'error'); 
					return to false;
				} 
				nextall.each (function (I, n-) { 
							var T = $ ( 'A: EQ (0) span', $ ( . n-)) text (); 
							$ ( '# tabs') tabs ( 'Close', T);. 
						}); 
				return to false; 
			}); 
	// close the left of the current of the TAB 
	$ ( '# mm-tabcloseleft' ) .click (function () { 
				var prevall = $ ( '.-tabs Selected') prevAll ();. 
				IF (== prevall.length 0) { 
					return to false; 
				} 
				prevall.each (function (I, n-) { 
							var T = $. ( 'A: EQ (0) span', $ (n-)) text (); 
							. $ ( '# tabs') tabs ( 'Close', T); 
						}); 
				return to false; 
			}) ;

	// 退出
	$("#mm-exit").click(function() {
				$('#mm').menu('hide');
			})
}

　　4) Object Data Format menu Json

{"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

Three, API manual

1) official website components (English) Address: http://www.jeasyui.com/documentation/index.php#

2) jQuery EasyUI official Chinese version of the API documentation, download address: http: //download.csdn.net/album/detail/343

Small back-office systems UI framework --EasyUI

Guess you like