messager提供了多风格的消息盒子,包括alert、confirm、prompt、progress等等。所有的messager都是异步的,用户可以使用回调函数来与messager进行交互。
messager依赖以下组件:window、linkbutton、progressbar。
messager使用案例
$.messager.alert('警告', '你在执行危险操作');
上述代码弹出一个警示框。
$.messager.confirm('确认','您确定要关闭此窗口吗?', function (r) if(r == true) {$(this).window('close');})
上述代码弹出一个确认框
messager的属性
名称 | 值类型 | 描述 | 默认值 |
---|---|---|---|
ok | string | Ok按钮的文本 | Ok |
cancel | string | Cancel按钮的文本 | Cancel |
messager的方法
名称 | 参数 | 描述 |
---|---|---|
$.messager.show | options | 在屏幕的右下角显示信息.。参数options是一个对象,用来配置显示样式: showType: 定义这个信息窗体如何展示,可选的值如下:null、side、fade、show。默认值是side。 showSpeed: 定义窗口完成显示的时间,默认值是600毫秒。 width: 定义窗口的宽度,默认值是250。 height: 定义了窗口的高度,默认值是100。 title: 在panel顶部的标题。 msg: 需要显示的信息文本。 style: Defines the custom dpecification style for message window. timeout: 如果定义为0,那么这个窗口将不会关闭直至用户关闭它. 如果定义为正数,那么将会在指定秒之后关闭窗口.,默认值是4秒。 案例代码: $.messager.show({ title:'My Title', msg:'Message will be closed after 5 seconds.', timeout:5000, showType:'slide' }); // show message window on top center $.messager.show({ title:'My Title', msg:'Message will be closed after 4 seconds.', showType:'show', style:{ right:'', top:document.body.scrollTop+document.documentElement.scrollTop, bottom:'' } }); |
$.messager.alert | title, msg, icon, fn | 显示一个alert窗体。参数如下: title: panel的标题。 msg: 需要显示的信息文本。 icon: 显示额图标,可选的值如下:error,question,info,warning. fn: 当窗体关闭的回调函数。 案例代码: $.messager.alert('My Title','Here is a info message!','info'); |
$.messager.confirm | title, msg, fn | 显示一个带有Ok按钮和Cancel按钮的确认框。参数如下: title: 顶层panel的标题。 msg: 需要显示的信息文本。 fn(b): 回调函数,参数b回传的一个值,true表示点击了Ok按钮,false表示点击了Cancel按钮。 案例代码: $.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){ if (r){ // exit action; } }); |
$.messager.prompt | title, msg, fn | 显示一个带Ok按钮和Cancel按钮的输入框,提示用户进行输入,参数如下: title: 顶层panel的标题。 msg: 需要显示的文本信息。 fn(val): 回调函数,val回传用户的输入。 案例代码: $.messager.prompt('Prompt', 'Please enter your name:', function(r){ if (r){ alert('Your name is:' + r); } }); |
$.messager.progress | options or method | 显示一个进度窗体 The options is defined as: title: The title text to be showed on header panel, default ''. msg: The message box body text, default ''. text: The text to display in the progress bar, default undefined. interval: The length of time in milliseconds between each progress update, default 300. The method is defined as: bar: Get the progressbar object. close: Close the progress window. Code example: Show progress message window.$.messager.progress();Now close the message window. $.messager.progress('close'); |