【连载】研究EasyUI系统— Messager组件

　　messager组件作为提示框，应用的场合非常多，例如常见的操作确认等。messager的种类也很多，有“确认”、“提示”、“输入”等等。它依赖于window、linkbutton、progressbar三个组件。



　　上图展示了messager组件警告框($.messager.alert)的效果。

　　下列代码展示提示框的日常用法。

<script>
/* messager作为警告框使用 */
$.messager.alert("错误","您输入的用户名或密码不正确","error");

/* messager作为确认框使用 */
$.messager.confirm ("提示","您是否要删除此项？",function(result){
if (result) { //具体操作代码 }
});

/* messager作为输入框使用 */
$.messager.prompt ("请输入信息","请输入您的身份证号码",function(result){
if (result) { alert(result); }
});
</script>

messager组件共有两个属性：

属性名称	属性值类型	属性默认值	描述
ok	字符串	“确定”	确定按钮上的标题文字。
cancel	字符串	“取消”	取消按钮上的标题文字。

　　通过这两个属性，用户可以改变按钮上默认的文字，以符合项目的实际需要。

messager组件方法：

方法名称	参数	描述
$.messager.show	options	显示组件。
$.messager.alert	title, msg, icon, fn	以警告框的形式显示组件。
$.messager.confirm	title, msg, fn	以确认框的形式显示组件。
$.messager.prompt	title, msg, fn	以输入框的形式显示组件。
$.messager.progress	options或method	以进度条的形式显示组件。

　　

$.messager.show

方法可以让用户以自定义的方法使用组件，标题、背景等都可以定制。它的参数options是json，包含如下几个内容：

　　showType。指定messager弹出时的效果。类型为字符串，值可以是“null”, “slide”, “fade”, “show”，默认为slide。

　　showSpeed。指定从messager开始弹出到弹出结束所耗费的时间，以毫秒计，类型为数值，默认为600。

　　width。指定messager宽度，类型为数值，默认250。

　　height。指定messager高度，类型为数值，默认100。

　　title。指定messager左上角的标题，类型为字符串。

　　msg。指定messager要显示的文本内容，类型为字符串。

　　style。指定自定义的组件样式，类型为json。

　　timeout。指定超时时间，超时后自动关闭messager组件，以毫秒计，类型为数值，默认为4秒。如设定为0，则永不关闭。

　　

　　下例代码展示如何使用messager组件的show方法。

<script>
var options = {
title:'自定义标题',
msg:'自定义文本内容显示',
timeout:5000,
showType:'fade',
showSpeed:2000,
width:320,
height:160,
style:{
top:200,
bottom:'',
left:100,
right:'',
zIndex:9999
}
}
$.messager.show(options);
</script>

　　组件样式style也是一个json，定义了五个内容，分别为距离屏幕边距坐标和z坐标深度，可以是数值，也可以是空。

　　

$.messager.alert

、

$.messager.confirm

、

$.messager.prompt

三个用法已在上文举例说明，title、msg、fn是三个方法的共同参数，表示左上角标题、组件显示的内容、点击组件按钮触发的方法。

　　fn作为点击组件按钮触发的函数，只有用户点击组件上的按钮时才执行，它带有一个参数。

$.messager.alert

中参数值为undefined；

$.messager.confirm

参数为true或者false；

$.messager.prompt

形式中，组件允许用户输入一行数据，输入完毕后，用户点击“确定”按钮时参数值为输入的数据，点击“取消”是值为undefined。

　　

$.messager.alert

方法相比较其他方法，多了一个icon参数，该参数表示图标样式，类型为字符串，有“error”、“question”、“info”、“warning”四种。



　　

$.messager.progress

是messager和progressbar组件的结合。该方法的参数既有json，又有方法。

参数为json时，数组里的每一项都指定了组件的属性，共有下列内容。

　　title。指定messager左上角的标题，类型为字符串，默认为空。

　　msg。指定messager要显示的文本内容，类型为字符串，默认为空。

　　text。进度条上要显示的文本内容，类型为字符串，默认为undefined。

　　interval。进度条更新时间间隔，以毫秒计，类型为数值，默认为300。

　　参数为方法时，共有两个，分别为“close”和“bar”。前者用于关闭组件，后者获取组件所有属性。

<script>
var progress_options = {
title:'progress标题',
msg:'progress文本内容显示',
text:'进度表上显示的内容',
interval:1000
}
/* 参数为json时 */
$.messager.progress(progress_options);

/* 参数为方法时 */
$.messager.progress("close");
</script>