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：可訪問點擊元素的對象。