转载 jQueryEasyUI Messager基本使用
http://www.cnblogs.com/libingql/archive/2011/07/17/2109020.html
一、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 |
转载 jQueryEasyUI Messager基本使用的更多相关文章
- [转]jQueryEasyUI Messager基本使用
一.jQueryEasyUI下载地址 http://www.jeasyui.com/ 二.jQueryEasyUI Messager基本使用 1.$.messager.alert(title, msg ...
- jQueryEasyUI Messager基本使用
二.jQueryEasyUI Messager基本使用 1.$.messager.alert(title, msg, icon, fn)1>.基本用法 代码: 1 2 3 4 5 6 7 8 9 ...
- easy ui 框架
Easy UI 准备工作(搭建) 1.在WebRoot 的目录下创建js 文件夹,在文件夹中倒入一下两个包 Jquery.easyui.min.js jquery.min.js 2.在WebRoot ...
- jquery-easyui实现页面布局和增删改查操作（SSH2框架支持）转载
http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hiberna ...
- 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 ...
- jquery-easyui中改变【确认框控件的按钮文字】（$.messager.confirm）
根据API这句话,就很自然想到重写该方法,代码如下: $.messager.defaults = { ok: "通过", cancel: "不通过" ,widt ...
- 2.EasyUI学习总结(二)——easyloader分析与使用(转载)
本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...
- EasyUI学习总结(三)——easyloader源码分析(转载)
声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...
- EasyUI学习总结(二)——easyloader分析与使用(转载)
本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...
随机推荐
- 【一天一道LeetCode】#231. Power of Two
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
- UNIX环境高级编程——线程属性之分离属性
说到线程的分离状态,我认为,之所以会有这个状态,是因为系统对某些线程的终止状态根本不感兴趣导致的. 我们知道,进程中的线程可以调用: int pthread_join(pthread_t tid, v ...
- SpriteBuilder实现2D精灵光影明暗反射效果(二)
使用SpriteBuilder新建一个项目,将默认MainScene.ccb中的内容统统删掉,此时场景应该是一片漆黑. 将官网中的2张图片以及我自己做的2张图片全部拖拽到其文件视图中去: 其中加_n后 ...
- Android的图片，字符串，demin，color，以及Array，boolean，Integer资源的使用-android学习之旅（五十四）
总体介绍 颜色值的定义 定义字符串,颜色,尺寸资源 字符串 颜色资源 尺寸资源 使用字符串,颜色,尺寸资源 boolean的定义与使用 整形常量的定义与使用 数组资源的定义与使用 图片资源的使用
- Android进阶(二)https请求No peer certificate的解决方法.
在做Android客户端通过https协议访问12306,并爬取数据时,出现了如下错误: 其中有一条错误提示是 javax.net.ssl.SSLPeerUnverifiedException: No ...
- 调用awk的三种方式
调用awk的三种方式 调用awk有三种方式,一种为Shell命令行方式,另外两种是将awk程序写入脚本文件,然后执行该脚本文件.三种方式的命令格式归纳如下: 一.在Shell命令行输入命令调用awk, ...
- 谈谈Ext JS的组件——布局的使用方法续一
盒子布局 盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域.这也是比较常有的布局方式. 使用 ...
- Chipmunk僵尸物理对象的出现和解决(二)
如第一篇文章中图片所示,该游戏是一个弹球游戏. 玩法很简单,屏幕底部有一个反弹棒,用来确保小球不掉出屏幕同时反弹小球撞击屏幕上方的砖块. 玩家可以触摸屏幕来左右移动反弹棒. 等等!还不是这么简单,当小 ...
- Leetcode_19_Remove Nth Node From End of List
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41778305 Given a linked list, r ...
- (NO.00001)iOS游戏SpeedBoy Lite成形记(二十六)
到目前为止,选手跑到终点时仿佛没什么激动人心的事情发生呢?貌似需要添加一些胜利的特效啊! 前面说好的不添加特效,只完成游戏功能的诺言呢? T T 我们主要想实现这样一个特效效果: 1.胜利的玩家突出显 ...