1.背景介紹
Bootbox.js是一個(gè)小型的JavaScript庫辩越,基于 Twitter 的 Bootstrap 開發(fā)嘁扼。它允許你創(chuàng)建使用編程對(duì)話框。方便用戶快速創(chuàng)建模擬框黔攒。
2.知識(shí)剖析
該庫提供了三個(gè)旨在模仿其原生JavaScript等效項(xiàng)的函數(shù)趁啸。他們的確切的函數(shù)名是靈活的,
因此每個(gè)可以采取各種參數(shù)來定制標(biāo)簽和指定默認(rèn)值督惰,但它們最基本是這樣:
警告框
bootbox.alert(message, callback)
提示框
bootbox.prompt(message, callback)
確認(rèn)框
bootbox.confirm({title: "提示",message: "這是一個(gè)確認(rèn)按鈕的樣式不傅!",buttons: {confirm: {label: 'Yes',className: 'btn-success'},cancel: {label: 'No',className: 'btn-danger'}},callback: function (result) {console.log('這是回調(diào)函數(shù)來確認(rèn)最終結(jié)果: ' + result);}});
這三個(gè)函數(shù)中的每一個(gè)都可以調(diào)用第四個(gè)公共函數(shù),你也可以使用它來創(chuàng)建自己的自定義對(duì)話框:
bootbox.dialog(options)
3.常見問題
bootbox的所有版本都是在Bootstrap和jQuery的基礎(chǔ)之上的赏胚,因此bootstrap访娶,jQuery和bootbox的版本要對(duì)應(yīng)
4.解決方案
注意腳本引用的順序
jQuery
Bootstrap
Bootbox
5.編碼實(shí)戰(zhàn)
警告框:基本用法
bootbox.alert("This is the default alert!");
警告框:帶回調(diào)
bootbox.alert("This is an alert with a callback!", function(){console.log('This was logged in the callback!');});
設(shè)置框大小
bootbox.alert({message: "This is the small alert!",size: 'small'});
確認(rèn)框基本用法
bootbox.confirm("確認(rèn)信息", function(result){console.log('This was logged in the callback: ' + result);});
交替按鈕
bootbox.confirm({
message: "這是一個(gè)確認(rèn)按鈕的樣式!",buttons: {confirm: {label: 'Yes',className: 'btn-success'},cancel: {label: 'No',className: 'btn-danger'}},callback: function (result) {console.log('This was logged in the callback: ' + result);}});
提示框:基本用法
bootbox.prompt("提示信息", function(result){ console.log(result); });
日期提示
bootbox.prompt({title: "這是一個(gè)帶有日期輸入的提示!",inputType: 'date'callback: function (result) {console.log(result);}});
提示輸入密碼
bootbox.prompt({title: "這是一個(gè)帶有密碼輸入的提示觉阅!",inputType: 'password',callback: function (result) {console.log(result);}});
電子郵件提示
bootbox.prompt({title: "這是一個(gè)帶有電子郵件輸入的提示!",inputType: 'email',callback: function (result) {console.log(result);}});
6.擴(kuò)展思考
bootbox彈出框如何設(shè)置為中文提示
7.參考文獻(xiàn)
參考一:Bootbox.js