• 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' : ''}"><a href="${scopePrefix}/dashboard/dashboard.do">首页</a></li>
    <li class="${currentHeader == 'bpm-workspace' ? 'active' : ''}"><a href="${scopePrefix}/bpm/workspace-home.do">个人事务</a></li>
    <li class="${currentHeader == 'report' ? 'active' : ''}"><a href="${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="${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;
    }

  • 相关阅读:
    【IoT】IDEA 编译出错 Error running xxx : Command line is too long.Shorten command line
    【可视化】地震剖面道数据可视化绘制思路
    【IoT】使用MQTTBox.exe发送消息到Thingsboard3.3.3上
    【IoT】thingsboard3.3.3测试,使用nodemqtt发送消息
    【IoT】thingsboard3.3.3编译问题解决
    【Postgres】Postgres12帮助手册
    【IoT】发布启动thingsboard3.3.3
    【前端开发】Webpack mars3dvue2electron打包问题
    【可视化】地震数据体Segy文件inline、xline道数据计算获取
    【IoT】thingsboard3.3.3运行启动
  • 原文地址:https://www.cnblogs.com/haore147/p/5213528.html
Copyright © 2020-2023  润新知