`
xiaoyaocao
  • 浏览: 276406 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

【转】jQueryEasyUI Messager基本使用

阅读更多

原文参见:http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html

 

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

代码:

<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"
效果:

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

 

 

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

 

 

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

 

 

<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)
代码:

<script type="text/javascript">
    $(function () {
        $.messager.confirm("操作提示", "您确定要执行操作吗?", function (data) {
            if (data) {
                alert("确定");
            }
            else {
                alert("取消");
            }
        });
    });
</script>

 

效果图:



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

代码:

<script type="text/javascript">
    $(function () {
        $.messager.confirm("操作提示", "您确定要执行操作吗?", function (data) {
            if (data) {
                alert("确定");
            }
            else {
                alert("取消");
            }
        });
    });
</script>

 

效果图:



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

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

 

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

 

效果图:


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

5、修改Button显示文字

代码:

<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

分享到:
评论
1 楼 纵观全局 2016-12-05  
谢谢!!!

相关推荐

    jQuery EasyUI EasyUI 组件范例

    根据提供的文件信息,本文将详细解释与“jQuery EasyUI”相关的知识,特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...

    jQuery EasyUI 1.5.1 中文API文档(chm、exe、pdf)

    在jQuery EasyUI 1.5.1的中文API文档中,开发者可以找到每个组件的详细说明,包括其基本用法、参数配置、方法和事件。这有助于理解和应用这些组件,以创建功能丰富的用户界面。例如,通过`dialog`的`options`属性,...

    李炎恢jQuery EasyUI讲义代码

    - **依赖关系**:确保 jQuery 版本与 EasyUI 兼容,通常推荐使用 jQuery 1.x 或 2.x 版本。 - **CSS 样式**:EasyUI 提供了默认的主题样式,也可以自定义主题来满足个性化需求。 #### 2. **基本组件** - **按钮**:...

    jQueryEasyUI框架使用文档.pdf

    jQuery EasyUI 是一个轻量级且功能丰富的前端开发框架,基于 ...在学习和使用 jQuery EasyUI 的过程中,建议参考官方文档,了解每个组件的详细用法和示例,以便更好地利用这个框架来创建高效、美观的 Web 应用程序。

    jQuery EasyUI 1.4.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    这次依然以BUG修复和功能改进为主,EasyUI发展至今,主体功能已经基本完善。即便以后还有新组件,那也是在现有功能完善的基础上新增一些小组件了,类似Datagrid这类的大型复合组件应该比较少了,相比新组件我更期待...

    Jquery EasyUI Demo 例子

    这个"Jquery EasyUI Demo"集成了这些组件的基本用法,通过查看和运行代码,开发者可以快速掌握EasyUI的使用方法,并将其应用到自己的项目中。对于初学者来说,这是一个很好的学习资源,对于经验丰富的开发者,也是一...

    jQueryEasyUI中文框架使用文档

    jQuery EasyUI 是一个基于 jQuery 的 Web UI 框架,专为简化网页界面开发而设计。这个框架的特点在于,开发者只需编写少量的 JavaScript 代码,就能实现丰富的交互效果和美观的用户界面。EasyUI 提供了一系列组件,...

    jQuery EasyUI 1.4.2 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    我个人预计在未来的1~2个版本里会有不少BUG修复的更新内容,今后EasyUI定会发力移动开发方向,所以也算是一个好的开头,虽然目前东西还不是很全,但是基本的也都够用了,希望EasyUI今后会越来越好吧!由于现在工作...

    jqueryEasyUi包和中文文档

    jQuery EasyUI 是一款基于 jQuery 的前端开发框架,它简化了网页界面开发...以上就是关于jQuery EasyUI的基本介绍,结合提供的中文文档,开发者可以更深入地理解和使用这个强大的前端框架,快速构建出高质量的Web应用。

    jQueryEasyUI介绍.docx

    5. **节省时间和资源**:使用 jQuery EasyUI 可以显著减少编写和维护前端代码的工作量,提高开发效率。 6. **可扩展性**:允许开发者根据需求自定义和扩展控件,以满足特定项目的需求。 7. **不断改进**:随着版本...

    jQueryEasyUI介绍.pdf

    jQuery EasyUI 还包含日期时间选择器(Datebox、Datetimebox)、日历(Calendar)、滑块(Slider)等控件,以及数据展示组件如 DataGrid、TreeGrid,窗口组件如 Window 和 Dialog,以及消息提示组件 Messager。...

    jQuery EasyUI 1.5 版 API 中文版

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面的开发,提供了一系列易于使用的组件,如对话框、表单、数据网格、菜单、工具栏等。1.5 版本是其一个重要的更新,引入了更多的功能和优化,以适应...

    Aspdotnet中使用Jqueryeasyui的Confirm

    在Asp.net开发中,我们经常..."Aspdotnet中使用Jqueryeasyui的Confirm.txt" 和 "注释.txt" 可能包含更详细的代码示例或说明,而 "更新说明.txt" 可能记录了资源的更新历史。这些文件可以帮助深入理解或扩展上述知识点。

    jQuery EasyUI 1.4.5 版 API 中文.pdf

    此文档为 **jQuery EasyUI 1.4.5版本** 的官方API文档中文版,由 Richie696 制作,主要面向使用中文的开发人员。 该文档详细介绍了 jQuery EasyUI 各个组件的功能、用法以及API细节,对于初学者来说是一份非常宝贵...

    jquery easyui 中文帮助文档(最完整的API).docx

    以上只是jQuery EasyUI部分核心概念的概述,实际使用中还涉及更多的API、事件和自定义配置,开发者可以根据需求深入学习和应用。为了更好地利用EasyUI,建议查阅完整且详细的中文帮助文档,以便理解和掌握每个组件的...

    jquery easyui api PDF英文版带书签

    根据提供的文件信息,我们可以生成关于easyui框架及其与jQuery结合使用的知识点。easyui是一个基于jQuery的用户界面插件集合,它提供了包括数据网格、菜单、对话框、面板等多种组件,旨在帮助开发者快速构建现代化的...

Global site tag (gtag.js) - Google Analytics