jquery-confirm使用方法
简要教程
jquery-confirm是一款功能强大的jQuery对话框和确认框插件。它提供多种内置的主题效果,可以实现ajax远程加载内容,提供动画效果和丰富的配置参数等。它的特点还有:
- 可以使用键盘控制对话框。
- 通过ajax加载对话框的内容。
- 可以在指定时间之后自动关闭对话框。
- 提供丰富的参数和回调函数。
使用方法
基本调用
$.confirm({
confirm: function(){
console.log('the user clicked confirm');
},
cancel: function(){
console.log('the user clicked cancel');
}
});
全局默认参数
jconfirm.defaults = {
title: 'Hello',
content: 'Are you sure to continue?',
contentLoaded: function(){
},
icon: '',
confirmButton: 'Okay',
cancelButton: 'Close',
confirmButtonClass: 'btn-default',
cancelButtonClass: 'btn-default',
theme: 'white',
animation: 'zoom',
closeAnimation: 'scale',
animationSpeed: ,
animationBounce: 1.2,
keyboardEnabled: false,
rtl: false,
confirmKeys: [], // ENTER key
cancelKeys: [], // ESC key
container: 'body',
confirm: function () {
},
cancel: function () {
},
backgroundDismiss: false,
autoClose: false,
closeIcon: null,
columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
onOpen: function(){
},
onClose: function(){
},
onAction: function(){
}
};
配置参数
jquery-confirm插件的可用配置参数有:
参数 | 类型 | 默认值 | 描述 |
title | String | 'Hello' | 对话框的标题 |
content | String, Function | 'Are you sure to continue?' | 对话框的内容,也可以通过一个函数返回ajax内容 |
contentLoaded | function | function(){} | 如果通过url前缀来调用内容,如url:http://abc.com/xyz ,该参数将是回调函数 |
icon | String | '' | 标题前面的图标 |
confirmButton | String | 'Okay' | 确认按钮的文本 |
cancelButton | String | 'Close' | 取消按钮的文本 |
confirmButtonClass | String | 'btn-default' | 确认按钮的的class |
cancelButtonClass | String | 'btn-default' | 取消按钮的class |
theme | String | 'white' | 对话框的颜色主题,可选值有:'white', 'black', 'material' , 'bootstrap' |
animation | String | 'zoom' | 打开对话框时的动画效果。可选值有: right, left, bottom, top, rotate, none, opacity, scale, zoom, scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse) |
closeAnimation | String | 'scale' | 关闭对话框时的动画,和animation参数的可选值相同 |
animationSpeed | Number | 500 | 动画的持续时间,单位毫秒 |
animationBounce | Float | 1.2 | 打开对话框时添加弹性效果,1=没有弹性效果 |
keyboardEnabled | Boolean | false | 使用回车键来确认,使用Esc键来取消 |
confirmKeys | Array | [13] | 当使用keyboardEnabled 参数时,可以设置一组键来触发确认事件,默认为13 |
cancelKeys | Array | [27] | 当使用keyboardEnabled 参数时,可以设置一组键来触发取消事件,默认为27 |
rtl | Boolean | false | 使用从右到左的布局 |
container | String | 'body' | 指定生成的对话框代码被添加到哪里 |
confirm | Function | function(){} | 用户点击了确认按钮之后的回调函数 |
cancel | Function | function(){} | 用户点击了取消按钮之后的回调函数 |
backgroundDismiss | Boolean | false | 是否允许点击对话框之外的区域来关闭对话框 |
autoClose | String | false | 在指定的时间之后如果用户没有响应则自动关闭对话框。取值:'confirm|400' |
closeIcon | Boolean | null | 在对话框没有按钮的情况下,关闭按钮是可见的。将该参数设置为true可看见关闭按钮 |
closeIconClass | String | false | 默认使用'X'作为关闭按钮,你可以通过该参数来修改 |
columnClass | String | 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1' |
使用Bootstrap网格系统来进行布局 |
onOpen | Function | function(){} | 当对话框元素被渲染之后触发 |
onClose | Function | function(){} | 当对话框被关闭时触发 |
onAction | Function | function(){} | 当任何指令被执行后都会触发该回调函数 |
watchInterval | Number | 100 | Watch the modal for changes and gets centered on the screen |
API
通过var jc = $.confirm()会返回一个对象实例的引用。通过jc引用可以打开对话框。 var jc = $.confirm({title: 'awesome'}); // jc will be used in the examples below jc.close():关闭对话框。
var jc = $.confirm({
...
})
jc.close(); // destroy. jc.isClosed():返回对话框是否被关闭的布尔值。
jc.setTitle(string):设置标题。
jc.setContent(string):设置内容。
jc.setIcon(iconClass):设置按钮。
jc.setDialogCenter():将对话框居中显示。
jc.$body:别名:jc.$b,模态窗口对象。
jc.$content:别名:jc.contentDiv。可以通过该对象来访问对话框的内容。
var jc = $.confirm({
content: 'Yeah, this is awesome'
})
console.log(jc.$content.html()); // Yeah, this is awesom
jc.$title:可访问标题的对象。
jc.$icon:可访问图标的对象。
jc.$confirmButton:可访问确认按钮的对象。
jc.$cancelButton:可访问取消按钮的对象。
jc.$closeButton:可访问关闭按钮的对象。
jc.$target:可访问点击元素的对象。
jquery-confirm使用方法的更多相关文章
- 黄聪:jquery.confirm弹出确认消息
1.插件介绍 该确认框的默认样式如: 1.1.插件默认参数 // 默认参数 $.confirm.defaults = { // 样式 css: "http://static.qianduan ...
- MVC异步AJAX的三种方法(JQuery的Get方法、JQuery的Post方法和微软自带的异步方法)
异步是我们在网站开发过程中必不可少的方法,MVC框架的异步方法也有很多,这里介绍三种方法: 一.JQuery的Get方法 view @{ Layout = null; } <!DOCTYPE h ...
- jQuery Mobile中jQuery.mobile.changePage方法使用详解
jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mo ...
- jquery 通过submit()方法 提交表单示例
jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...
- jquery.on()超级方法
$.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- jQuery的extend方法
jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({}) ,为jQuery类添加方法,可以理解为扩 ...
- jQuery中eq()方法用法实例
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代 ...
- HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
随机推荐
- 进程间传递文件描述符——sendmsg和recvmsg函数
先引入一个例子,该程序的目的是子进程向父进程传递文件描述符,并通过该文件描述符读取buf. #include <func.h> int main(){ int fds[2]; pipe(f ...
- 实现Linux下od -tx -tc XXX的功能
实现Linux下od -tx -tc XXX的功能 一.od命令 (1)功能 od命令用于将指定文件内容以八进制.十进制.十六进制.浮点格式或ASCII编码字符方式显示,通常用于显示或查看文件中不能直 ...
- mysql通过now()获取的时间不对
先用now()获取系统时间,发现时间不对(差8个小时): mysql> select now(); +---------------------+ | now() | +------------ ...
- 刘志梅2017710101152.《面向对象程序设计(java)》第十二周学习总结
实验十二 图形程序设计 实验时间 2018-11-14 1.理论知识 (1) 基本AWT库采用将处理用户界面元素的任务委派给每个目标平台的本地GUI工具箱的方式,由本地GUI工具箱负责用户界面元素的 ...
- Keras bug in model.predict
When I use Keras to predict behind a web service, it occurred an error. and the error message is lik ...
- DB2调优摘要
感谢原博主 http://yishueitian326.blog.163.com/blog/static/2858637520106695733719/ 性 能是关系到随需应变型应用程序成功与否的关键 ...
- 关于微信内置浏览器在ios上播放提示音的经验分享
document.addEventListener("WeixinJSBridgeReady", function () { window.audio= new Audio() w ...
- 优于 swagger 的 java markdown 文档自动生成框架-01-入门使用
设计初衷 节约时间 Java 文档一直是一个大问题. 很多项目不写文档,即使写文档,对于开发人员来说也是非常痛苦的. 不写文档的缺点自不用多少,手动写文档的缺点也显而易见: 非常浪费时间,而且会出错. ...
- 图表相同数据会自动合并问题(finereport)
finereport中,对于图表的操作,当遇到需要显示多个重复分类下的多个值时,由于自动合并相同数据,无法达到效果反复查询手册无果后,困扰好久,终想到了一个解决的办法:1.给查询的数据添加个列序号,每 ...
- Javascript面向对象编程(一)
什么是面向对象? 它是一种新的编程模式.以往的面向过程是将功能都写在一起,逐行实现.面向对象与其不同,它只关心对象提供的功能,而不在乎细节. 面向对象的特点? 抽象:抓住问题的核心,贯穿始终: 封装: ...