基本模板
页面基本结构,保障产品组件正常显示
<!DOCTYPE html>
<html class="over_hidden h100b">
<head>
<title></title>
</head>
<body class="over_hidden h100b">
</body>
</html>
<!DOCTYPE html>必须放到页面第一行
<html>和<body>“必须”含有如下class
"over_hidden h100b"是实现界面高度自适应的基础样式。
目录结构
新框架
seeyon/
├── common/
│ ├── all-min.css /*公用样式包*/
│ └── js/
│ ├── v3x-debug.js /*v3x依赖js*/
│ └── ui/ /*组件js*/
│ ├── seeyon.ui.layout-debug.js
│ ├── seeyon.ui.grid-debug.js
│ └── ...
│── skin/
│ ├── default/ /*默认皮肤*/
│ │ └── skin.css
│ └── GOV_red/ /*政务皮肤*/
│ └── skin.css
└── main/
├── login/ /*【登陆页皮肤】*/
│ ├── default/ /*A8*/
│ ├── default-A6/ /*A6*/
│ ├── default-A6s/ /*A6s*/
│ ├── default-A6-U8/ /*A6-U8*/
│ ├── default-A8s-U8/ /*A8s-U8*/
│ ├── default-G6/ /*政务*/
│ └── scroll/ /*多图*/
├── frames/
│ ├── defaultV51
│ │ └── index.css /*首页框架-公用样式*/
│ └── desktop
│ └── index.css /*工作桌面-公用样式*/
└── skin/
├── frame /*【首页框架皮肤】*/
│ ├── harmony /*和谐之美(默认)*/
│ ├── peaceful /*宁静之韵*/
│ ├── wisdom /*智慧之美*/
│ ├── GOV_red /*政务-红*/
│ └── GOV_blue /*政务-蓝*/
└── desktop /*【工作桌面皮肤】*/
├── harmony /*和谐之美(默认)*/
├── peaceful /*宁静之韵*/
├── wisdom /*智慧之美*/
├── GOV_red /*政务-红*/
└── GOV_blue /*政务-蓝*/
老框架
seeyon/
└── common/
├── skin/
│ ├── default/
│ │ ├── skin.css /*默认样式*/
│ │ └── images
│ │ └── xmenu
│ │ └── toolbar.trip.png /*toolbar定位图片*/
│ └── GOV_red/
│ └── skin.css /*政务样式*/
└── js/
└── V3X.js /*组件js*/
浏览器支持
功能支持
IE7+、Chrome、Firefox、360、Safari。
页面效果最佳
IE9+、Chrome、Firefox、360、Safari。低版本浏览器抛弃圆角、过度动画等效果。IE11采用降级到IE9显示处理方式。
js命名空间
javascript模块化的第一条规则：一个模块不应该为全局名字空间添加多于一条的标记.通俗的讲：除了给全局命名空间定义一个模块的命名空间，其它的你一句代码都不要写
1.防止全局变量被覆盖
2.减少全局变量个数
//js文件名和命名空间名保持一致
//全局变量和函数保存在命名空间中
//Collaboration.js
var Collaboration;
if(!Collaboration) Collaboration = {};//第一级域名
Collaboration.xxx = xxx;//变量
Collaboration.函数名1=function(){ //函数
}
//---------------------------------------------------------------------------------------
//如果js文件名相同，则需要将不同的js放到不同的目录，则需要定义多级
var com;
if(!com) com={};//如果com不存在，则新生成一个
else if(typeof com!="object"){//如果已存在，但不是一个对象，则抛出一个异常
throw new Error("com already exists and is not an object");
}
if(!com.util) com.util={};//如果com.util不存在则新生成一个
else if(typeof com.util!="object"){//如果com存在，但不是一个对象，则抛出一个异常
throw new Error("com.util already exists and is not an object");
}
if(!com.util.Collaboration){//如果com.util.ModuleClass存在，则直接抛出异常
throw new Error("com.util.Collaboration already exists");
}
com.util.Collaboration = {//在com.util.Collaboration不存在的情况下，我们才能正常使用在此命名空间下定义的代码
函数1:function(){ 函数体;},
函数2:function(){ 函数体;}
};
前端开发规范
符合 web 标准, 语义化 html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。
1.命名规范
驼峰式命名法：是指混合使用大小写字母来构成单词的名称（适用于两个不同的单词链接如：rightContent）[用于js中]
下划线命名法：两个单词间用”_”相连，如 menu_title（适用于上下级关系，可以准确表示两个单词间的层级关系。)[用于css或js中]
2.文件命名规范
Html、css、js、images 文件命名：全英文小写命名。
3.Html 书写规范
声明类型统一<!DOCTYPE html> ,新开发框架在html上方引入common.jsp
标签和属性一律小写，属性值用双引号包括
给区块代码加上注释, 方便后台添加功能
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/common.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
</head>
<body>
<div id="layout" class="comp" comp="type:'layout'">
<div class="layout_north bg_color" id="north">
<%-- 如果是业务生成器创建的一个列表菜单，则不显示面包屑 --%>
<c:if test="${param.srcFrom ne 'bizconfig' }">
<div class="comp" comp="type:'breadcrumb',comptype:'location',code:'F01_listDone'"></div>
</c:if>
<div id="toolbars"></div>
</div>
<div class="layout_center over_hidden" id="center">
</div>
</div>
</body>
</html>
4.js书写规范
在变量定义的上一行用双斜杠（//）注释,注释单占一行
在方法头部详细说明该方法的功能，以及所传参数的意义
js书写规范参考java规范注意换行和分号
//显示部门，默认是
var displayDepartment = true;
//显示组，默认是
var displayTeam = true;
//显示职务，默认否
var displayOtype = false;
/**
* 普通选人的对话框1
* 参数分别为 相对根目录路径，初始化要显示的人员，是否多选
* @param path1 路径
* @param initPerson1 初始化显示人员
* @param mutiple1 是否多选
*/
function selectPerson1(path1,initPerson1,mutiple1){
path = path1;
initPerson = initPerson1;
mutiple = mutiple1;
return showSimpleDialog();
}