漂浮消息允许在页面指定位置展示一个消息浮动在已有内容之上。此消息可以设置为自动关闭或者让用户自行决定关闭。漂浮消息不会打断用户当前操作,一般用于提示后台操作,或者针对用户的全局操作作出及时回应。

一般示例

漂浮消息可以设置图标,并且可以决定是否显示关闭按钮。

更改显示位置

提供7个预设的显示位置。

色彩主题

提供8种颜色类型。

普通提示消息
提示消息:主要
提示消息:信息
提示消息:危险
提示消息:成功
提示消息:警告
提示消息:重要
提示消息:特别

禁用动画效果

如何使用

使用Messager对象

创建一个Messager实例来使用漂浮消息。

方法参数定义
构造函数
  • message,需要显示的消息文本,支持html;
  • options一个参数对象,具体参数定义见后续章节。
创建新的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,则在显示和隐藏消息时使用缩放的动画效果。