中小後臺系統UI框架--EasyUI

来源:https://www.cnblogs.com/walkwithmonth/archive/2019/10/13/11667901.html
-Advertisement-
Play Games

後臺開發人員不擅長前端UI界面，而小型軟體公司沒有專職美工崗位，開發人員只能藉助開源UI框架，復用已有組件，完成用戶操作界面。EasyUI是基於jQuery的UI插件集合體，可幫助開發者輕鬆構建網頁。 官方地址：http://www.jeasyui.com/ 一、引用EasyUI 官網下載EasyU ...


    後臺開發人員不擅長前端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編碼設計

<%@ 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">全部關閉</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 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）根據easyUI組件，編寫功能菜單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="'
											+ 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),
			closable : true
				// icon:icon
			});
	} else {
		$('#tabs').tabs('select', subtitle);
		$('#mm-tabupdate').click();
	}
	tabClose();
}

// 創建點擊菜單時打開框架
function createFrame(url) {
	var s = '<iframe 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(".tabs-closable").text();
				$('#tabs').tabs('close', subtitle);
			})
	/* 為選項卡綁定右鍵 */
	$(".tabs-inner").bind('contextmenu', function(e) {
				$('#mm').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').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() {
				$('#mm-tabcloseright').click();
				$('#mm-tabcloseleft').click();
			});
	// 關閉當前右側的TAB
	$('#mm-tabcloseright').click(function() {
				var nextall = $('.tabs-selected').nextAll();
				if (nextall.length == 0) {
					$.messager.alert('系統提示', '已關閉', 'error');
					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) {
					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');
			})
}

　　4）菜單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

 三、API手冊

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

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

     


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery 源碼分析(十) 數據緩存模塊 data詳解
    jQuery的數據緩存模塊以一種安全的方式為DOM元素附加任意類型的數據，避免了在JavaScript對象和DOM元素之間出現迴圈引用，以及由此而導致的記憶體泄漏。 數據緩存模塊為DOM元素和JavaScript對象提供了統一的數據設置、讀取和移除方法，在jQuery內部還為隊列模塊、動畫模塊、樣式操 ...
  • HTML連載41-水平居中的註意點、盒子居中和內容居中
    一、盒子模型練習 我們有個需求： 創建兩個盒子，大盒子嵌套一個小盒子，大盒子是紅色的，小盒子是藍色的，並且小盒子在大盒子中是居中的。 註意點： （1） 註意點：如果兩個盒子是嵌套關係，設置裡面的盒子的外邊距的話，外面的 盒子也會頂下來 ，即：僅有屬性： margin-left:100px; marg ...
  • 前端之CSS基礎及使用方法
    CSS介紹 CSS（ C ascading S tyle S heet，層疊樣式表)定義 如何顯示 HTML元素。 當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。 CSS語法 CSS實例 每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之後用分號 ...
  • HTML基礎知識（塊級標簽，行內標簽，行內塊標簽）
    塊級元素：獨占一行，對寬高的屬性值生效；如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100%寬； 行內元素：可以多個標簽存在一行，對寬高屬性值不生效，完全靠內容撐開寬高！ 其中還有一種結合兩種模式有點的顯示模式： 行內塊元素：結合的行內和塊級的有點，不僅可以對寬高屬性值生效，還可以多個標簽存在 ...
  • 原生JS+CSS實現日期插件
    筆者最近在學習Element UI，覺得它提供的日期選擇器既簡單又美觀，於是仿照著寫了一個日期插件。筆者使用到的技術有ES5、CSS和HTML，控制項相容IE10+和谷歌瀏覽器。有一點需要註意，筆者使用到iframe包裹彈出層，由於瀏覽器的同源安全策略，代碼必須得放到tomcat的webapps文件夾 ...
  • 移動端開發之響應式開發和bootstrap基礎
    響應式開發 （就是利用媒體查詢針對不同寬度的設備進行佈局和樣式的設置，從而設配不同設備的目的） 響應式佈局容器響應式需要一個父級作為佈局容器，來配合子級元素來實現變化效果 原理：不同屏幕下，通過媒體查詢來改變這個佈局容器的大小，再改變裡面子元素的排列方式和大小，從而實現不同屏幕下，看到不同的頁面佈局 ...
  • 移動端開發rem佈局之less+媒體查詢佈局的原理步驟和心得
    rem即是以html文件中font-size的大小的倍數rem佈局的原理：通過媒體查詢設置不同屏幕寬度下的html的font-size大小，然後在css佈局時用rem單位取代px，從而實現頁面元素大小的動態適配，做出更漂亮整潔的頁面rem佈局的好處：1.頁面整潔2.動態適配缺點：1.需要計算rem， ...
  • 論DOM中文檔和元素的位置大小屬性及其區別
    element.offsetLeft/Top 獲取元素相對於最近的有定位的父元素的坐標，如果沒有有定位的父元素，則是文檔坐標 element.scrollTop/Left 獲取元素滾動捲去的距離 element.offsetWidth/Height 獲取元素的寬度高度（包含邊框） element.c ...
