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