html扩展方式的特点,简单、容易扩展、基于jQuery;
javascript库特点,思维方式更接近应用程序,以组件的方式调用;但是实现复杂,扩展不方便;
核心JS介绍:
dwz.core.js
提供了程序入口;
对jQuery做了针对DWZ的扩展,基础数据类型做了扩展;
dwz.ui.js
提供了全局回调方法;
在DWZ初始化时候回调了全局方法initEnv(),做了界面初始化;其中,自定义插件可以在initUI()方法中扩展;
dwz.ajax.js
提供了对ajax操作的全局工具方法;
dwz.regional.zh.js
提供了英文转中文的语言汉化实现;
常用组件列表:
1 链接(a)、对话框(dialog)、选项卡布局(navTab)组件
格式如下:
属性说明:
target:
rel:执行调用者的指针(navTab与dialog默认是_blank);重新刷新页面可以使用rel属性,也可以使用服务端返回json中的navTabId值来动态传递;
navTab相关属性:
dialog相关属性:
callback:回调函数;
2 面板(panel)组件
格式如下:
属性说明:
close:关闭状态,默认;
collapse:可以折叠;
defH:高度(单位:px),默认是实际高度;
minH:最小高度(单位:px);
3 选项卡面板(tabs)组件
格式如下:
属性说明:
eventType,click:鼠标单击,hover:鼠标移动;
currentIndex,默认是0(0~n);
4 提示窗口
确认提示框
alertMsg.confirm("您修改的资料未保存,请选择保存或取消!", {
});
成功提示框,alertMsg.correct('您的数据提交成功!')
错误提示框,alertMsg.error('您提交的数据有误,请检查后重新提交!', [options])
警告提示框,alertMsg.warn('您提交的数据有误,请检查后重新提交!', [options])
信息提示框,alertMsg.info('您提交的数据有误,请检查后重新提交!', [options])
options对象属性:
okName:确定按钮名称;
okCal:确认按钮回调;
cancelName:取消按钮名称;
cancelCall:取消按钮回调;
keyCode:键盘按键定义,参考DWZ.keyCode;
属性说明:
layoutH:父div高度 - 当前layoutH = 实际的高度,最小是50px;
6 表单提交
格式如下:
class:定义是否验证表单;
onsubmit:提交时指定回调函数,默认调用DWZ.ajaxDone(json);若指定了提示信息,则会显示提示信息;
内置回调函数:
navTabAjaxDone:选项卡方式时候的默认回调;都会先调用DWZ.ajaxDone(json),来显示提示信息;
dialogAjaxDone:对话框方式时候的默认回调;都会先调用DWZ.ajaxDone(json),来显示提示信息;