一周排行
    -Advertisement-
    Play Games
  • WPF中輕鬆生成動態圖表：實例詳解(MVVM模式)
    概述：本文代碼示例演示瞭如何在WPF中使用LiveCharts庫創建動態條形圖。通過創建數據模型、ViewModel和在XAML中使用`CartesianChart`控制項，你可以輕鬆實現圖表的數據綁定和動態更新。我將通過清晰的步驟指南包括詳細的中文註釋，幫助你快速理解並應用這一功能。 先上效果： 在 ...
  • .NET 中使用 GaussDB C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • .NET中使用 openGauss C# ORM
    openGauss(GaussDB ) openGauss是一款全面友好開放，攜手伙伴共同打造的企業級開源關係型資料庫。openGauss採用木蘭寬鬆許可證v2發行，提供面向多核架構的極致性能、全鏈路的業務、數據安全、基於AI的調優和高效運維的能力。openGauss深度融合華為在資料庫領域多年的研 ...
  • 輕鬆使用Aspire rabbitmq framework
    概述：本示例演示了在WPF應用程式中實現多語言支持的詳細步驟。通過資源字典和數據綁定，以及使用語言管理器類，應用程式能夠在運行時動態切換語言。這種方法使得多語言支持更加靈活，便於維護，同時提供清晰的代碼結構。 在WPF中實現多語言的一種常見方法是使用資源字典和數據綁定。以下是一個詳細的步驟和示例源代 ...
  • .net事件
    描述（做一個簡單的記錄）： 事件（event）的本質是一個委托；（聲明一個事件： public event TestDelegate eventTest;） 委托（delegate）可以理解為一個符合某種簽名的方法類型；比如：TestDelegate委托的返回數據類型為string，參數為 int和 ...
  • .NET CORE 完美支持AOT 的 ORM SqlSugar 教程
    1、AOT適合場景 Aot適合工具類型的項目使用，優點禁止反編 ，第一次啟動快，業務型項目或者反射多的項目不適合用AOT AOT更新記錄: 實實在在經過實踐的AOT ORM 5.1.4.117 +支持AOT 5.1.4.123 +支持CodeFirst和非同步方法 5.1.4.129-preview1 ...
  • 【UWP】修改清單脫離沙盒運行
    總說周知，UWP 是運行在沙盒裡面的，所有許可權都有嚴格限制，和沙盒外交互也需要特殊的通道，所以從根本杜絕了 UWP 毒瘤的存在。但是實際上 UWP 只是一個應用模型，本身是沒有什麼許可權管理的，許可權管理全靠 App Container 沙盒控制，如果我們脫離了這個沙盒，UWP 就會放飛自我了。那麼有沒... ...
  • 《Effective C++》第三版-4. 設計與聲明（Design and Declarations）
    目錄條款17：讓介面容易被正確使用，不易被誤用（Make interfaces easy to use correctly and hard to use incorrectly）限制類型和值規定能做和不能做的事提供行為一致的介面條款19：設計class猶如設計type（Treat class de ...
  • 從零開始：Django項目的創建與配置指南
    title: 從零開始：Django項目的創建與配置指南 date: 2024/5/2 18:29:33 updated: 2024/5/2 18:29:33 categories: 後端開發 tags: Django WebDev Python ORM Security Deployment Op ...
  • mORMot 1.18 第18章 使用REST/JSON的客戶端/伺服器
    1、BOM對象 BOM:Broswer object model,即瀏覽器提供我們開發者在javascript用於操作瀏覽器的對象。 1.1、window對象 視窗方法 // BOM Browser object model 瀏覽器對象模型 // js中最大的一個對象.整個瀏覽器視窗出現的所有東西都 ...
所有分類