85-002-15 利用EasyUI设计一个后台页面的菜单显示
2016-06-29 14:02
405 查看
图文版:http://note.youdao.com/yws/public/redirect/share?id=abc20790e48da5130e227d9390e4df92&type=false
资源文件下载 https://yunpan.cn/OcRaTMHR3NWIIf 访问密码
4b2c
15.1 首先编辑EasyUI后台首页
aindex.jsp
15.2 然后定义被加载的页面
query.jsp
两个页面分别所属的位置
资源文件下载 https://yunpan.cn/OcRaTMHR3NWIIf 访问密码
4b2c
15.1 首先编辑EasyUI后台首页
aindex.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- jspf也是jsp页面格式的一种,即jsp一个小片段 --> <%@ include file="/public/head.jspf" %> <style type="text/css"> #menu{ width: 200px ; } #menu ul{ padding: 0px ; margin:0px ; list-style: none; } #menu ul li{ border-bottom: 1px solid white ; } #menu ul li a{ display: block; text-decoration:none; padding: 5px ; color:white; background-color: #00a6ac ; } #menu ul li a:hover{ background-color: #008792; } </style> <script type="text/javascript"> $(function(){ //对于a元素点击事件只对含有属性title的a元素点击有效 $("a[title]").click(function(){ var text = $(this).text() ; //获取元素a中的text文本 var href= $(this).attr("title") ; //判断指定内容(比如‘类别管理’)的tabs标签是否存在 if($("#tt").tabs("exists",text)){ /* 如果存在指定tabs的对象则切换到这个tabs上 */ $("#tt").tabs("select",text) ; }else{ /* 否则就创建一个指定标题的tabs标签*/ $("#tt").tabs("add",{ title:text, //也可以通过URL来定义一个页面显示在tabs或panel组件内容中 //与此同时需要注意的是其填充加载的内容仅只包含body节点以内的内容,其他节点无效比如<head>节点 //href:"send_category_query.action" //通过下面的形式却可以加载整个页面的内容 content:'<iframe src="${shop}/send_category_query.action" width="100%" height="100%" frameborder="0"/>', closable:true }) ; } }); }); </script> </head> <body class="easyui-l c794 ayout"> <div data-options="region:'north',title:'后台管理首页',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'系统操作'" style="width:200px;"> <!-- 此处显示左侧系统菜单 --> <div id="menu" class="easyui-accordion" data-options="fit:true"> <div title="基本操作"> <ul> <li><a href="#" title="send_category_query.action">类别菜单</a></li> <li><a href="#">商品菜单</a></li> </ul> </div> <div title="其他操作"> <ul> <li><a href="#">类别菜单</a></li> <li><a href="#">商品菜单</a></li> </ul> </div> </div> </div> <div data-options="region:'center',title:'后台操作页面'" style="padding:1px;background:#eee;"> <div id="tt" class="easyui-tabs" data-options="fit:true"> <div title="系统缺省页面" style="padding:10px;"> 此处显示系统配置环境信息 </div> </div> </div> </body> </html> |
query.jsp
<html> <head> <!-- jspf也是jsp页面格式的一种,即jsp一个小片段 --> <%@ include file="/public/head.jspf" %> 页面jquery.jsp:head内容 </head> <body> 页面jquery.jsp:body内容 </body> </html> |
相关文章推荐
- Leetcode-unique-binary-search-trees
- AYUI快速开发2016-6-29 ,全部免费,WPF普遍之路梦想开启
- GitHub user guide:Hello world
- [绍棠]iOS开发-UITableViewCell(UICollectionViewItem)需要两个手指点击或者长按才可以选中,解决办法
- LeetCode 307 Range Sum Query - Mutable(范围和查询-可变)
- 85-002-13 基于EasyUI搭建前端页面的后台
- 85-002-10 在web项目中使用RequestAware接口
- fuel8安装过程简单回顾
- UITableView回调和table相关成员方法详解
- EasyUi的ComboBox(下拉列表框)
- android studio 的 Gradle build finished with 1 error(s) 问题
- 使用照相机或者相册
- 【UI】【View】MotionEvent类详解
- ios上 更改 状态栏(UIStatusBar)的颜色
- UIAlertController简单使用
- Access restriction: The method 'CharacterEncoder.encode(byte[])' is not API (restriction on required
- Request.getparameternames 获取form表单里面所有的请求参数 。 返回一个Enumeration类型的枚举.
- 集成友盟微社区,自定义ui
- UICollectionView实现头部漂浮的效果
- UIScrollView 使用