http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html

一、jQueryEasyUI下载地址

http://www.jeasyui.com/

二、jQueryEasyUI Messager基本使用

1、$.messager.alert(title, msg, icon, fn)
1>、基本用法

代码:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>消息提示框</title>
    <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.messager.alert("操作提示", "操作成功!");
        });
    </script>
</head>
<body>
</body>
</html>

效果图:

2>、icon使用
icon四种设置:"error"、"info"、"question"、"warning"
效果:


1
2
3
4
5 <script type="text/javascript">
    $(function () {
        $.messager.alert("操作提示", "操作成功!","info");
    });
</script>


1
2
3
4
5 <script type="text/javascript">
    $(function () {
        $.messager.alert("操作提示", "操作失败!","error");
    });
</script>


1
2
3
4
5 <script type="text/javascript">
    $(function () {
        $.messager.alert("操作提示", "您确定要执行操作吗!","question");
    });
</script>


1
2
3
4
5 <script type="text/javascript">
    $(function () {
        $.messager.alert("操作提示", "您确定要执行操作吗!","warning");
    });
</script>

3>、function使用


1
2
3
4
5
6
7
8 <script type="text/javascript">
    $(function () {
        $.messager.alert("操作提示", "操作成功!", "info", function () {
            var i = 1;
            alert(i);
        });
    });
</script>

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


1
2
3
4
5
6
7
8
9
10
11
12 <script type="text/javascript">
    $(function () {
        $.messager.confirm("操作提示", "您确定要执行操作吗?", function (data) {
            if (data) {
                alert("确定");
            }
            else {
                alert("取消");
            }
        });
    });
</script>

效果图:

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

代码:


1
2
3
4
5
6
7
8
9 <script type="text/javascript">
    $(function () {
        $.messager.prompt("操作提示", "您确定要执行操作吗?", function (data) {
            if (data) {
                alert(data);
            }
        });
    });
</script>

效果图:

4、$.messager.show(options)
代码:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>消息提示框</title>
    <link href="/jquery-easyui-1.2.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="/jquery-easyui-1.2.4/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="/jquery-easyui-1.2.4/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.2.4/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/jquery-easyui-1.2.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $.messager.show({
                title: "操作提示",
                msg: "请选择您要删除的记录!",
                showType: 'slide',
                timeout: 5000
            });
        });
    </script>
</head>
<body>
</body>
</html>


1
2
3
4
5
6
7
8
9
10
11 <script type="text/javascript">
    $(function () {
        var options = {
            title: "操作提示",
            msg: "请选择您要删除的记录!",
            showType: 'slide',
            timeout: 5000
        };
        $.messager.show(options);
    });
</script>

效果图:


showType3种设置值:"show"、"slide"、"fade"

5、修改Button显示文字

代码:


1
2
3
4
5
6
7
8
9
10
11
12
13
14 <script type="text/javascript">
    $(function () {
        $.messager.defaults = { ok: "是", cancel: "否" };
 
        $.messager.confirm("操作提示", "您确定要执行操作吗?", function (data) {
            if (data) {
                alert("是");
            }
            else {
                alert("否");
            }
        });
    });
</script>

效果图:

6、方法

方法名

参数

描述

$.messager.show

options

在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象:
showType:定义如何将显示消息窗口。可用的值是:null,slide,fade,show。默认值是slide。
showSpeed:定义消息窗口完成的时间(以毫秒为单位), 默认值600。
width:定义消息窗口的宽度。 默认值250。
height:定义消息窗口的高度。 默认值100。
msg:定义显示的消息文本。
title:定义显示在标题面板显示的标题文本。
timeout:如果定义为0,消息窗口将不会关闭,除非用户关闭它。如果定义为非0值,当超时后消息窗口将自动关闭。

$.messager.alert

title, msg, icon, fn

显示一个警告窗口。参数如下:
title:显示在标题面板的标题文本。
msg:提示框显示的消息文本。
icon:提示框显示的图标。可用的值是:error,question,info,warning.
fn:当窗口关闭时触发的回调函数。

$.messager.confirm

title, msg, fn

显示一个含有确定和取消按钮的确认消息窗口。参数如下:
title:显示在标题面板的标题文本。
msg:确认消息窗口显示的消息文本。
fn(b):当用户点击按钮后触发的回调函数,如果点击OK则给回调函数传true,如果点击cancel则传false。

$.messager.prompt

