原文参见: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 |
在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象: |
$.messager.alert |
title, msg, icon, fn |
显示一个警告窗口。参数如下: |
$.messager.confirm |
title, msg, fn |
显示一个含有确定和取消按钮的确认消息窗口。参数如下: |
$.messager.prompt |
title, msg, fn |
显示一个确定和取消按钮的信息提示窗口,提示用户输入一些文本。参数如下: |
7、扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字 |
类型 |
描述 |
默认值 |
|
ok |
字符串 |
Ok |
按钮上的文本 |
Ok |
cancel |
字符串 |
Cancel |
按钮上的文本 |
Cancel |
相关推荐
根据提供的文件信息,本文将详细解释与“jQuery EasyUI”相关的知识,特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...
在jQuery EasyUI 1.5.1的中文API文档中,开发者可以找到每个组件的详细说明,包括其基本用法、参数配置、方法和事件。这有助于理解和应用这些组件,以创建功能丰富的用户界面。例如,通过`dialog`的`options`属性,...
- **依赖关系**:确保 jQuery 版本与 EasyUI 兼容,通常推荐使用 jQuery 1.x 或 2.x 版本。 - **CSS 样式**:EasyUI 提供了默认的主题样式,也可以自定义主题来满足个性化需求。 #### 2. **基本组件** - **按钮**:...
jQuery EasyUI 是一个轻量级且功能丰富的前端开发框架,基于 ...在学习和使用 jQuery EasyUI 的过程中,建议参考官方文档,了解每个组件的详细用法和示例,以便更好地利用这个框架来创建高效、美观的 Web 应用程序。
这次依然以BUG修复和功能改进为主,EasyUI发展至今,主体功能已经基本完善。即便以后还有新组件,那也是在现有功能完善的基础上新增一些小组件了,类似Datagrid这类的大型复合组件应该比较少了,相比新组件我更期待...
这个"Jquery EasyUI Demo"集成了这些组件的基本用法,通过查看和运行代码,开发者可以快速掌握EasyUI的使用方法,并将其应用到自己的项目中。对于初学者来说,这是一个很好的学习资源,对于经验丰富的开发者,也是一...
jQuery EasyUI 是一个基于 jQuery 的 Web UI 框架,专为简化网页界面开发而设计。这个框架的特点在于,开发者只需编写少量的 JavaScript 代码,就能实现丰富的交互效果和美观的用户界面。EasyUI 提供了一系列组件,...
我个人预计在未来的1~2个版本里会有不少BUG修复的更新内容,今后EasyUI定会发力移动开发方向,所以也算是一个好的开头,虽然目前东西还不是很全,但是基本的也都够用了,希望EasyUI今后会越来越好吧!由于现在工作...
jQuery EasyUI 是一款基于 jQuery 的前端开发框架,它简化了网页界面开发...以上就是关于jQuery EasyUI的基本介绍,结合提供的中文文档,开发者可以更深入地理解和使用这个强大的前端框架,快速构建出高质量的Web应用。
5. **节省时间和资源**:使用 jQuery EasyUI 可以显著减少编写和维护前端代码的工作量,提高开发效率。 6. **可扩展性**:允许开发者根据需求自定义和扩展控件,以满足特定项目的需求。 7. **不断改进**:随着版本...
jQuery EasyUI 还包含日期时间选择器(Datebox、Datetimebox)、日历(Calendar)、滑块(Slider)等控件,以及数据展示组件如 DataGrid、TreeGrid,窗口组件如 Window 和 Dialog,以及消息提示组件 Messager。...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面的开发,提供了一系列易于使用的组件,如对话框、表单、数据网格、菜单、工具栏等。1.5 版本是其一个重要的更新,引入了更多的功能和优化,以适应...
在Asp.net开发中,我们经常..."Aspdotnet中使用Jqueryeasyui的Confirm.txt" 和 "注释.txt" 可能包含更详细的代码示例或说明,而 "更新说明.txt" 可能记录了资源的更新历史。这些文件可以帮助深入理解或扩展上述知识点。
此文档为 **jQuery EasyUI 1.4.5版本** 的官方API文档中文版,由 Richie696 制作,主要面向使用中文的开发人员。 该文档详细介绍了 jQuery EasyUI 各个组件的功能、用法以及API细节,对于初学者来说是一份非常宝贵...
以上只是jQuery EasyUI部分核心概念的概述,实际使用中还涉及更多的API、事件和自定义配置,开发者可以根据需求深入学习和应用。为了更好地利用EasyUI,建议查阅完整且详细的中文帮助文档,以便理解和掌握每个组件的...
根据提供的文件信息,我们可以生成关于easyui框架及其与jQuery结合使用的知识点。easyui是一个基于jQuery的用户界面插件集合,它提供了包括数据网格、菜单、对话框、面板等多种组件,旨在帮助开发者快速构建现代化的...