使用jQuery开发messager消息框插件
1、插件使用
首先引入jquery库,然后引入dialog.js、dialog.css、messager.js、messager.css,如下:
<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/dialog.js"></script>
<link rel="stylesheet" href="css/blue/dialog.css"/>
<script type="text/javascript" src="js/messager.js"></script>
<link rel="stylesheet" href="css/blue/messager.css"/>
messager插件是$.messager上面的静态函数,有:alert、confirm和message三个函数
下面函数打开一个默认大小的alert消息框,内容为“请填写执行情况(200字以内)”,级别为警告,按钮文字为“知道了”,1秒后关闭,显示、关闭动画为slide
function openAlert() {
$.messager.alert({
title: '信息',
content: '请填写执行情况(200字以内)',
level: 'warning', // success|info|question|warning|error
btn: '知道了',
time: 1000,
callback: function() {
// location.reload();
},
showType: 'slide' // slide|fade
});
}
下面函数打开一个默认大小的confirm确认框,内容为您确定删除员工“John”吗,点击确认后打开一个message信息框,这个信息框2秒后关闭
function openConfirm() {
$.messager.confirm({
title: '信息',
content: '您确定删除员工“John”吗?',
btn: [
{ text: '确定', callback: function() {
$.messager.message({
content: '员工数据删除成功。',
time: 2000
});
} },
{ text: '取消', callback: function() {} }
]
});
}
下面函数打开一个默认大小的message信息框,内容为“员工数据删除成功”,信息框2秒后关闭,显示、关闭动画为fade
function openMessage() {
$.messager.message({
title: '信息',
content: '员工数据删除成功。',
showType: 'fade',
callback: function() {
//$('#tab1').tab(
// 'removeTab', 'tab15'
//);
},
time: 2000
});
}
2、$.messager函数
函数名 | 参数 | 功能 | 返回值 | 示例 |
alert | Object | 打开一个提示框 | 无 |
$.messager.alert({ |
confirm | Object | 打开一个确认框 | 无 |
$.messager.confirm({ |
message | Object | 打开一个消息框 | 无 |
$.messager.message({ |
3、$.messager.alert函数配置选项
选项 | 类型 | 作用 |
---|---|---|
title | string | 提示框的标题,默认为“信息” |
width | int | 提示框插件div的宽,默认250 |
height | int | 提示框插件div的高,默认170 |
modal | boolean | 模态对话框配置,默认true |
content | string | 内容字符串,默认为“页面出现错误。” |
level | string | 设置提示级别图标,内置有success、info、question、warning和error,默认warning |
btn | string | 按钮显示的文字,默认“确定” |
callback | function | 关闭时执行的函数,默认null |
time | int | 该值大于0时,提示框会在对应毫秒后自动关闭,默认0即不会自动关闭 |
showType | string | 显示、关闭提示框时的动画效果,有slide和fade两种,默认无动画效果 |
4、$.messager.confirm函数配置选项
选项 | 类型 | 作用 |
---|---|---|
title | string | 确认框的标题,默认为“确认” |
width | int | 确认框插件div的宽,默认250 |
height | int | 确认框插件div的高,默认170 |
modal | boolean | 模态对话框配置,默认true |
content | string | 内容字符串,默认为“请确认?” |
btn | [] | 定义按钮文字内容、点击函数,例如: btn: [ { text: '确定', callback: function() {} }, { text: '取消', callback: function() {} } ] |
showType | string | 显示、关闭确认框时的动画效果,有slide和fade两种,默认无动画效果 |
5、$.messager.message函数配置选项
选项 | 类型 | 作用 |
---|---|---|
title | string | 消息框的标题,默认为“信息” |
width | int | 消息框插件div的宽,默认250 |
height | int | 消息框插件div的高,默认120 |
modal | boolean | 模态对话框配置,默认false |
content | string | 内容字符串,默认为“操作成功。” |
callback | function | 关闭时执行的函数,默认null |
time | int | 该值大于0时,消息框会在对应毫秒后自动关闭,默认0即不会自动关闭 |
showType | string | 显示、关闭消息框时的动画效果,有slide和fade两种,默认无动画效果 |
6、演示和代码
dialog.js http://5ijy01.duapp.com/jq-ui/js/dialog.js
dialog.css http://5ijy01.duapp.com/jq-ui/css/blue/dialog.css
messager.js http://5ijy01.duapp.com/jq-ui/js/messager.js
messager.css http://5ijy01.duapp.com/jq-ui/css/blue/messager.css
Github https://github.com/xuguofeng/jq-ui
演示项目 http://5ijy01.duapp.com/jq-ui/index.html
使用jQuery开发messager消息框插件的更多相关文章
- 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh(复习) 4、 SpringData-JPA持久层入门案例(重点) 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用
1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- jQuery动态提示消息框效果
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...
- 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框
EasyUI Window 窗口 扩展自 $.fn.panel.defaults.通过 $.fn.window.defaults 重写默认的 defaults. 窗口(window)是一个浮动的.可拖 ...
- 使用jQuery开发datatable分页表格插件
当系统数据量很大时,前端的分页.异步获取方式就成了较好的解决方案.一直以来,我都希望使用自己开发的 jquery 插件做系统. 现在,学习了 jquery 插件开发之后,渐渐地也自己去尝试着开发一些简 ...
- EasyUI - Messager消息框
全局设定: JavaScript代码: //设置按钮中的文字,默认是-ok/cancel ,可以任意设置文字,比如现在的-确认/取消 $.messager.defaults = { ok: '确认', ...
- EasyUI Messager 消息框
通过 $.messager.defaults 重写默认的 defaults. 消息框(messager)提供不同样式的消息框,包括警示(alert).确认(confirm).提示(prompt).进展 ...
- EasyUI 修改 Messager 消息框大小
需求是要修改确认消息窗口的大小. 简单的调用方法是这样的: $.messager.confirm('操作确认', '确定批量编辑文章?', function (r) { ... } 这个时候生成的弹窗 ...
- jQuery+css3弹出框插件
先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var ...
随机推荐
- Node.js之删除文件夹(含递归删除)
应用场景:比如像Eclipse这样的IDE,右击项目,出现选项,点击选项中的删除,就可以删除这个项目及其下的子目录包含文件(使用electron开发的桌面端项目多少都会用到). 核心代码如下: /** ...
- pypy安装与使用
首先安装pypy环境: yum install pypy -y yum install pypy-devel -y 然后安装pypy的pip:wget https://bootstrap.pypa.i ...
- C#中的断言(Assert)
重构-断言 现象:某一段代码需要对程序状态做出某种假设 做法:以断言明确表现这种假设 动机: 常常有这种一段代码:只有某个条件为真是,该改名才能正常运行. 通常假设这样的假设并没有代码中明确表现出来, ...
- WMS开发环境
须安装以下三个软件: JASPER报表开发工具:TIB_js-studiocomm_6.5.1.final_windows_x86_64.exe UI开发工具:Studio_7.0.0.0_win32 ...
- django 表操作
添加表纪录 # Create your models here. class Book(models.Model): id = models.AutoField(primary_key=True) t ...
- [LeetCode] 675. Cut Off Trees for Golf Event 为高尔夫赛事砍树
You are asked to cut off trees in a forest for a golf event. The forest is represented as a non-nega ...
- 阿里云盾AliYunDun服务IO超高
停止阿里云盾AliYunDun服务解决大量写磁盘问题-小内存ECS服务器 阿里云数据库在没备案,涉及大量IO操作时会自动启动阿里云盾这个服务,会导致服务器变得很卡,一直持续百分之99,一顿重启没有什么 ...
- svn密码找回
TortoiseSVN Password Decrypterhttp://www.leapbeyond.com/ric/TSvnPD/点击打开链接去这个地址下载这个,然后直接运行,就可以看到你的use ...
- 【VS开发】MFC多显示器适配显示设置
由于工程需要在多个显示器上显示不同类容,故查找了一些资料来满足这个功能.在VC中分为三步来操作:检测显示器个数:读取屏幕分辨率和其他参数:设置程序的显示坐标. 第一步:检测屏幕个数 网上查找到的通用方 ...
- 【神经网络与深度学习】【计算机视觉】YOLO2
YOLO2 转自:https://zhuanlan.zhihu.com/p/25167153?refer=xiaoleimlnote 本文是对 YOLO9000: Better, Faster, St ...