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,如需转载请自行联系原作者
相关文章
|
15天前
|
前端开发 数据可视化 JavaScript
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)
40 6
|
1月前
|
资源调度 前端开发 测试技术
前端工程化实践:从零搭建现代化项目构建流程
【4月更文挑战第6天】本文介绍了前端工程化的概念和重要性,包括模块化、自动化、规范化和CI/CD。接着,讨论了选择合适的工具链,如包管理器、构建工具和测试框架。然后,详细阐述了如何从零开始搭建一个基于React的现代化项目构建流程,涉及初始化、代码规范、测试、CSS处理、代码分割和CI/CD配置。最后,提到了持续优化与迭代的方向,如性能优化、类型检查和微前端。通过这样的实践,开发者可以提升开发效率和代码质量,为项目长远发展奠定基础。
39 0
|
2月前
|
资源调度 前端开发 JavaScript
构建高效前端项目:现代包管理器与模块化的深度解析
【2月更文挑战第21天】 在当今快速演变的前端开发领域,高效的项目管理和代码组织已成为成功交付复杂Web应用的关键。本文将深入探讨现代前端包管理器如npm, yarn和pnpm的工作原理,以及它们如何与模块化编程实践(例如CommonJS、ES6模块)协同工作以优化开发流程。我们将剖析这些工具的内部机制,了解它们如何解决依赖冲突,提高安装速度,并保证项目的健壮性。同时,本文还将介绍模块化编程的最佳实践,包括代码拆分、重用和版本控制,帮助开发者构建可维护且性能卓越的前端项目。
|
2月前
|
缓存 前端开发 JavaScript
Vite 构建流程大揭秘:快速构建前端项目的秘密武器
Vite 构建流程大揭秘:快速构建前端项目的秘密武器
|
2月前
|
前端开发 JavaScript jenkins
构建高效前端项目:从模块化到自动化
【2月更文挑战第13天】 随着Web技术的不断进步,前端项目的复杂性日益增加。为了确保可维护性和性能,前端工程师必须采用模块化和自动化的策略来优化开发流程。本文将探讨如何使用现代前端工具和最佳实践来构建一个高效的前端项目架构,包括模块打包、代码分割和持续集成等方面。
|
1月前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
143 0
|
1天前
|
资源调度 前端开发
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
13 0
|
1天前
|
前端开发 JavaScript API
flowable流程移植新项目前端问题汇总
flowable流程移植新项目前端问题汇总
|
4天前
|
JSON 前端开发 搜索推荐
BoostCompass( http_server 模块 | 项目前端代码 )
BoostCompass( http_server 模块 | 项目前端代码 )
23 4
|
12天前
|
机器学习/深度学习 前端开发 数据可视化
数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面
数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面