简要教程

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：可访问点击元素的对象。