【EasyUI篇】Messager消息窗口组件

微信公众号：​​程序yuan​​

13.Messager消息窗口组件

目录

​​13.Messager消息窗口组件​​

​​1.警告框​​

​​2.确认框​​

​​3.提示输入框​​

​​4.进度条框​​

​​5.消息框​​

​​JSP文件​​

​​JS文件​​

​​效果图​​

---

加载方式：
       消息窗口提供了不同的消息框风格，包含 alert(警告框)、confirm(确认框)、prompt(提示框)、progress(进度框)等。所有消息框都是异步的，用户可以在交互消息之后使用回调函数去处理结果。
       由于这个组件的特殊性，没有 class 加载方式，全部在 JS 端完成！

 

 

 

 

1.警告框

//使用警告框，四个参数均为可选
$.messager.alert('警告框','这是一个信息框','info', function () {
    alert('确认后的回调！');
});

显示警告窗口。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
icon：显示的图标图像。可用值有：error,question,info,warning。
fn: 在窗口关闭的时候触发该回调函数。

2.确认框

//使用确认框，三个参数均可选
$.messager.confirm('确认对话框','你真的要删除吗？', function (flag) {
    if (flag) {
        alert('删除成功！');
    }
});

显示一个包含“确定”和“取消”按钮的确认消息窗口。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
fn(b): 当用户点击“确定”按钮的时侯将传递一个 true 值给回调函数，否则传递一个
false 值。

3.提示输入框

//使用提示框，三个参数均可选
$.messager.prompt('提示信息','请输入你的名字：', function (flag) {
    if (flag) {
        alert(flag);
    }
});

显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数：
title：在头部面板显示的标题文本。
msg：显示的消息文本。
n(val): 在用户输入一个值参数的时候执行的回调函数。

4.进度条框

//进度条信息
$.messager.progress({
    title : '执行中',
    msg : '努力加载中...',
    text : '{value}%',
    interval : 100,
});

显示一个进度消息窗体。
属性定义为：
title：在头部面板显示的标题文本。默认：空。
msg：显示的消息文本。默认：空。
text：在进度条上显示的文本。默认：undefined。
interval：每次进度更新的间隔时间。默认：300 毫秒。
方法定义为：
bar：获取进度条对象。$.messager.progress('bar');
close：关闭进度窗口。$.messager.progress('close');

5.消息框

//使用消息框
$.messager.show({
    title : '我的消息',
    msg : '消息在 5 秒后关闭',
    timeout : 5000,
    showType : 'slide',
});

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


//将消息框显示在顶部
$.messager.show({
title : '我的消息',
msg : '消息在 5 秒后关闭',
timeout : 5000,
showType : 'slide',
style:{
top : 0,
}
});

JSP文件

此处由于messager组件没有class加载方式，所以没有jsp文件

JS文件

$(function () {

    //属性设置
    // $.messager.defaults = {ok:'是',cancel:'否'};


    //方法列表

    //消息显示
    $.messager.show({
        title:'消息',
        msg:'消息在2秒后关闭',
        timeout:2000,
        showType:'show',//null,slide,show,fade,默认slide
        style:{
            top:0,
        }
    });


    //信息框
    /*$.messager.alert('警告框','这是一个信息框','info',function () {
        alert("确认后回调");
    });*/
    //错误框
    /*$.messager.alert('警告框','这是一个信息框','error',function () {
        alert("确认后回调");
    });*/
    //问题框
    /*$.messager.alert('警告框','这是一个信息框','question',function () {
        alert("确认后回调");
    });*/
    //警告框
    /*$.messager.alert('警告框','这是一个信息框','warning',function () {
        alert("确认后回调");
    });*/


    //确认框
    /*$.messager.confirm('确定对话框','确定要删除吗?',function (flag) {
        // alert(flag);true,false
        if(flag == true){
            alert("确认");
        }else{
            alert("取消");
        }
    });*/


    //提示输入框
   /* $.messager.prompt('提示信息','请输入您的姓名：',function (flag) {
        // alert(flag);内容
       if(flag){
            alert(flag);
       }
    });*/

   $.messager.progress({
        title:'执行中',
        msg:'努力加载中...',
        text:'{value}%',
        interval:1000,
    });

  // console.log($.messager.progress('bar'));
    $(document).click(function () {
        //关闭进度条窗口
        $.messager.progress('close');
    });




});

效果图

alert

 

confirm

 

prompt

 

progress

 

show

 

 

 

------------------------------------------------

关注微信公众号获取更多资源