前台页面开发规范

web前台规范和使用说明.doc

下载地址:http://pan.baidu.com/s/1mgzYdxY

java公用类库(nl-common) 

下载地址:http://pan.baidu.com/s/1sjlAKIp

前台页面目录结构

---
|---- controls/ 第三方插件库目录
|---- css/ css样目录
|---- error/ 请求出错处理的页面
|---- images/ 存放图片目录
|---- index.html 
|---- index.jsp 首页
|---- js/ 存放脚本目录(包话自己写的插件)
|---- left.html 左边的树型导航页面
|---- login.jsp 登录页面
|---- not.jsp
|---- not-login.jsp 没有登录处理的页面
|---- not-purview.jsp 没有权限处理的页面
|---- validate-code.jsp 生成验证码页面
|---- WEB-INF
|---- WEB-INF/common/ 存放公用部分页面
|---- WEB-INF/content/ 存放jsp页面目录
|---- WEB-INF/tag/ 存放定义权标签
|---- WEB-INF/urlrewrite.xml 地址重定向的配置文件
|---- WEB-INF/web.xml web项目配置文件

在首页或独立页面的引入css和js 的规范

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- 每个页必须是UTF-8编码 -->
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <meta http-equiv="x-ua-compatible" content="ie=8" /><!-- 高于IE8版本兼容IE8版本,解决布局问题 -->
 <title>标准web例子——首页</title>
 <!-- 引入样式 --> <!-- 为了提高性能把引入样式放在页面的前面 -->
 <link rel="stylesheet" type="text/css" href="/baseweb-webapp/controls/operamasks-ui/operamasks-ui-2.0/css/default/om-default.css" media="all"/>
 <link rel="stylesheet" type="text/css" href="/baseweb-webapp/controls/jquery-loadmask/jquery.loadmask.css" media="all"/>
 <link rel="stylesheet" type="text/css" href="/baseweb-webapp/css/all.css" media="all"/>
</head>
<body>
 <!-- 页面的内容 -->
</body>
<!-- 引入脚本 --> <!-- 为了提高性能把引入样式放在页面的后 -->
<script type="text/javascript" src="/baseweb-webapp/controls/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/baseweb-webapp/controls/jquery-loadmask/jquery.loadmask.min.js"></script>
<script type="text/javascript" src="/baseweb-webapp/js/common.js"></script>
<script type="text/javascript" src="/baseweb-webapp/controls/operamasks-ui/operamasks-ui-2.0/js/operamasks-ui.min.js"></script>
<script type="text/javascript" src="/baseweb-webapp/js/my-controls/om-selectdialog.js"></script>
<script type="text/javascript" src="/baseweb-webapp/js/my-controls/upload.js"></script>
<script type="text/javascript" src="/baseweb-webapp/js/operamasks-ui-extend.js"></script>
<script type="text/javascript" src="/baseweb-webapp/controls/jquery-validation/validate.addmethod.js"></script>
<script type="text/javascript" src="/baseweb-webapp/controls/jquery-validation/messages_cn.js"></script>
<script type="text/javascript">
/** 页面写的脚本 */
</script>
</html>

项目的首页index.jsp代码:

<%@ page language="java" errorPage="/WEB-INF/common/exception.jsp" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
 <meta http-equiv="x-ua-compatible" content="ie=8" />    
 <title>标准web例子——首页</title>
 <script type="text/javascript">
 if (window.top!=window.self){<%-- 防止用iframe攻击项目  --%>
  window.top.location.href=window.self.location.href;
 }
 </script>
 <%@ include file="/WEB-INF/common/resources/css/operamasks-ui.jsp"%>
 <%@ include file="/WEB-INF/common/resources/css/jquery-loadmask.jsp"%>
 <link rel="stylesheet" type="text/css" href="${basePath }/css/all.css" media="all"/>
</head>
<body>
    <div id="north-panel">
     <div class="logo"></div>
  <div class="topRight">
   <span>当前用户:<a><%=com.nenglong.baseweb.webapp.util.UserUtil.getLoginUserAccount(request)%></a></span>
   |<span><a href="javascript:;" onclick="updatePassword()">修改密码</a></span>
   |<span><a href="javascript:;" onclick="logout()">退出</a></span>
  </div>
    </div>
    <div id="east-panel">
     <div id="accordionId"></div>
    </div>
    <div id="center-panel"></div>
</body>
<%@ include file="/WEB-INF/common/resources/js/jquery.jsp"%>
<%@ include file="/WEB-INF/common/resources/js/jquery-loadmask.jsp"%>
<script type="text/javascript" src="${basePath }/js/common.js"></script>
<%@ include file="/WEB-INF/common/resources/js/operamasks-ui.jsp"%>
<script type="text/javascript" src="${basePath }/js/operamasks-ui-extend.js"></script>
<%@ include file="/WEB-INF/common/resources/js/jquery-validation-addmethod-messages.jsp"%>
<script type="text/javascript">
 /*修改密码*/
 function updatePassword(){
  if($("#password-dialog").size()==0)
   $('<div id="password-dialog" class="dialogUI"></div>').appendTo("body");
     
  nengLongOpenDialog(
   "#password-dialog",
   {url:"${basePath }/user/account!passwordUI.do"},
   {title:"修改密码", width:500}
  );
 }
 
 /*退出*/
 function logout(){
  nengLongConfirm({
   title:"确认退出系统", content:"确定退出系统吗?",
   onClose:function(value){
    if(value){
     top.location.href="${basePath }/privilege/login!logout.do";
    }
   }
  });
 }
 /*加载Url的结果到主面板里*/
 function mainLoadUrl(url, title){
  var panel="#center-panel", opt;
  if(typeof url=="string"){
   url=url.replace(/^[/]+/,"");
   opt={url:url};
  }else if(typeof url=="object"){
   opt=url
  }
  nengLongLoad(panel, opt);
  $(panel).omPanel("setTitle", title);
 }
 
 $(function () {
  $('body').omBorderLayout({
   spacing:2, fit:true,
   panels:[
    {id:"north-panel", region:"north", header:false},
     {id:"center-panel", region:"center", title:"桌面"},
     {id:"east-panel", collapsible:true, title:"菜单导航", region:"west", width:200, resizable:true}
   ]
        });
  $.ajax({
   type:"GET", dataType:"html", url:"${basePath }/left.html",
   success:function(data){
    var myAccordion=$("#accordionId");
    try{
     myAccordion.html(data);
    }catch(ex){
     myAccordion.html("");
    }
   }
  });
 });
</script>
</html>


你可能感兴趣的:(前台页面开发规范)