bootbox的使用

1.背景介绍

Bootbox.js是一个小型的JavaScript库，基于 Twitter 的 Bootstrap 开发。它允许你创建使用编程对话框。

2.知识剖析

该库提供了三个旨在模仿其原生JavaScript等效项的函数。他们的确切的函数名是灵活的，因此每个可以采取各种参数来定制标签和指定默认值，但它们最基本是这样：

警告： bootbox.alert(message, callback)；

提示： bootbox.prompt(message, callback)；

确认： bootbox.confirm(message, callback)；

这三个函数中的每一个都可以调用第四个公共函数，你也可以使用它来创建自己的自定义对话框：bootbox.dialog(options)

3.常见问题

bootbox的所有版本都是在Bootstrap和jQuery的基础之上的，因此bootstrap，jQuery和bootbox的版本要对应，

对话框代码不阻止代码执行；

4.解决方案

对话框代码不阻止代码执行，由于这个限制，在用户关闭对话框之前不应该运行的代码应该放置（或调用）在对话框的回调函数中。

注意脚本引用的顺序 jQuery Bootstrap Bootbox

5.编码实战

警告 基本用法： bootbox.alert("This is the default alert!");

警告 带回调：  bootbox.alert("This is an alert with a callback!", function(){console.log('This was logged in the                         callback!');});

确认 基本用法: bootbox.confirm("This is the default confirm!", function(result){console.log('This was logged in the                     callback: ' + result); });  

交替按钮:      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) {

              console.log('This was logged in the callback: ' + result);

              }

              }}

提示 基本用法 ：bootbox.prompt("This is the default prompt!", function(result){ console.log(result); });   

日期提示：     bootbox.prompt({

              title: "This is a prompt with a date input!",

              inputType: 'date',

              callback: function (result) {

              console.log(result);

              }

              } }         
            

6.扩展思考

问题一:bootbox弹出框如何设置为中文

bootbox默认语言为英文，

bootbox.setDefaults("locale","zh_CN");

设置为中文

7.参考文献

参考一：http://bootboxjs.com/

8.更多讨论

PPT地址：https://ptteng.github.io/PPT/PPT/JS-08-UseBootbox.html#/