1、Layout布局的选项
2、Accordion手风琴的选项
3、Tabs选项卡的方法
4、后台布局界面
5、WebContent/jsp/layout_001.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String root = request.getContextPath(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>布局案例</title> <!-- 引入外部样式 --> <link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" /> <!-- 引入easyui依赖库 --> <script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script> <link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" /> <script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script> <script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function() { /* 1.后台布局典型案例 1.1 整个布局分为【上、左、右】三部分 1.2 左边一般为菜单栏,region="west",嵌入easyui-accordion手风琴组件 1.3 右边一般为内容区,region="center",嵌入easyui-tabs选项卡组件 1.4 easyui-layout一般设置在<body>标签上,以充满整个区域 2.layout布局组件的属性说明 2.1 title:layout panel的标题文字 2.2 region:定义layout panel的位置,其值是下列之一:north、south、east、west、center 2.3 split:true就显示拆分栏,用户可以用它改变panel的尺寸 2.4 iconCls:在panel头部显示一个图标的CSS类 2.5 fit:true表示自适应父容器 2.6 closable:true表示该选项卡可关闭 */ $('a[title]').click(function(){ var src = $(this).attr('title'); var title = $(this).html(); if($('#tt').tabs('exists',title)){ $('#tt').tabs('select',title); } else { $('#tt').tabs('add',{ title:title, content:'<iframe frameborder=0 style=width:100%;height:100% src=<%=root %>/' + src +' ></iframe>', closable:true }); } }); }); </script> </head> <body class="easyui-layout"> <div region="north" title="布局案例" split="false" style="height:100px;"></div> <div region="west" split="true" title="导航菜单" style="width:200px;"> <div id="aa" class="easyui-accordion" fit=true> <div title="用户管理" iconCls="icon-user" style="overflow:auto;padding:10px;" selected="true" > <a title="jsp/datagrid_004.jsp">用户列表</a><br/> <a title="jsp/form_004.jsp">添加用户</a> </div> <div title="岗位管理"> </div> <div title="权限管理"> </div> <div title="资源管理"> </div> </div> </div> <div region="center" title="主界面"> <div id="tt" class="easyui-tabs" fit=true style="width:500px;height:250px;"> <div title="首页" closable=true> <div align="center" style="padding-top: 130px;"><font color="red" size="10">欢迎使用后台管理系统</font></div> </div> </div> </div> </body> </html>
相关推荐
想重构之前的校园信息墙项目,又想学习若依项目,就手写了若依并修改了部分功能,于是有了这套后台系统,所以取名为campus Campus 一款简单的后台管理系统,快速开发框架,适合大学生开发毕设,或其他小项目。 使用...
2015大气绿色企业网站中文宽屏版 v3.0 ------------------------- 简 介---------------------------- 系统五大特色: ...降低服务器压力,增强百度收录。...2、高优化:特别针对搜索引擎...8:添加栏目类型,案例展示
Amdash是基于Bootstrap5框架实现的后台管理模板。它有多个仪表盘样式,工作在所有主要浏览器、桌面和所有智能手机设备上。非常易于定制和开发人员友好的HTML5模板。集合与最新jQuery UI组件和bootstrap插件。它可以...
模板中提供了多套登录界面和布局框架方案,同时整理出了后台系统中各类常用的交互元素及组件,可以方便快速的复用到任何中大型系统项目原型方案中。模板框架采用了自适应布局处理,可以在各种屏幕分辨率下达到最佳的...
本套作品是一套比较典型的后台管理系统模板,提供了组织架构、权限设置、员工管理、产品管理、业务设置、字段设置、字典管理、日志管理等功能设计,模板中的大部分功能适用于各类后台管理系统类使用场景,不仅可以...
完整布局 换肤(全局功能,暂时只实现了顶部导航的换肤,后续加上其他模块) 导航菜单 顶部导航(菜单伸缩,全屏功能) 左边菜单(增加滚动条以及适配路由的 active 操作) UI 模块 按钮(antd 组件) 图标(antd 组件并增加...
开发者可通过修改源码中的相关文件,调整页面布局、功能模块等,以满足特定业务场景的需求。同时,我们也提供技术支持服务,协助开发者解决开发过程中遇到的问题。 **四、总结** 此资源包为计算机专业的毕业设计...
5. 管理员后台:管理员可对讲座信息进行增删改查,管理用户预约情况等。 **三、技术实现** 1. 开发语言:主要使用JavaScript、HTML和CSS编写小程序页面。 2. 框架:采用微信小程序原生开发框架,结合云开发实现...
5. **后台管理**:为电影院管理者提供后台管理功能,包括电影排期管理、座位库存管理、销售数据统计与分析等。 **技术实现:** 该系统基于微信小程序平台进行开发,前端采用WXML、WXSS和JavaScript等技术进行页面...
2. **源代码**:基于微信小程序框架开发的完整前端和后端代码,包括页面布局、逻辑处理、数据库操作等。 3. **说明文档**:包含项目配置、环境搭建、API接口调用等详细说明,便于开发者快速上手和二次开发。 **核心...
开发者可以根据自己的业务场景和运营策略,调整页面布局、功能模块和业务逻辑等。 **五、总结** 此资源为微信小程序的汉服租赁平台设计与实现提供了一个完整的解决方案,具有很高的实用价值和参考价值。无论是创业...
为了满足更多的中后台系统的原型方面的设计需求,我们参考了大量的案例并推出了这套全新的设计方案。这套作品保留了自适应布局框架和内联框架链接页面等特性,同时简化了相关的界面布局和交互事件,具有更易应用和...
更精致的界面细节优化改进,非常适合信息化管理后台 主题风格改进,不同的布局风格,菜单及权限体验优化 顶部菜单、分隔菜单、混合菜单的活动状态激活和加载优化改进 树表支持异步的封装,提升展开折叠性能,支持按...
最典型的Google Maps和Gmail等Google服务也正是基于此框架开发的。读者将能够快速掌握GWT的各种开发所涉及到的内容。 /firstgwt/FirstGWT.html 第一个GWT示例 /calculator/TexCalculator.html 个税计算器 第...
> 首页-产品中心-微信运营解决方案-经典案例-关于cynara > 首页中将上述导航条综述显示 采用纵向布局 > 产品中心 - 本系统的核心产品 在前台页面用户登录后可直接使用 > 微信运营解决方案 就是给一些建议 ...
为了满足更多的中后台系统的原型方面的设计需求,我们参考了大量的案例并推出了这套全新的设计方案。这套作品保留了自适应布局框架和内联框架链接页面等特性,同时简化了相关的界面布局和交互事件,具有更易应用和...
2. 系统设计:根据需求设计系统架构、数据库结构、页面布局等; 3. 编码实现:根据设计方案进行编码实现; 4. 测试调试:对系统进行功能测试、性能测试、安全测试等,确保系统的稳定性和安全性; 5. 部署上线
为了满足更多的中后台系统的原型方面的设计需求,我们参考了大量的案例并推出了这套全新的设计方案。这套作品保留了自适应布局框架和内联框架链接页面等特性,同时简化了相关的界面布局和交互事件,具有更易应用和...
没有UI,方便些项目时候直接使用分支包含元素UI后台管理系统演示分支包含Iview UI后台管理系统demo分支包含vux wechat项目demo建议使用master分支(将拆成三个admin),一些工具类的是使用案例,详见使用的组件 ...
警用车辆监控系统后台管理模板,DIV+CSS布局设计,全套模板,包括首页、车辆检索、车辆大数据分析、存档管理、任务管理、布控管理、风险预警、案例融合分析等HTML后台模板页面。