在讲公共jsp之前，先说一下Bootstrap和Ace
BootStrap在过去的几年非常火啊，火的原因就是响应式框架，一次开发，适应PC端、移动端。虽然口号是一次开发，但是实际生产中还是分别对应PC和移动做开发的，只是基础框架一样，都是BootStrap。
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
来源于百度百科
我个人感觉BootStrap好处就是提供了一系列好看的组件，比如下拉框、tab框、弹出框等等，样式相对比以前的html+js做的，要绚丽很多，而且基于BootStrap又衍生出一系列的组件，比如JqueryUI、upload、switch等等，组成了一个BootStrap大家族，这才使BootStrap真正好用起来。为了提供更全面的组件整合，出现了很多UI框架，比如一会用到的ACE、Metronic、FlatUI、SBAdmin等等，都是基于BootStrap做的封装，做了很多小例子可以直接用。
这套东西还是不错的，它是对BootStrap的轻度封装，同时引用了一系列的组件，用起来比较方便，而且是蓝色系，符合国人多数的审美观。
页面的公共jsp包括以下几个部分：
1、公共引用css
2、公共引用js
3、header
4、menu
5、footer
下面依次讲一下各个公共引用
以404页面做为例子进行js、css等相关引入，这个比较简单，引入过程中做了一些删减。
示例页面.png
1、ACE相关js和css引入
ACE相关.png
ACE相关的很多，不可能全都导入进来，只能是按需加入。
这里面首先加入了ACE基础的，路径在/assets/ace1.4/下面，包括avatarts、css、fonts、images、js这几个文件夹，第二是引用ACE相关组件，路径是/assets/ace1.4/components/下面，包含的几个组件如下：
1、bootbox：弹出框，封装了bootstrap原生的弹出框，简单一些
2、boostrap：bootstrap原生的一些组件
3、font-awesome：图标库
4、jquery-ui：jqueryUI相关的一些组件，比如tabs
5、jquery-validation：表单校验
6、jquery：如果非IE浏览器可以引用这个jquery，jquery开发了一个不兼容ie的版本
7、juery.1x：如果是IE浏览器，还得引用1x版本
这里面额外加了一个datetimepicker，日期选择框。
当然后面还会引入更多的，比如datatable、比如echarts等等，用到的时候再加进来。
2、styles.jspf
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/bootstrap.css" />
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/components/font-awesome/css/font-awesome.css" />
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/ace-fonts.css" />
<!-- ace styles -->
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="${staticServer}/assets/ace1.4/css/ace-skins.css" />
<link rel="stylesheet" type="text/css" href="${staticServer }/assets/datetimepicker2.1.9/jquery.datetimepicker.css"/>
可能有些人会奇怪，为啥后缀不是.jsp，而是.jspf呢，其实后缀是什么无所谓，jspf就是和其他jsp区分一下，是用于公共引入的
3、scripts.jspf
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--[if !IE]> -->
<script src="${staticServer}/assets/ace1.4/components/jquery/dist/jquery.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="${staticServer}/assets/ace1.4/components/jquery.1x/dist/jquery.js"></script>
<![endif]-->
<script src="${staticServer}/assets/ace1.4/components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="${staticServer}/assets/ace1.4/components/jquery-ui/jquery-ui.js"></script>
<!-- ace scripts -->
<script src="${staticServer}/assets/ace1.4/js/ace-elements.js"></script>
<script src="${staticServer}/assets/ace1.4/js/ace.js"></script>
<script src="${staticServer}/assets/common/js/common.js"></script>
<!-- plugins -->
<script src="${staticServer}/assets/ace1.4/components/bootbox/bootbox.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript"> ace.vars['base'] = '/'; </script>
<!-- page specific plugin scripts -->
<script src="${staticServer }/assets/datetimepicker2.1.9/jquery.datetimepicker.js" type="text/javascript"></script>
<script src="${staticServer }/assets/ace1.4/components/jquery-validation/dist/jquery.validate.js" type="text/javascript"></script>
<script src="${staticServer }/assets/ace1.4/components/jquery-ui/jquery-ui.js"></script>
这里面只是引用了最基本的js
4、header.jspf
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="navbar" class="navbar navbar-default ace-save-state navbar-fixed-top">
<div class="navbar-container ace-save-state" id="navbar-container">
<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
<span class="sr-only">Toggle sidebar</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<div class="navbar-header pull-left">
<!-- #section:basics/navbar.layout.brand -->
<a href="${dynamicServer }/index.htm" class="navbar-brand"> <small><i class="fa fa-leaf"></i> ${webTitle} </small>
</a>
</div>
<!-- #section:basics/navbar.dropdown -->
<div class="navbar-buttons navbar-header pull-right" role="navigation">
<ul class="nav ace-nav">
<li class="purple dropdown-modal">
</li>
<!-- #section:basics/navbar.user_menu -->
<li class="light-blue dropdown-modal"><a data-toggle="dropdown" href="#" class="dropdown-toggle"> <img class="nav-user-photo"
src="${staticServer }/assets/ace1.4/images/avatars/user.jpg" alt="Jason's Photo" /> <span class="user-info"> <small>
系统管理员,</small> 张三
</span> <i class="ace-icon fa fa-caret-down"></i>
</a>
<ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
<li><a href="${dynamicServer }/toUpdatePass.htm"> <i class="ace-icon fa fa-cog"></i> 修改密码
</a></li>
<li class="divider"></li>
<li><a href="${dynamicServer }/logout.htm"> <i class="ace-icon fa fa-power-off"></i> 退出
</a></li>
</ul></li>
</ul>
</div>
</div>
</div>
这里面
5、menu.jspf
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- #section:basics/sidebar -->
<div id="sidebar" class="sidebar responsive ace-save-state">
<script type="text/javascript">
try {
ace.settings.loadState('sidebar')
} catch (e) {
}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<!-- #section:basics/sidebar.layout.shortcuts -->
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
<!-- /section:basics/sidebar.layout.shortcuts -->
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>
</div>
</div><!-- /.sidebar-shortcuts -->
<ul class="nav nav-list">
<li class="">
<a href="index.html">
<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text"> Dashboard </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-desktop"></i>
<span class="menu-text">
系统管理
</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="typography.html">
<i class="menu-icon fa fa-caret-right"></i>
资源管理
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="elements.html">
<i class="menu-icon fa fa-caret-right"></i>
角色管理
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="buttons.html">
<i class="menu-icon fa fa-caret-right"></i>
用户管理
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
</ul><!-- /.nav-list -->
<!-- #section:basics/sidebar.layout.minimize -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state"
data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<!-- /section:basics/sidebar.layout.minimize -->
</div>
这一块的代码非常多，把菜单做了一下删减，只保留系统管理、资源管理、角色管理、用户管理几个。
6、footer.jspf
这个先不设计了，内容页面只写内容，不留下方的版权信息了。
网友评论