EasyUI 的各种提示框消息框配置
2016-03-04 10:02
483 查看
通过 $.messager.defaults 重写默认的 defaults。
消息框(messager)提供不同样式的消息框,包括警示(alert)、确认(confirm)、提示(prompt)、进展(progress)等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。
一、首先是消息框
$.messager.show 在屏幕的右下角显示一个消息窗口,options 参数是一个配置对象:
<span style="font-family:SimSun;font-size:18px;">$.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:''
}
});</span>show主要有以下属性:
<span style="font-family:SimSun;font-size:18px;">showType: 定义消息窗口如何显示。可用的值是:null、slide、fade、show。默认是 slide。
showSpeed: 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是 600。
width:定义消息窗口的宽度。默认是 250。
height:定义消息窗口的高度。默认是 100。
title:头部面板上显示的标题文本。
msg:要显示的消息文本。
style:定义消息窗口的自定义样式。
timeout:如果定义为 0,除非用户关闭,消息窗口将不会关闭。如果定义为非 0 值,消息窗口将在超时后自动关闭。默认是 4 秒。
</span>二、显示一个警告提示窗口 $.messager.alert()
$.messager.alert('My Title','Here is a info message!','info');主要参数如下:
title:显示在头部面板上的标题文本。
msg:要显示的消息文本。
icon:要显示的图标图片。可用的值是:error、question、info、warning。
fn:当窗口关闭时触发的回调函数。三、显示一个带"确定"和"取消"按钮的确认消息窗口 $.messager.confirm()
<span style="font-family:SimSun;font-size:18px;">$.messager.prompt('Prompt', 'Please enter your name:', function(r){
if (r){
alert('Your name is:' + r);
}
});</span>主要参数如下:
<span style="font-family:SimSun;font-size:18px;">//显示进度条
$.messager.progress();
//关闭进度条显示
$.messager.progress('close');</span>
参数
<span style="font-family:SimSun;font-size:18px;">options 定义如下:
title:显示在头部面板上的标题文本,默认值是 '' 。
msg:消息框的主体文本,默认值是 '' 。
text:显示在进度条里的文本,默认值是 undefined 。
interval:每次进度更新之间以毫秒为单位的时间长度。默认值是 300。
方法定义如下: bar:获取进度条(progressbar)对象。
close:关闭进度窗口。</span>
消息框(messager)提供不同样式的消息框,包括警示(alert)、确认(confirm)、提示(prompt)、进展(progress)等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。
一、首先是消息框
$.messager.show 在屏幕的右下角显示一个消息窗口,options 参数是一个配置对象:
<span style="font-family:SimSun;font-size:18px;">$.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:''
}
});</span>show主要有以下属性:
<span style="font-family:SimSun;font-size:18px;">showType: 定义消息窗口如何显示。可用的值是:null、slide、fade、show。默认是 slide。
showSpeed: 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是 600。
width:定义消息窗口的宽度。默认是 250。
height:定义消息窗口的高度。默认是 100。
title:头部面板上显示的标题文本。
msg:要显示的消息文本。
style:定义消息窗口的自定义样式。
timeout:如果定义为 0,除非用户关闭,消息窗口将不会关闭。如果定义为非 0 值,消息窗口将在超时后自动关闭。默认是 4 秒。
</span>二、显示一个警告提示窗口 $.messager.alert()
$.messager.alert('My Title','Here is a info message!','info');主要参数如下:
title:显示在头部面板上的标题文本。
msg:要显示的消息文本。
icon:要显示的图标图片。可用的值是:error、question、info、warning。
fn:当窗口关闭时触发的回调函数。三、显示一个带"确定"和"取消"按钮的确认消息窗口 $.messager.confirm()
<span style="font-family:SimSun;">$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){ if (r){ // exit action; } });</span>主要参数如下:
title:显示在头部面板上的标题文本。 msg:要显示的消息文本。 fn(b):回调函数,当用户点击确认按钮时传递一个 true 参数给函数,否则给它传递一个 false 参数四、显示一个带"确定"和"取消"按钮的消息窗口,提示用户输入一些文本。$.messager.prompt
<span style="font-family:SimSun;font-size:18px;">$.messager.prompt('Prompt', 'Please enter your name:', function(r){
if (r){
alert('Your name is:' + r);
}
});</span>主要参数如下:
<span style="font-family:SimSun;font-size:18px;">title:显示在头部面板上的标题文本。 msg:要显示的消息文本。 fn(val):带有用户输入的数值参数的回调函数。</span>五、显示一个进度的消息窗口 $.messager.progress()
<span style="font-family:SimSun;font-size:18px;">//显示进度条
$.messager.progress();
//关闭进度条显示
$.messager.progress('close');</span>
参数
<span style="font-family:SimSun;font-size:18px;">options 定义如下:
title:显示在头部面板上的标题文本,默认值是 '' 。
msg:消息框的主体文本,默认值是 '' 。
text:显示在进度条里的文本,默认值是 undefined 。
interval:每次进度更新之间以毫秒为单位的时间长度。默认值是 300。
方法定义如下: bar:获取进度条(progressbar)对象。
close:关闭进度窗口。</span>
相关文章推荐
- easyui------显示隐藏列功能
- 如何使用jquery easyui创建标签组件
- jQuery寻找n以内完全数的方法
- 推荐10个2014年最佳的jQuery视频插件
- jquery+CSS3实现淘宝移动网页菜单效果
- 采用easyui tree编写简单角色权限代码的方法
- jQuery实现本地预览上传图片功能
- jquery实现触发时更新下拉列表内容的方法
- 基于jquery中children()与find()的区别介绍
- 了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
- 轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
- 基于jQuery实现网页打印功能
- js中confirm实现执行操作前弹出确认框的方法
- confirm的用法示例用于按钮操作时确定是否执行
- 在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
- JQuery打造PHP的AJAX表单提交实例
- jquery easyui使用心得
- jQuery EasyUi实战教程之布局篇
- 初试jQuery EasyUI 使用介绍
- easyui Droppable组件实现放置特效