无论是请求结果、功能说明、备注提示等,都需要轻量的方式完成信息的提醒功能,说明当前操作、按钮、标签、表单验证等结果,增强友好度,同时作为前台架构的一个基本功能进行提供。如何利用表示之间的差异,完成不同意思的表达过程,则体现该功能的细微处理。
引用代码,框架为JQuery作为基础,控件为Layer作为功能。
Tip 提示
Tip提示主要针对页面中元素提供的提示功能,可以根据元素的本身进行吸附式的设置,同时可以做到需要提醒时完成提醒功能。例如,指定操作才能够触发提醒信息的显示,或者固定显示的方式支持页面元素的提醒。
作为几种表达方式最为轻量级,可以通过简单而且灵活的方式,针对特定的元素完成提醒类的提示。但是,由于Tip本身的特点,建议针对提醒内容有一定的控制,避免过多的内容占据页面的篇幅,与Tip本身设定相悖的功能设定。
...
core.tip: function (element, message, direc, color) {
direc = direc ? ["", "top", "right", "bottom", "left"].indexOf(direc) : 1;
color = color ? color : '#000000';
layer.tips(message, element, {tips: [direc ,color]});
},
...
Alert 消息
Alert消息主要提供操作类的反馈信息提供提示功能,通常情况可以显示在页面中央来完成突出显示的作用。消息提醒的同时,可以根据显示样式的不同区分当前显示内容的重要程度,比如红色代表重要消息,黄色代表警告消息,蓝色或者绿色代表普通提示消息。通过不同样式的消息提醒,以及提醒的内容来说明操作的结果是否需要完成进一步的处理。
...
core.info: {typeclass: "alert-info", outtime: 1000},
core.warning: {typeclass: "alert-warning", outtime: 3000},
core.error: {typeclass: "alert-error", outtime: 5000},
...
core.alert: function (type, message) {
if(!type) type = core.info;
layer.msg(message, {skin: type.typeclass, time: type.outtime});
},
...
Confirm 确认
Confim确认,提醒的同时,需要操作完成相应的响应动作,完成下一步的具体操作。例如确认动作,提示信息的同时需要通过确认来完成后续的处理,否则不会进行下一步的处理。
确认提醒最常见的场景与确认场景的名称类似,主要提供确认的动作,而不是直接完成操作对应的处理过程。确认功能的同时,还可以根据提供操作的不同功能,完成类似选择的处理。例如,操作的过程可以进行两个选择,一是A业务处理过程,二是B业务处理过程,可以通过提供确认信息的同时,根据不同的选项完成不同的业务。
...
core.confirm: function(content, success, cancel){
layer.confirm(content, {title: false, closeBtn: false}, function(index){
success && success();
layer.close(index);
}, function(index){
cancel && cancel();
});
},
...
JQuery更多使用说明,参考JQuery官方网站。
LayUI(Layer)所有使用方式,参考LayUI官方网站,了解更多功能。