美文网首页海枫科技
海枫科技框架前端统一规范

海枫科技框架前端统一规范

作者: Hyphone | 来源:发表于2017-03-22 12:39 被阅读75次

列表

1.统一Grid列表中的工具栏按钮

新增:新增-TipConstant.btnVal.addVal
提交:提交-TipConstant.btnVal.subVal
导出:导出-TipConstant.btnVal.exportVal
导入:导入-TipConstant.btnVal.importVal

2.统一Grid列表中的操作按钮

编辑:编辑-TipConstant.btnVal.editVal
删除:删除-TipConstant.btnVal.delVal
查看:查看-TipConstant.btnVal.viewVal
选择:选择-TipConstant.btnVal.chooseVal
审核:审核-TipConstant.btnVal.auditVal
提交:提交-TipConstant.btnVal.subVal

3.统一弹出Dialog的标题

新增:添加-TipConstant.dialogTitle.addTitle
编辑:编辑-TipConstant.dialogTitle.editTitle
查看:详情-TipConstant.dialogTitle.viewTitle
选择:选择-TipConstant.dialogTitle.chooseTitle
审核:审核-TipConstant.dialogTitle.auditTitle
导入:导入-TipConstant.dialogTitle.importTitle
审核历史:审核历史-TipConstant.dialogTitle.historyTitle

操作提示信息

1.统一确认提示信息

删除:确定删除?删除后将无法恢复!-TipConstant.msgTip.delTip
提交:确定提交?提交后将无法修改!-TipConstant.msgTip.subTip

2.统一操作执行结果提示信息

success-成功:操作成功!-TipConstant.msgTip.successTip
success-失败:操作失败!-TipConstant.msgTip.errorTip
error:服务请求失败,请稍后再试!-TipConstant.msgTip.serverTip
表单验证:表单填写不正确,请按要求填写!-TipConstant.msgTip.validTip

3.统一AJax与后台交互时提示信息

mask数据加载中:数据加载中…-!-TipConstant.msgTip.maskTip
success-失败:加载失败!-TipConstant.msgTip.loadErrorTip
error:服务请求失败,请稍后再试!-TipConstant.msgTip.serverTip

操作界面

1.统一操作按钮

1.当操作表单数据不需要审核添加后直接生效时,按钮显示【提交、取消】
2.当操作表单数据需要提交审核或单独提交生效时,按钮显示【保存、取消】
3.统一审核按钮显示【通过、退回、取消XX、返回】

2.统一操作界面写法

<form id="XXXform" name="XXXform" action="${ctx}/XXX/save" method="post"> <div class="box1" whiteBg="true"> <table class="tableStyle width-perc100" formMode="view"> <tr> <td class="width-perc5"></td> <td class="width-perc95"></td> </tr> </table> <div id="details"></div> <div class="btop-val0 border-solid-gray"> <table class="tableStyle width-perc100" formMode="transparent"> <tr> <td class="width-perc5"></td> <td class="width-perc95"></td> </tr> </table> </div> <div class="btn_bottom_middle"> <input id="addbtn" value="保存" type="button"> <input id="cancelbtn" value="取消" type="button"> </div> </div> </form>

参照案例

1.HY-yycl\HY-Webapp\src\main\webapp\static\js\localorder\list.js 2.HY-yycl\HY-Webapp\src\main\webapp\static\js\localorder\add.js

相关文章

  • 海枫科技框架前端统一规范

    列表 1.统一Grid列表中的工具栏按钮新增:新增-TipConstant.btnVal.addVal提交:提交-...

  • 海枫科技前端编码风格规范之JavaScript规范

    命名 1.JS文件命名与对应被引入的jsp文件命名保持一致(不包含工具以及通用JS)2.变量 驼峰命名法;常量 全...

  • 海枫科技前端编码风格规范之Html规范

    原则 1.规范。保证代码规范,趋html5,远xhtml,保证结构表现行为相互分离。2.简洁。保证代码的最简化,避...

  • 海枫科技前端编码风格规范之CSS规范

    CSS书写顺序 位置属性(position,top,right,z-index,display,float等) 大...

  • PM篇

    PM 技术篇1.开发规范命名规范,异常处理规范,日志规范,统一框架,代码commit规范,代码评审规范,统一API...

  • 下周任务

    整理安卓 前端代码规范 框架评审 axure原型

  • (三)开始编程

    编程前的准备工作大致按照确定前端框架,统一编程风格,制定命名规范三步走。那么开始编程,实现静态页面时则大多按照各自...

  • 电商平台后台管理&接口开发规范

    一、统一的编码规范 遵循Nop框架的架构规范;目录结构,命名,依赖注入,Automapper等都参照已有代码规范;...

  • 代码规范

    代码规范 作为前端工程化的第一步,就是要统一代码规范。而前端的代码规范,用三个插件就能保证(husky lint-...

  • 前端工程涉及八个比较大的分类:

    组织架构:前端开发规范和架构设计,包括模块化/组件化开发模型、开发框架、目录规范、组织形式等。 工程部署:有关前端...

网友评论

    本文标题:海枫科技框架前端统一规范

    本文链接:https://www.haomeiwen.com/subject/uhqonttx.html