A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 谷粒姐姐 于 2018-3-12 11:59 编辑

四、 后台管理系统界面通用解决方案
错误:java.net.BindException: Address already in use: JVM_Bind <null>:8080
解决:

cmd 窗口 --- 执行 netstat -ano 查看哪个进程占用端口 – 在任务管理器 结束进程
优先关闭 java 进程 ,大多是重复启动 tomcat 造成
1. 后台管理系统界面分析



界面效果 可以使用 frameset 框架来完成布局正文内容两种实现方案
1、 使用 ajax 加载内容 ,很难实现独立刷新

2、 嵌入 iframe ,实现独立刷新
2jQuery EasyUI 下载分析



下载 jQuery EasyUI
网址: http://www.jeasyui.com/download/list.php

如果 jQuery EasyUI 不用于商业用途,下载免费版,用于商业开发 购买收费版课程版本: 1.3.2 ,        从 1.2.3 版本开始用于商业
分析 jQuery Easyui 目录结构


easyui 依 赖 jquery 的 js
jquery.easyui.min.js 所有插件功能 ==== easyloader.js + plugins 所有插件
在项目中导入 easyui
• <!-- 导入 jquery 核心类库 -->
<script type="text/javascript"src=“./js/jquery-1.8.3.js"></script>
• <!-- 导入 easyui 类库 -->
<script type="text/javascript"src=“.js/easyui/jquery.easyui.min.js"></script>
<!– 导入默认主题 CSS 文件-->
<link id="easyuiTheme"rel="stylesheet"type="text/css" href=“.js/easyui/themes/default/easyui.css">
<!– 导入图标 CSS 文件-->
<link rel="stylesheet" type="text/css" href=“.js/easyui/themes/icon.css">
<!– 导入国际化信息文件-->
<script
src=“./js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
themes 目录说明


3. 编写主页架构核心代码
3.1 . 主页布局方案 layout
这个布局容器,有五个区域:北、南、东、西和中心。 他中心地区面板是必需的, 但是边缘地区面板是可选的。每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建立复杂的布局,他想要的。
基于<body> 或者 <div> 进行布局


3.2 . 西部区域折叠面板 accordion
1、对折叠面板区域 div 设置 class="easyui-accordion"
2、在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定设置 title 属性)


3、设置面板属性 fit 为 true,自适应父容器大小

3.3 . 中心区域选项卡面板 tabs
1、        对选项卡面板区域        div               设置        class="easyui-tabs" 2、 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title)
3、 设置面板 fit 为 true ,自适应父容器大小
4、 设置选项卡 closable 为 true ,添加可关闭按钮
5、通过超链接,点击后,添加新的选项卡


语法: 页面对象.easyui 插件(方法名, 参数) ;



使用 jquery 语法,为超链接 绑定一个点击事件

页面选项卡面板代码
3.4 . 编写树形菜单 使用 ztree

1、 下载 ztree 插件包 ,解压

all 所有功能 == core 核心功能 + excheck 勾选功能 + exedit 编辑功能 + exhide 隐藏功能


2、 在页面中引入 ztree
<!-- 引入 ztree -->
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/>
3、 通过 ztree 制作树形菜单两种数据格式
1) 标准 json 数据





2)简单 json 数据



在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号
第一步:在页面显示菜单位置,添加 <ul>设置 class=”ztree”


第二步:开启简单数据格式支持


第三步:编写树形菜单数据



第四步:生成树形菜单

3.5 . 将树形菜单和选项卡整合
分析 ztree 节点自带 url 属性,无法满足业务需求
1、 添加自定义属性 page

2、 为 ztree 每个树形节点,添加点击事件




Tabs 选项卡 API



五、 JQueryEasyui相关知识讲解
1.        系统主页选项卡菜单强化1、        使用 jQuery Easyui 提供 menu 菜单

2、 在选项卡右键显示菜单
Tabs 选项卡面板



右键阻止浏览器默认菜单显示


3、 对菜单项添加图标 通过 iconCls 属性指定图标样式所有图标有 icon.css 文件控制的


作业:完成关闭当前窗口、关闭其它窗口、关闭全部窗口 代码实现
2.        下拉菜单 menubutton的使用
1、 在页面提供超链接 ,设置 class=”easyui-menubutton”



2、编写子菜单 div 元素


3、 设置下拉菜单超链接 menu 属性,指向下拉菜单 div 的 id



3.        消息窗口 messager的使用
3.1 . 警告窗口


3.2 . 确认窗口


3.3 . 输入窗口


3.4 . 右下角窗口



3.5 . 进度条窗口





0 个回复

您需要登录后才可以回帖 登录 | 加入黑马