您的位置:首页 > Web前端 > 其它

easyui messager的用法

更多 2015/1/20 来源:Web前端学习浏览量:3456
学习标签: easyui
本文导读:easyui messager弹出框提供不同风格的消息框,包括警报,确认,提示、进度等。所有的Messager都是异步的。用户可以使用回调函数对数据继续进行处理。

一、easyui messager的方法

 

名称

参数

说明

$.messager.show

options

在屏幕的右下角显示一个消息窗口,options 是一个配置对象:
showType 定义消息窗口如何显示。可用的值是: nullslidefadeshow。默认是 slide
showSpeed 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是 600
width 定义消息窗口的宽度。默认是250
height 定义消息窗口的高度。默认是100
msg 显示的消息文字。
title 头部面板上显示的标题文字。
timeout 如果定义为 0,除非用户关闭,消息窗口将不会关闭。如果定义为非 0 值,消息窗口将在超时后自动关闭。

$.messager.alert

title, msg, icon, fn

显示一个提示窗口。参数:
title 显示在头部面板的标题文字。
msg 显示的消息文字。
icon 显示图标的图片。可用的值是: errorquestioninfowarning
fn 窗口关闭时触发的回调函数。

$.messager.confirm

title, msg, fn

显示一个带“确定”和“取消”按钮的确认消息。参数:
title 显示在头部面板上的标题文字。
msg 显示的消息文字。
fn(b) 回调函数,当用户点击确认按钮时传递一个 true 参数,否则给它传递一个 false 参数。

$.messager.prompt

title, msg, fn

显示一个带确定和取消按钮的消息窗口,提示用户输入一些文字。参数:
title 显示在头部面板上的标题文字。
msg 显示的消息文字。
fn(val):回调函数,使用用户输入的数值参数。

$.messager.progress

options or method

显示一个进度的消息窗口。
options 这样定义:
title 显示在头部面板上的标题文字,默认值是 ''
msg 消息框的文本,默认值是 ''
text 显示在进度条里的文字,默认值是 undefined
interval 每次进度更新之间以毫秒为单位的时间长度。默认值是 300

方法这样定义:
bar 获取 progressbar 对象。
close 关闭进度窗口。

代码示例

显示进度消息窗口:

          $.messager.progress(); 

现在关闭消息窗口:

          $.messager.progress('close');

 

二、jQueryEasyUI Messager使用实例

 

1、$.messager.alert(title, msg, icon, fn)

1>、基本用法

 


    <script type="text/javascript">

        $(function () {

            $.messager.alert("操作提示", "操作成功!");

        });

    </script>

 

2>、icon使用


icon四种设置:"error"、"info"、"question"、"warning"


info 效果

 


<script type="text/javascript">

    $(function () {

        $.messager.alert("操作提示", "操作成功!","info");

    });

</script>

 
error效果
 


<script type="text/javascript">

    $(function () {

        $.messager.alert("操作提示", "操作失败!","error");

    });

</script>

 
question效果
 


<script type="text/javascript">

    $(function () {

        $.messager.alert("操作提示", "您确定要执行操作吗!","question");

    });

</script>

 
warning效果
 


<script type="text/javascript">

    $(function () {

        $.messager.alert("操作提示", "您确定要执行操作吗!","warning");

    });

</script>

 

3>、function使用

 


<script type="text/javascript">

    $(function () {

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

            var i = 1;

            alert(i);

        });

    });

</script> 

 

2、$.messager.confirm(title, msg, fn)

 

 
JScript 代码   复制


<script type="text/javascript">

    $(function () {

        $.messager.confirm("操作提示", "您确定要执行操作吗?", function (data) {

            if (data) {

                alert("确定");

            }

            else {

                alert("取消");

            }

        });

    });

</script>

 

3、$.messager.prompt(title, msg, fn)

 

 
JScript 代码   复制


<script type="text/javascript">

    $(function () {

        $.messager.prompt("操作提示", "您确定要执行操作吗?", function (data) {

            if (data) {

                alert(data);

            }

        });

    });

</script>

 

4、$.messager.show(options)

 

 
JScript 代码   复制

    <script type="text/javascript">

        $(function () {

            $.messager.show({

                title: "操作提示",

                msg: "请选择您要删除的记录!",

                showType: 'slide',

                timeout: 5000

            });

        });

    </script>

其中:showType 设置值:"show"、"slide"、"fade" 

 

5、修改Button显示文字

 

 
JScript 代码   复制


<script type="text/javascript">

    $(function () {

        $.messager.defaults = { ok: "", cancel: "" };

 

        $.messager.confirm("操作提示", "您确定要执行操作吗?", function (data) {

            if (data) {

                alert("");

            }

            else {

                alert("");

            }

        });

    });

</script>

 

收藏
359
很赞
323