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 |
在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象: |
$.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基本使用相关推荐
- $.messager的使用笔记
jQueryEasyUI Messager基本使用 $.messager.alert(title, msg, icon, fn) 基本用法 $(function () {$.messager.aler ...
- 如何使用$.message
jQueryEasyUI Messager基本使用 一.jQueryEasyUI下载地址 http://www.jeasyui.com/ 二.jQueryEasyUI Messager基本使用 1.$ ...
- jQueryEasyU- Messager基本使用
jQueryEasyUI Messager基本使用 $.messager.alert(title, msg, icon, fn) 基本用法 : eg.$.messager.alert(" ...
- easyui 取消按钮_jQueryEasyUI 重写“确定”与“取消”按钮
二.jQueryEasyUI Messager基本使用 1.$.messager.alert(title, msg, icon, fn) 1>.基本用法 代码: 效果图: 2>.icon使 ...
- UI组件:ext、JqueryEasyUI、miniui、dhtmlx及自定义页面
这篇博文主要是分析下当前经常使用到的UI组件,他们的效果和功能一般都可以满足我们平常项目使用,但对于较复杂些的项目建议你要斟酌下再决定是否使用?如何去用?尤其是字段和数据源都是后台动态生成那么考验性更 ...
- [原]ASP.NET中使用JQUERY-EASYUI后,解决ClientScript.RegisterStartupScript 所注册脚本执行两次...
最近开发的项目引用了 jquery-easyui 界面框架,对于界面的布局便利了很多,但也遇到了不少问题.我也很少做总结,今天解决的这个问题搁了好久,实在不行了,才着手处理. 问题现象 为了保持界面表 ...
- java jquery easyui_java中用jquery-easyui插件做可编辑datagird列表
jquery-easyui插件中datagrid列表(可编辑) 在某一天,我静静的花了些时间写了自认为一套还不错的可编辑的datagrid列表完整版,于是乎,想做个笔记,望各位指教哦! 下面是我的小成 ...
- jQueryEasyUI应用 – datagrid之CRUD应用
本文 jQueryEasyUI + SpringBoot + Mybatis整合Datagrid的CRUD应用 一.前言准备 1.我们将使用下面的插件: datagrid:向用户展示列表数据. dia ...
- 使用jQuery开发messager消息框插件
1.插件使用 首先引入jquery库,然后引入dialog.js.dialog.css.messager.js.messager.css,如下: 1 <script type="tex ...
最新文章
- 洛谷 - P2045 - 方格取数加强版 - 费用流
- python精通-干货|Python学习必须精通的几个模块
- python 期货交易_Python期货量化交易基础教程(8)
- 数据结构之通过C++来实现一个队列
- 微服务【1.1】Swagger的使用
- memcache 总结笔记
- word文档保存到服务器,读取SQL表数据保存到Word并将Word文档保存到服务器代码
- L1-050 倒数第N个字符串-PAT团体程序设计天梯赛GPLT
- 【最短路】Floyd算法:2020蓝桥最短路
- ORC 和 Parquet比较入门
- dsp 链接命令文件的写法
- python之通过thread来实现多进程
- iconv-----linux gbk 转 UTF-8
- Linux文档备份工具,推荐8款免费Linux备份工具
- Faster R-CNN算法详细流程
- 提前三天教你们python制作万能抢购神器,学不会就准备过光棍节吧
- 【PHP兴趣部落-08】PHP中时区设置的三种方法(timezone)
- java通过LocalDateTime获取上周几
- 评价类(观点)题和理解类题目的辨析 区别一:审题干信息和题目要求。
- C语言中全局数组外部引用的小问题
热门文章
- 查看一张表都有哪些用户有权限_有赞移动关于权限与审批流程的标准化
- Java并发包基石-AQS详解
- Tomcat 项目代码上线步骤详解
- 高可用之KeepAlived(2):keepalived+lvs
- windows下常用DOS命令
- SOAP的Could not connect to host in...报错解决方案
- TI DSP simulator 种类选择
- Java知识点总结(Java容器-ArrayList)
- 聊聊 Spring Boot 2.x 那些事儿
- 数据库名、实例名、数据库域名、全局数据库名、服务名 我也迷糊了