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 key
    cancelKeys: [27], // 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：可访问点击元素的对象。