title, msg, fn

显示一个确定和取消按钮的信息提示窗口,提示用户输入一些文本。参数如下:
title:显示在标题面板的标题文本。
msg:提示窗口显示的消息文本。
fn(val):用户点击按钮后的回调函,参数是用户输入的内容。

7、扩展

可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。

名字

类型

描述

默认值

ok

字符串

Ok

按钮上的文本

Ok

cancel

字符串

Cancel

按钮上的文本

Cancel

转载 jQueryEasyUI Messager基本使用的更多相关文章

  1. [转]jQueryEasyUI Messager基本使用

    一.jQueryEasyUI下载地址 http://www.jeasyui.com/ 二.jQueryEasyUI Messager基本使用 1.$.messager.alert(title, msg ...

  2. jQueryEasyUI Messager基本使用

    二.jQueryEasyUI Messager基本使用 1.$.messager.alert(title, msg, icon, fn)1>.基本用法 代码: 1 2 3 4 5 6 7 8 9 ...

  3. easy ui 框架

    Easy UI 准备工作(搭建) 1.在WebRoot 的目录下创建js 文件夹,在文件夹中倒入一下两个包 Jquery.easyui.min.js jquery.min.js 2.在WebRoot ...

  4. jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载

    http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hiberna ...

  5. jquery easyui 弹出消息框 (转载) jQuery EasyUI API 中文文档 - 消息框(Messager) http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407113.html

    <html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" ty ...

  6. jquery-easyui中改变【确认框控件的按钮文字】($.messager.confirm)

    根据API这句话,就很自然想到重写该方法,代码如下: $.messager.defaults = { ok: "通过", cancel: "不通过" ,widt ...

  7. 2.EasyUI学习总结(二)——easyloader分析与使用(转载)

    本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...

  8. EasyUI学习总结(三)——easyloader源码分析(转载)

    声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...

  9. EasyUI学习总结(二)——easyloader分析与使用(转载)

    本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...

随机推荐

  1. Android中JNI编程详解

    前几天在参加腾讯模拟考的时候,腾讯出了一道关于JNI的题,具体如下: JNI本身是一个非常复杂的知识,但是其实对于腾讯的这道题而言,如果你懂JNI,那么你可能会觉得这道题非常简单,就相当于C语言中的h ...

  2. scala学习笔记2(类,继承,抽象类)

    class Person{ // _ 是占位符; var name : String = _ val age : Int = 27 // private[this] 定义的内容无法外部使用,起到保护作 ...

  3. java实现异步调用实例

    在JAVA平台,实现异步调用的角色有如下三个角色: 调用者 取货凭证   真实数据 一个调用者在调用耗时操作,不能立即返回数据时,先返回一个取货凭证.然后在过一断时间后凭取货凭证来获取真正的数据.  ...

  4. java编程小记

    http://blog.csdn.net/pipisorry/article/details/51050189 很久没写java,什么都不会了,小记一下. 类型转换 字符串转int类型:Integer ...

  5. [Python]django使用多进程连接msyql错误

    问题 mysql 查询出现错误 error: (2014, "Commands out of sync; you can't run this command now") 查询 m ...

  6. Android进阶(二十六)MenuInflater实现菜单添加

    MenuInflater实现菜单添加 前言 之前实现的Android项目中可以实现菜单的显示.但是再次调试项目时发现此功能已无法实现,很是令人费解.难道是因为自己手机Android系统的问题?尝试通过 ...

  7. Linux C 下的大文件操作

    这里说的大文件指大小超过4G的文件. 在32位环境下,linux默认打开.读.写超过4G的文件会返回错误.定义如下宏可以突破这个限制,对read/write和fread/fwrite同时有效. 注意它 ...

  8. python循环for,range,xrange;while

    >>>range(1,5)#代表从1到5(不包含5) [1,2,3,4] >>>range(1,5,2)#代表从1到5,间隔2(不包含5) [1,3] >&g ...

  9. Order Management Useful Scripts

    Listed some useful queries scripts for Oracle Order Management Flow. (For Order Management Detailed ...

  10. 开源视频监控系统:iSpy

    iSpy是一个开源的视频监控软件,目前已经支持中文.自己用了一下,感觉还是很好用的.翻译了一下它的介绍. iSpy将PC变成一个完整的安全和监控系统 iSpy使用您的摄像头和麦克风来检测和记录声音或运 ...