ecology8开发规范V.doc_咨信网zixin.com.cn

资源描述

ecology8开发规范 1、关于topTitle上的使用：红色部分的样式不要修改，按照这个格式来 1、按照如下格式定义好toptitle的内容： <table id="topTitle" cellpadding="0" cellspacing="0"> <tr> <td> </td> <td class="rightSearchSpan" style="text-align:right;"> <%if(canEdit){ %> <input type=button class="e8_btn_top" onclick="onSave();" value="<%=SystemEnv.getHtmlLabelName(86, user.getLanguage())%>"></input> <%} %> <%if(HrmUserVarify.checkUserRight("DocSubCategoryAdd:add", user)){ %> <input type=button class="e8_btn_top" onclick="openDialog3(<%=id %>);" value="<%=SystemEnv.getHtmlLabelName(82,user.getLanguage())+SystemEnv.getHtmlLabelName(66,user.getLanguage())%>"></input> <%} %> <input type="text" class="searchInput" name="flowTitle" value="<%=qname %>"/> <span id="advancedSearch" class="advancedSearch">高级搜索</span> <span title="菜单" class="cornerMenu"></span> </td> </tr> </table> <div class="advancedSearchDiv" id="advancedSearchDiv" style="display:none;" > ... </div> 2、页面加载完成时调用如下方法 jQuery("#topTitle").topMenuTitle({searchFn:onBtnSearchClick}); jQuery("#hoverBtnSpan").hoverBtn(); 其中： searchFn参数是提供全文搜索用的方法，传入自己定义的方法名称即可；高级搜索根据情况需要就添加，不需要就不要添加；如果有高级搜索条件，那么所有的条件都请放置在 <div class="advancedSearchDiv" id="advancedSearchDiv" style="display:none;" > ... </div> 中 1.1 高级搜索中底部按钮列的td请按照以下格式书写 <wea:group context="" attributes="{'groupDisplay':'none'}"> <wea:item type="toolbar"> <input type="button" onclick="doRefresh(this)" value="<%=SystemEnv.getHtmlLabelName(197,user.getLanguage())%>" class="e8_btn_submit"/> <input type="button" value="<%=SystemEnv.getHtmlLabelName(2022,user.getLanguage())%>" class="e8_btn_cancel" onclick="resetCondtion();"/> <input type="button" value="<%=SystemEnv.getHtmlLabelName(31129,user.getLanguage())%>" class="e8_btn_cancel" id="cancel"/> </wea:item> </wea:group> 2、高级搜索中的按钮样式应用：取消或者重置按钮，请使用样式e8_btn_cancel，其他按钮请使用样式e8_btn_submit 如： <input type="button" onclick="jQuery('#isentrydetail').val('0');checkSubmit();" class="zd_btn_submit" id="zd_btn_submit" value="保存"> <input type="button" onclick="parentWin.closeDialog();" class="zd_btn_cancle" id="zd_btn_cancle" value="取消"> 3、关于布局和表单基本信息所用的样式问题： a）表单基本信息页的样式请使用ViewForm，如：这种页面请使用<table class="ViewForm"></table> 另外，需要白色背景的td，请添加Field样式，如<td class="Field"></td> b）非表单基本信息布局用的样式请使用LayoutTable，如：上述这种仅仅是布局用的table，请使用<table class="LayoutTable"></table> 4、关于弹出框中的按钮的样式应用：取消或者关闭按钮，请使用样式zd_btn_cancel，其他按钮请使用样式zd_btn_submit 如： <input class="e8_btn_submit" value="搜索" type="submit"> <input value="重置" class="e8_btn_cancel" onclick="resetCondtion();" type="button"> <input value="取消" class="e8_btn_cancel" id="cancel" type="button"> 5、关于弹出框时，弹出层页面需要做的一些特殊处理：为了固定底牌按钮的位置，需要添加一些特殊标志来进行计算具体格式如下(红色部分的格式固定不变)： <body> <%if("1".equals(isDialog)){ %> <div class="zDialog_div_content"> <%} %> //具体内容部分 <%if("1".equals(isDialog)){ %> </div> <div id="zDialog_div_bottom" class="zDialog_div_bottom"> <wea:layout needImportDefaultJsAndCss="false"> <wea:group context="" attributes="{\"groupDisplay\":\"none\"}"> <wea:item type="toolbar"> <input type="button" accessKey=2 id=btnclose value="<%=SystemEnv.getHtmlLabelName(309,user.getLanguage())%>" id="zd_btn_cancel" class="zd_btn_cancle" onclick="dialog.close()"> </wea:item> </wea:group> </wea:layout></div> <script type="text/javascript"> resizeDialog(document); </script> <%} %> </BODY> 6、关于二选一checkbox框的美化使用效果图如下：具体使用如下：引入如下css和js： <link href="/js/checkbox/jquery.tzCheckbox.css" type=text/css rel=STYLESHEET> <script language=javascript src="/js/checkbox/jquery.tzCheckbox.js"></script> 调用以下代码： jQuery(document).ready(function(){ jQuery("input[type=checkbox]").each(function(){ if(jQuery(this).attr("tzCheckbox")=="true"){ jQuery(this).tzCheckbox({labels:['','']}); } }); }); //checkbox框需要增加红色部分的属性 <INPUT type="checkbox" tzCheckbox="true" class=InputStyle name="norepeatedname" value="1" 7、关于页面中间的添加和删除按钮的样式：添加按钮样式：class="addbtn"，删除按钮样式：class="delbtn" <input class="addbtn" accesskey="A" onclick="addNewRow();" title="添加" type="button"> <input class="delbtn" accesskey="E" onclick="deleteSelectedRow();" title="删除" type="button"> 8、关于E8新增的js/css 图片静态资源命名规则新增加的图片资源、js、css文件必须增加_wev8作为后缀，以和E7的文件相区分。引用资源文件的地方也必须加后缀处理。如：如增加一个css文件crudoc，正确的做法：正确：crudoc_wev8.css 错误：crudoc.css 如果要在页面上引用该文件，正确的做法如下：正确：<LINK href="/css/crudoc_wev8.css" type=text/css rel=STYLESHEET> 错误：<LINK href="/css/crudoc.css" type=text/css rel=STYLESHEET> 9、关于公共引用的几个jsp文件的引用规范：老的文件： /systeminfo/init.jsp /systeminfo/TopTitle.jsp /systeminfo/RightClickMenuConent.jsp /systeminfo/RightClickMenu.jsp 在E8中全部重命名为以下文件： /systeminfo/init_wev8.jsp /systeminfo/TopTitle_wev8.jsp /systeminfo/RightClickMenuConent_wev8.jsp /systeminfo/RightClickMenu_wev8.jsp 在E8的开发及新的二次开发中，请引用重命名后的文件。 <%@ include file="/systeminfo/init_wev8.jsp" %> <%@ include file="/systeminfo/TopTitle_wev8.jsp" %> <%@ include file="/systeminfo/RightClickMenuConent_wev8.jsp" %> <%@ include file="/systeminfo/RightClickMenu_wev8.jsp" %> 10、E8后续的开发的文件编码一定使用UTF-8编码，不能再使用GBK编码！正确：<%@ page language="java" contentType="text/html; charset=UTF-8" %> 错误：<%@ page language="java" contentType="text/html; charset=GBK" %> 11、在前端定位时，尽可能少用绝对定位，如果要使用绝对定位，也请把绝对定位设定在一个范围内如： <div style=”position:relative;width:100px;height:100px;”> <div style=”position:absolute;width:50px;height:50px;left:10px;”>test</div> </div> 12、关于workflow_browserUrl表的修改，必须在192.168.7.114开发平台申请后才能修改！ 13、以下变量不可定义成全局变量： __weaverTreeNamespace__ __jNiceNamespace__ __tabNamespace__ __browserNamespace__ __zTreeNamespace__ __defaultTemplNamespace__ __xTreeNamespace__ 14、IE8下开发规范集锦针对IE8标准模式，需要完全使用标准写法，包括样式。以下是一些ie8标准规范的写法： 1、对于所有的宽度或者高度等设置（包括padding，margin等），除0之外，所有的度量单位都必须加单位（如29px）结尾；如：正确：padding:2px 0 2px 20px; 错误：padding:2 0 2 20; 2、对于background的写法，不能增加rgba(0,0,0)属性，该属性是css3标准，ie8暂不支持正确：background:url(listbox/open2.png) no-repeat scroll 0 50%; 错误：background:url(listbox/open2.png) no-repeat scroll 0 50% rgba(0,0,0); 3、对于class名字，大小写敏感。即使用的样式名必须和定义的样式名保持一致。定义：button.Calendar{background-image:url(general/calendar.png)} 引用：正确：class="Calendar" 错误：class="calendar" 4、对于非块级元素，使用background时必须指定图片的宽度和高度，或者指定元素的宽度和高度； 5、对于td元素，使用跨列时不能指定display为block或者inline-block，不然会导致跨列失效； 6、所有的document.all修改为$GetEle方法调用，有id的元素可以使用jQuery获取（建议使用jQuery来操作dom对象）；如document.all("test")，修改为$GetEle("test") 7、对于设定元素的高度与宽度时，建议全部改用jQuery的方法进行设定，如果使用原生的，那么必须加px或者使用%值。错误：document.getElementById("divContent").style.height = 800; 正确：document.getElementById("divContent").style.height = "800px"; 正确：jQuery("#divContent").height(800); 8、对于ckeditor在IE8下报“存储空间不足”错误的解决方案： 1、修改ckeditor.js，将样式解析屏蔽；（统一处理） 2、需要在使用ckditor的界面增加如下代码：  9、ie的专有属性如onpropertychange不能应用，请使用_listener属性代替； 10、css中expression表达式不能使用，需使用js替换； 11、对于设定元素的高度，请注意在ie盒子模型（quicks模式）中，设定的高度（宽度）包括padding的高度（宽度），但在标准盒子模型中，设定的高度（宽度）不包括padding的高度（宽度）；如： .a{ height:100px; padding-top:10px; } <div class="a"></div> quicks模式下div的高度就是100px；标准模式下div的高度就是110px；如果本意设置的高度要包括padding的高度为100px，那么请把height设置为90px； 12、对于需要以100%显示的元素，请增加属性height:100%，以确保所有的浏览器都能正常显示。

展开阅读全文