[转]jQueryEasyUI Messager基本使用

一、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

时间: 2024-11-13 08:32:18

[转]jQueryEasyUI Messager基本使用的相关文章

jQueryEasyUI Messager基本使用

jQueryEasyUI Messager基本使用 转载于: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

转载 jQueryEasyUI Messager基本使用

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="ht

easy ui 框架

一.jQueryEasyUI Messager基本使用 jQuery.messager.alert("提示", "请完成必填项","warning"); 参考: http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html

jQueryEasyU- Messager基本使用

jQueryEasyUI Messager基本使用 $.messager.alert(title, msg, icon, fn) 基本用法 :    eg.$.messager.alert("操作提示", "操作成功!"); icon使用:icon四种设置:"error"."info"."question"."warning" eg.$.messager.alert("操作提示

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

http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hibernate实现了一个系统的一小部分功能,下面给大家分享一下. 首先看运行效果: [图一:登录页] [图二:页面布局] [图三:用户编辑层] [图四:确认弹出框] 准备 easyui插件简介在这就不赘述了,大家可以在iteye上找到很多该插件的相关消息. 如果页面需要使用easyui插件,需要引进一下js和

4、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle项目开发之——后台管理界面

这一章节比较简单,我就直接贴代码了,后台管理登陆界面如下: 对应的控制器HomeController.cs,代码如下: using YKT.Model; using YKT.Common; using YKT.BLL; using YKT.Common.HtmlHelpers; using YKT.Common.Functions; using Microsoft.Practices.Unity; using YKT.IBLL; namespace YKT.Controllers { publi

5、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle项目开发之——使用datagrid做报表统计

需要说明一点:数据库访问我使用的是EF框架,但是在报表统计着一块由于使用到了动态表,即根据每一天单独生成了一张数据表,所以不好使用EF进行预先添加,于是我在数据库访问层里面封装了两套数据库访问框架,一个就是EF,一个就是传统的ADO.NET.当设计到使用动态表时,我就调用用ADO.NET进行数据库访问操作了. 先看下View,这里我使用的是jquery easyUI里面的datagrid来做的报表.如下: 单击选中日报: 年报如下: @model YKT.Model.SubCompanyRepo

使用Jquery-easyUI的datagrid从后台加载数据不成功的解决办法

最近在用easyUI做一个注册页面总是出现从后台数加载不成功的问题,后来在一个师兄的指导下通过debug模式终于发现问题并解决了,以下记录我解决这一问题的过程.开发环境:jdk1.7,工具:eclipse,框架:spring-mvc spring-mvc的配置代码 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/sche

java中用jquery-easyui插件做可编辑datagird列表

jquery-easyui插件中datagrid列表(可编辑) 在某一天,我静静的花了些时间写了自认为一套还不错的可编辑的datagrid列表完整版,于是乎,想做个笔记,望各位指教哦! 下面是我的小成果~~ 案例功能演示图 (个别图稍微压缩或拉长,望不影响阅读) 除单机编辑按钮外,双击行也可开启编辑 一旦存在开启编辑后,未点击完成,则其他任何操作均不能操作,易操作就有提示 无论是单行删除还是批量删除,提醒必不可少 \ 若去掉复选框,是依然不影响操作的哦 新增行时,在当前页的最后一行会新增,然后可