lemon oa前端页面——由user-base-list谈项目组织

简介:

content


user-base-list.jsp
中指定
<%pageContext.setAttribute("currentHeader", "user");%>  // currentHeader值在/header/user.jsp中会被覆盖,在/header.jsp中起作用,
<%pageContext.setAttribute("currentMenu", "user");%>  // 在/menu/user.jsp页面中会影响哪些accordion-body被收缩


主要布局是
  <body>
    <%@include file="/header/user.jsp"%>


    <div class="row-fluid">
   <%@include file="/menu/user.jsp"%>  // 2个栅格


   <!-- start of main -->
      <section id="m-main" class="span10">  // 10个栅格


      </section>
   <!-- end of main -->
 </div>


  </body>


--------------------------------------------------------------------------------------------


header
/header/user.jsp中
<%pageContext.setAttribute("currentHeader", "scope");%>
<%@include file="/header.jsp"%>


/header.jsp中,主要定义页面头部,功能是导航菜单(首页,个人事务,统计报表,系统管理(下拉菜单)),用户管理(用户密码修改、用户退出)和未读消息三块
<ul class="nav">
<li class="divider-vertical"></li>
<li class="currentHeader==dashboard?active:′′"><ahref="currentHeader==′dashboard′?′active′:″"><ahref="{scopePrefix}/dashboard/dashboard.do">首页</a></li>
<li class="currentHeader==bpmworkspace?active:′′"><ahref="currentHeader==′bpm−workspace′?′active′:″"><ahref="{scopePrefix}/bpm/workspace-home.do">个人事务</a></li>
<li class="currentHeader==report?active:′′"><ahref="currentHeader==′report′?′active′:″"><ahref="{scopePrefix}/report/chart-mostActiveProcess.do">统计报表</a></li>
<li class="dropdown {currentHeader == 'scope' ? 'active' : ''}">  <a data-toggle="dropdown" class="dropdown-toggle" href="#">系统管理 <b class="caret"></b></a>  <ul class="dropdown-menu">  </ul> </li> </ul> 可以看到currentHeader是如何起作用的。   未读消息就是一个跳转到<a href="{currentHeader == 'scope' ? 'active' : ''}">  <a data-toggle="dropdown" class="dropdown-toggle" href="#">系统管理 <b class="caret"></b></a>  <ul class="dropdown-menu">  </ul> </li> </ul> 可以看到currentHeader是如何起作用的。   未读消息就是一个跳转到<a href="{scopePrefix}/msg/msg-info-listReceived.do">的链接,
然后页面会定时刷新<i id="unreadMsg" class="badge"></i>,显示有几条未读消息(调用MsgResource类中的unreadCount()方法)


--------------------------------------------------------------------------------------------


menu
/menu/user.jsp是用户管理的菜单,
是在页面的左侧边,<aside id="m-sidebar" class="accordion span2" data-spy="affix" data-offset-top="100">,span2说明占2个栅格的宽度
主要是一个<div class="accordion-group">,然后下面有一个<footer id="m-footer" class="text-center">
在<div class="accordion-group">中有<div id="collapse-user" class="accordion-body collapse ${currentMenu == 'user' ? 'in' : ''}">
然后在/lemon/webapp/s/bootstrap/3.2.0/css/bootstrap.css中有定义
.collapse {
  display: none;
}
.collapse.in {
  display: block;
}

本文转自二郎三郎博客园博客,原文链接:http://www.cnblogs.com/haore147/p/5213528.html,如需转载请自行联系原作者
相关文章
|
20天前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
4天前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(完结)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!(完结)
12 0
|
3天前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
14 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
4天前
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法,并提供了详细的示例代码和运行效果。
13 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
|
3天前
|
前端开发 数据库
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置到项目中的静态资源下、图片可以在前端回显(二))
这篇文章是关于如何在SpringBoot+Vue+token的环境下实现表单和图片上传的优化篇,主要改进是将图片保存位置从磁盘指定位置改为项目中的静态资源目录,使得图片资源可以跨环境访问,并在前端正确回显。
|
4天前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(17)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!
10 0
【前端学java】java基础练习缺少项目?看这篇文章就够了!(17)
|
4天前
|
存储 前端开发 JavaScript
Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
本文介绍了使用Springboot后端和Vue前端实现图片与表单数据一起提交到后端,并保存图片地址到数据库,然后展示存储的图片到前端Vue页面的完整流程。
Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
|
15天前
|
数据采集 资源调度 JavaScript
Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
【8月更文挑战第4天】Node.js 适合做高并发、I/O密集型项目、轻量级实时应用、前端构建工具、命令行工具以及网络爬虫和数据处理等项目
30 5
|
19天前
|
Web App开发 开发框架 编解码
在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
|
19天前
|
开发框架 前端开发 JavaScript
在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理