jquery-confirm使用方法

时间：2023-04-14 10:16:44
简要教程

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

相关文章