中小后台系统UI框架--EasyUI

2021-02-08 作者：匿名阅读：1797次

前言

本文重点解决中小后台系统UI框架--EasyUI问题,希望能够帮助到你

后台开发人员不擅长前端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>

本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。

本文地址：http://www.xlkjgs.com/notes/js/2332.html

W 导出为.doc文档