easyUI之Messager提示框的用法

素颜马尾好姑娘i 2022-08-24 00:49 1005阅读 0赞

# 分类 #

警告消息框（icon）：alert error info question warning

交互消息框：confirm prompt

消息框的显示方式：show slide fade progress

# **警告消息框** #

## 基本用法：$.messager.alert(title, msg, icon, fn) ##

## **alert（普通提示）** ##

$(function () {
             $.messager.alert("操作提示", "操作成功！","alert");
    });

或不带“alert”

$(function () {
             $.messager.alert("操作提示", "操作成功！");
    });

![SouthEast][]

## error（错误） ##

$(function () {
         $.messager.alert("操作提示", "操作失败！","error");
    });

![SouthEast 1][]

## info（信息） ##

$(function () {
          $.messager.alert("操作提示", "操作成功！","info");
    });

![SouthEast 2][]

## question（疑问） ##

$(function () {
          $.messager.alert("操作提示", "您确定要执行此操作吗！","question");
    });

![SouthEast 3][]

## warning（警告） ##

$(function () {
         $.messager.alert("操作提示", "该操作存在风险，请慎重！","warning");
    });

![SouthEast 4][]

## **function的用法** ##

$(function () {
        $.messager.alert("操作提示", "该操作存在风险，请慎重！","warning",function(){
             alert("确定！")
        });
    });

# 交互消息框 #

## 基本用法：$.messager.confirm(title, msg, fn) ##

## confirm（确认提示框） ##

$.messager.confirm('提示', '请判断是否要执行该操作?', function(b){
          if (b){
                alert('确认');
          }else{
                alert('取消');
          }
    });

![SouthEast 5][]

## prompt（可输入信息的提示框） ##

$.messager.prompt('提示', '请输入您要输入的内容：', function(r){
    	if (r){
    		alert('内容: '+r);
    	}
    });

![SouthEast 6][]

# 消息框的显示方式 #

具体显示效果自行实验，具体code如下：

//显示
    		$.messager.show({
    			title:'提示',
    			msg:'信息提示框将在4秒后关闭.',
    			showType:'show'
    		});
    		//从下往上滑出
    		$.messager.show({
    			title:'提示',
    			msg:'信息提示框将在5秒后关闭.',
    			timeout:5000,
    			showType:'slide'
    		});
    		//不主动关闭
    		$.messager.show({
    			title:'提示',
    			msg:'信息提示框不会主动关闭.',
    			timeout:0,
    			showType:'fade'
    		});
    		//带滚动条等待提示框
    		var win = $.messager.progress({
    			title:'请等待',
    			msg:'加载数据中...'
    		});
    		setTimeout(function(){
    			$.messager.progress('close');
    		},5000)

# 弹出框的位置 #

[SouthEast]: /images/20220823/f2dca920c7aa45f192aa7c438176dbb8.png
[SouthEast 1]: /images/20220823/006051f171974d3b812b343860a8efad.png
[SouthEast 2]: /images/20220823/7adc55e8e60a49089bde69ed41e6c64a.png
[SouthEast 3]: /images/20220823/9a43b12d252c4e118808ed39be7216ec.png
[SouthEast 4]: /images/20220823/fbfee4a1328e40c6b2447b60941865a9.png
[SouthEast 5]: /images/20220823/78c4a66ac44f4ab3a8c71ad70ee6a3c0.png
[SouthEast 6]: /images/20220823/49562e6faa1c4a59b8fc6f2685fcdc0a.png