如何深入理解和有效使用Bootbox.js？探索其文档与应用指南

Bootbox.js 文档

简介

Bootbox.js 是一个小型的 JavaScript 库，基于 Bootstrap 模态框开发，用于创建可编程的对话框，与原生的 alert、confirm 和 prompt 对话框不同，所有的 Bootbox.js 对话框都是非阻塞事件，因此需要通过回调函数处理用户选择。

Alert

功能介绍

Alert 是只有单个按钮的对话框，按 ESC 键或单击关闭按钮可关闭对话框，message 中可以放 HTML 语言。

示例代码

bootbox.alert("Your message here…");
// 带有回调函数的示例
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

功能介绍

Prompt 是提示用户进行输入操作并确定或者取消的对话框，按 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

功能介绍

Custom Dialog 是一个完全自定义的对话框方法，它只接收一个参数 options 对象，按 ESC 键时，这个自定义对话框将不会自动关闭，需要使用 onEscape 函数手动实现此行为。

示例代码

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 | 回调函数 | confirm | prompt | | |

| onEscape | Boolean | Function | 允许用户通过点击 ESC 来关闭对话框，点击 ESC 这将调用此选项 | alert | confirm | custom dialogs | true |

| show | Boolean | 是否立即显示对话框 | | | true |

| backdrop | Boolean | 对话框是否有背景，还可以确定点击背景是否退出模态 | | | 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() { } | | | |

小伙伴们，上文介绍了“bootboxjs文档”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。