使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

Messager

Document
Native
Basic
Alert Messager
Interactive Messager
Message Box Position
Plus
Extend

Messager Document

使用$.messager.defaults重写默认值对象。
消息窗口提供了不同的消息框风格,包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情。

文档汉化:

汉化人:王锦阳
汉化语言:简体中文
个人博客:http://blog.sina.com.cn/richie696

依赖关系:

用法:

				
<script type="text/javascript">
$.messager.alert('警告','警告消息');    
$.messager.confirm('确认','您确认想要删除记录吗?',function(r){    
    if (r){    
        alert('确认删除');    
    }    
});  
</script>
				
			

属性:

属性名 属性值类型 描述 默认值
ok string 确定按钮文本。 Ok
cancel string 取消按钮文本。 Cancel

方法:

方法名 方法属性 描述
$.messager.show options 在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象:
showType:定义将如何显示该消息。可用值有:null,slide,fade,show。默认:slide。
showSpeed:定义窗口显示的过度时间。默认:600毫秒。
width:定义消息窗口的宽度。默认:250px。
height:定义消息窗口的高度。默认:100px。
title:在头部面板显示的标题文本。
msg:显示的消息文本。
style:定义消息窗体的自定义样式。
timeout:如果定义为0,消息窗体将不会自动关闭,除非用户关闭他。如果定义成非0的树,消息窗体将在超时后自动关闭。默认:4秒。

代码示例:
				
<script type="text/javascript">
$.messager.show({
  title:'我的消息',
  msg:'消息将在5秒后关闭。',
  timeout:5000,
  showType:'slide'
});
// 消息将显示在顶部中间
$.messager.show({
  title:'我的消息',
  msg:'消息将在4秒后关闭。',
  showType:'show',
  style:{
    right:'',
    top:document.body.scrollTop+document.documentElement.scrollTop,
    bottom:''
  }
});
</script>
				
			
$.messager.alert title, msg, icon, fn 显示警告窗口。参数:
title:在头部面板显示的标题文本。
msg:显示的消息文本。
icon:显示的图标图像。可用值有:error,question,info,warning。
fn: 在窗口关闭的时候触发该回调函数。

代码示例:
				
<script type="text/javascript">
$.messager.alert('我的消息','这是一个提示信息!','info');
</script>
				
			
$.messager.confirm title, msg, fn 显示一个包含“确定”和“取消”按钮的确认消息窗口。参数:
title:在头部面板显示的标题文本。
msg:显示的消息文本。
fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数,否则传递一个false值。

代码示例
				
<script type="text/javascript">
$.messager.confirm('确认对话框', '您想要退出该系统吗?', function(r){
  if (r){
      // 退出操作;
  }
});
</script>
				
			
$.messager.prompt title, msg, fn 显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数:
title:在头部面板显示的标题文本。
msg:显示的消息文本。
fn(val): 在用户输入一个值参数的时候执行的回调函数。

代码示例:
				
<script type="text/javascript">
$.messager.prompt('提示信息', '请输入你的姓名:', function(r){
  if (r){
    alert('你的姓名是:' + r);
  }
});
</script>
				
			
$.messager.progress options or method 显示一个进度消息窗体。
属性定义为:
title:在头部面板显示的标题文本。默认:空。
msg:显示的消息文本。默认:空。
text:在进度条上显示的文本。默认:undefined。
interval:每次进度更新的间隔时间。默认:300毫秒。

方法定义为:
bar:获取进度条对象。
close:关闭进度窗口。

代码示例:

显示进度消息窗口。
				
<script type="text/javascript">
$.messager.progress(); 
</script>
				
			

关闭进度消息窗口。
				
<script type="text/javascript">
$.messager.progress('close');
</script>