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: 500,animationBounce: 1.2,keyboardEnabled: false,rtl: false,confirmKeys: [13], // ENTER keycancelKeys: [27], // ESC keycontainer: '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：可访问点击元素的对象。

转载于:https://www.cnblogs.com/4job/p/10669922.html

jquery-confirm使用方法相关推荐

jQuery Mobile中jQuery.mobile.changePage方法使用详解
jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mo ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
Jquery源码中的Javascript基础知识（四）— jQuery.fn.init方法
$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) {return new jQuery.fn.init( selector ...
jquery中not方法失效的解决方案
jquery中not方法失效的解决方案参考文章: (1)jquery中not方法失效的解决方案 (2)https://www.cnblogs.com/xxqxxq/p/9269669.html 备忘 ...
jQuery使用blur()方法触发两次的解决方法
jQuery使用blur()方法触发两次的解决方法参考文章: (1)jQuery使用blur()方法触发两次的解决方法 (2)https://www.cnblogs.com/wgl1995/p/92 ...
使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题
使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题参考文章: (1)使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 ( ...
jquery 异步调用方法中不能给全局变量赋值的原因及解决办法
在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:t ...
jquery的$.extent()方法的总结
1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. 2.jQuery.fn.extend(object);给jQuery对象添加方法. jQuery.fn ...
理解一下jQuery.extend()和jQuery.fn.extend()方法
为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法. 1. jQuery.extend() 方法有一个重载. jQuery.extend( ...
jquery selector 使用方法
jquery selector 使用方法 <select class="selector"></select> 1 设置value为pxx的项选中$(&qu ...

jquery-confirm使用方法

简要教程

使用方法

基本调用

全局默认参数

配置参数

API

jquery-confirm使用方法相关推荐

最新文章

热门文章