漂浮消息允许在页面指定位置展示一个消息浮动在已有内容之上。此消息可以设置为自动关闭或者让用户自行决定关闭。漂浮消息不会打断用户当前操作,一般用于提示后台操作,或者针对用户的全局操作作出及时回应。
漂浮消息允许在页面指定位置展示一个消息浮动在已有内容之上。此消息可以设置为自动关闭或者让用户自行决定关闭。漂浮消息不会打断用户当前操作,一般用于提示后台操作,或者针对用户的全局操作作出及时回应。
漂浮消息可以设置图标,并且可以决定是否显示关闭按钮。
提供7个预设的显示位置。
提供8种颜色类型。
创建一个Messager
实例来使用漂浮消息。
方法 | 参数 | 定义 |
---|---|---|
构造函数 |
|
创建新的Messager实例。 |
show |
无 | 立即显示消息 |
hide |
无 | 立即隐藏消息 |
// 使用jQuery对象
var msg = new $.zui.Messager('消息内容', {placement: 'bottom'});
// 使用window对象
// var msg = new $.zui.Messager('消息内容', {placement: 'bottom'});
// 显示消息
msg.show();
// 隐藏消息
msg.hide();
使用jQuery对象或window
对象的messager
实例的show()
方法来即时显示一个漂浮消息。
调用$.zui.messager.show()
或者$.zui.messager.show()
之后立即显示并返回新创建的Messager
实例。可以使用返回的实例来手动执行hide
方法隐藏此消息。
show()
方法提供两个参数,定义于Messager
构造函数参数定义相同。
// 使用jQuery对象
var msg = $.zui.messager.show('消息内容', {placement: 'bottom'});
// 使用window对象
// var msg = $.zui.messager.show('消息内容', {placement: 'bottom'});
// 隐藏消息
msg.hide();
参数 | 可选值 | 说明 |
---|---|---|
type |
'default' (默认)|'primary' |'success' |'info' |'warning' |'danger' |'important' |'special' |
不同类型的消息对应使用不同的颜色展示。 |
placement |
'top' (默认)|'bottom' |'top-left' |'top-right' |'bottom-left' |'bottom-right' |'center' |
决定消息显示的位置。 |
time |
表示时间延迟,单位毫秒,默认为4000 | 自显示之后超过此时间设定会自动隐藏消息。如果设置为0则不会自动隐藏。 |
parent |
'body' |
一个jquery选择器,决定消息内容DOM的父节点。 |
icon |
null |
可以额外制定一个图标在消息文本之前显示,图标定义参见“控件>图标”章节。 |
close |
true (默认)|false |
如果为true ,则在消息右侧显示一个关闭按钮,用户可以自行隐藏消息。 |
fade |
true (默认)|false |
如果为true ,则在显示和隐藏消息时使用渐隐渐显的动画效果。 |
scale |
true (默认)|false |
如果为true ,则在显示和隐藏消息时使用缩放的动画效果。 |