easyUI之Messager提示框的用法

分类

警告消息框（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)

弹出框的位置

function topLeft(){//上左
            $.messager.show({
                title:'My Title',
                msg:'The message content',
                showType:'show',
                style:{
                    right:'',
                    left:0,
                    top:document.body.scrollTop+document.documentElement.scrollTop,
                    bottom:''
                }
            });
        }
        function topCenter(){//上中
            $.messager.show({
                title:'My Title',
                msg:'The message content',
                showType:'slide',
                style:{
                    right:'',
                    top:document.body.scrollTop+document.documentElement.scrollTop,
                    bottom:''
                }
            });
        }
        function topRight(){//上右
            $.messager.show({
                title:'My Title',
                msg:'The message content',
                showType:'show',
                style:{
                    left:'',
                    right:0,
                    top:document.body.scrollTop+document.documentElement.scrollTop,
                    bottom:''
                }
            });
        }
        function centerLeft(){//中左
            $.messager.show({
                title:'My Title',
                msg:'The message content',
                showType:'fade',
                style:{
                    left:0,
                    right:'',
                    bottom:''
                }
            });
        }
        function center(){//中间
            $.messager.show({
                title:'My Title',
                msg:'The message content',
                showType:'fade',
                style:{
                    right:'',
                    bottom:''
                }
            });
        }
        function centerRight(){//中右
            $.messager.show({
                title:'My Title',
                msg:'The message content',
                showType:'fade',
                style:{
                    left:'',
                    right:0,
                    bottom:''
                }
            });
        }
        function bottomLeft(){//下左
            $.messager.show({
                title:'My Title',
                msg:'The message content',
                showType:'show',
                style:{
                    left:0,
                    right:'',
                    top:'',
                    bottom:-document.body.scrollTop-document.documentElement.scrollTop
                }
            });
        }
        function bottomCenter(){//下中
            $.messager.show({
                title:'My Title',
                msg:'The message content',
                showType:'slide',
                style:{
                    right:'',
                    top:'',
                    bottom:-document.body.scrollTop-document.documentElement.scrollTop
                }
            });
        }
        function bottomRight(){//下右
            $.messager.show({
                title:'My Title',
                msg:'The message content',
                showType:'show'
            });
        }