碼迷,mamicode.com
首頁 > Web開發 > 詳細

bootbox.js官方文檔

時間:2018-05-08 00:49:44      閱讀:6092      評論:0      收藏:0      [點我收藏+]

標簽:通過   不顯示   出現   nes   參數詳解   custom   ===   選擇   views   

簡介

Bootbox.js是一個小型的JavaScript庫,基于Bootstrap模態框開發,用于創建可編程的對話框。
不像原生的alert等對話框,所有的Bootstrap模態框生成的都是非阻塞事件。所以 在使用confirm()對話框時,請記住這一點,因為它不是本地確認對話框的替代。 任何取決于用戶選擇的代碼都必須放在回調函數中。

alert

alert是只有單個按鈕的對話框,按ESC鍵或單擊關閉按鈕可關閉對話框。

bootbox.alert("Your message here…") 

message中可以放html語言,比如: 

bootbox.alert("Your message <b>here…</b>") 

回調函數: 

bootbox.alert("Your message here…", function(){ /* your callback code */ }) 

options選項自定義對話框:

bootbox.alert({ 
  size: "small",
  title: "Your Title",
  message: "Your message here…", 
  callback: function(){ /* your callback code */ }
})

Confirm

Confirm是具有確定和取消按鈕的對話框, 按ESC鍵或單擊關閉將忽略對話框并調用回調函數,效果等同于單擊取消按鈕。
需要注意的是,使用confirm時回調函數是必須的。

bootbox.confirm("Are you sure?", function(result){ /* your callback code */ }) 

options選項:

bootbox.confirm({ 
  size: "small",
  message: "Are you sure?", 
  callback: function(result){ /* result is a boolean; true = OK, false = Cancel*/ }
})

Prompt

Confirm是提示用戶進行輸入操作并確定或者取消的對話框, 按ESC鍵或單擊關閉將忽略對話框并調用回調函數,效果等同于單擊取消按鈕。
同樣,prompt中回調函數也是必須的。

bootbox.prompt("What is your name?", function(result){ /* your callback code */ }) 

options選項:

bootbox.prompt({ 
  size: "small",
  title: "What is your name?", 
  callback: function(result){ /* result = String containing user input if OK clicked or null if Cancel clicked */ }
})

注意:prompt在使用options選項時需要title選項,并且不允許使用message選項。

Custom Dialog

一個完全自定義的對話框方法,它只接收一個參數 - options對象。也就是說按ESC鍵時,這個自定義對話框將不會自動關閉,需要使用onEscape函數手動實現此行為。
options至少要有message選項,這時候將會出現一個不可撤銷的對話框,一般用作“loading”界面,如:

bootbox.dialog({ message: <div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div> })

options選項參數詳解

message

類型:String | Element
描述:顯示在對話框上的內容
必需:alert | confirm | custom dialogs

title

類型:String | Element
描述:為對話框添加標題,默認大小為<h4>
必需:prompts

callback

類型:Function
描述:回調函數
alert回調不提供參數,函數體為空則會被忽略,如:

bootbox.alert({ message: "I‘m an alert!", callback: function() {} })

confirm和prompt回調必須提供參數result。當為confirm時,result類型為boolean,用來判定是還是否;當為prompt時result將保存用戶輸入的值。

必需:confirm | prompt

bootbox.confirm("Are you sure?", function(result) {
    // result will be true or false
}); 
bootbox.prompt("What is your name?", function(result) {
    if (result === null) {
        // Prompt dismissed
    } else {
        // result has a value
    }
}); 

 onEscape

類型:Boolean | Function
描述:允許用戶通過點擊ESC來關閉對話框,點擊ESC這將調用此選項。
默認值 : alert | confirm | prompt : true ; custom dialogs : null
必需:alert | confirm | custom dialogs

show

類型:Boolean
描述:是否立即顯示對話框
默認值 : null

backdrop

類型:Boolean
描述:對話框是否有背景,還可以確定點擊背景是否退出模態。
Undefined (null) 顯示背景,點擊背景不會觸發事件
true * 顯示背景,點擊背景會取消此對話框
false 不顯示背景
注意:當此值設置為true時,僅當onEscape設置esc也可以關閉時,對話框才會關閉
默認值 : null

closeButton

類型:Boolean
描述:對話框是否顯示關閉按鈕
默認值 : true

animate

類型:Boolean
描述:顯示動畫效果(需要瀏覽器支持)
默認值 : true

className

類型:String
描述:為對話框增加額外的css文件
默認值 : null

size

類型:String
描述:將Bootstrap模態大小類添屬性加到對話框包裝器,有效值為‘large‘‘small‘,需要Bootstrap 3.1.0以上。
默認值 : null

buttons

類型:Object
描述:按鈕被定義為JavaScript對象。 定義按鈕的最小定義是:

"Your button text": function() {
}

你可以設置的其他屬性有:

buttonName : {
  label: Your button text,
  className: "some-class",
  callback: function() {
  }
}

其中buttoName應為:

alert       ok
confirm     cancel, confirm
prompt      cancel, confirm

每個可用的按鈕選項都可以被重寫,以使用自定義內容(文本或HTML)和CSS樣式。 例如:

bootbox.confirm({
    message: "This is a confirm with custom button text and color! Do you like it?",
    buttons: {
        confirm: {
            label: Yes,
            className: btn-success
        },
        cancel: {
            label: No,
            className: btn-danger
        }
    },
    callback: function (result) {
        // ...
    }
});

您不能重寫alert,confirm和prompt對話框的按鈕的回調。 

默認值 : null

bootbox.js官方文檔

標簽:通過   不顯示   出現   nes   參數詳解   custom   ===   選擇   views   

原文地址:https://www.cnblogs.com/wyt007/p/9005906.html

(0)
(3)
   
舉報
評論 一句話評論(0
登錄后才能評論!
? 2014 mamicode.com 版權所有 京ICP備13008772號-2
迷上了代碼!
公式规律下期单双