一、jQueryEasyUI下载地址
二、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 |
在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象： |
|
$.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的用户界面插件集合，它提供了包括数据网格、菜单、对话框、面板等多种组件，旨在帮助开发者快速构建现代化的...