中小後臺系統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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類