bootbox.js官方文档

简介

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

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

时间: 2024-10-12 17:41:09

bootbox.js官方文档的相关文章

ArcGIS API For JS官方文档解析教程

ArcGIS API For JavaScript(八)之Arcade ArcGIS API For JavaScript官方文档(一)之关于API ArcGIS API For JavaScript官方文档(一)之默认API配置 ArcGIS API For JavaScript官方文档(七)之编辑 ArcGIS API For Javascript官方文档(三)之从Web服务器取回数据 ArcGIS API For JavaScript官方文档(二)之默认的API字符串 ArcGIS API

Hui 2.x.js 官方文档

基础方法 // 判断值是否是指定数据类型 var result = hui.isTargetType("白签软件", "string"); //=>true var result = hui.isTargetType(123, "number"); // =>true var result = hui.isTargetType("false", "boolean"); // =>false

node.js官方文档chm电子书的制作

制作软件:WebCHMSetup2.22.zip,http://www.onlinedown.net/soft/31553.htm 制作好的电子书:Node.js(v6.10.2).zip 参考链接:https://www.zhihu.com/question/37005587

比官方文档更易懂的Vue.js教程!包你学会!

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时候不吹上一点新技术,好像自己就不是搞前端的似的.当然,

GSAP 官方文档(结贴)

好久没写GSAP的教程的(其实我也不懂哈哈),国内也没什么人用,不对动画要求特别高的话,其实也没必要用GSAP,现在工作上没用到这个东西,也懒得写了,所以有问题的话去找一下greensock的官方文档吧 js版 :http://greensock.com/docs/#/HTML5/GSAP/ as版:http://greensock.com/asdocs/ 温馨提示:文档其实说得都很详细了,例子也全,但如果还是真的看不懂文档的话,建议去9ria社区搜一下TweenLite和TweenMax的相关

【cocos2d-js官方文档】十九、Cocos2d-JS单文件引擎使用指引

这篇指引主要介绍如何使用从在线下载工具下载下来的Cocos2d-JS的单文件引擎. 你有可能下载了下面三个版本中的一个: Cocos2d-JS Full Version: 完整版引擎包含Cocos2d-JS引擎的所有功能特性以及所有扩展,使用这个版本可以帮助你发掘Cocos2d-JS令人惊艳的创造力和可能性.你可以从官方文档首页中查看Cocos2d-JS所支持的特性列表. Cocos2d-JS Lite Version: 精简版本只包含Cocos2d-JS的核心特性,它的优势是稳定,轻量,简单易

[译]Polymer官方文档-布局元素

原文链接: Layout elements(注:有时需翻墙或换hosts)翻译日期: 2014年8月2日翻译人员: 铁锚 译注: 点击下载本教程的示例代码: Polymer布局元素Demo相关的代码文件在 layout 目录下. 0. 准备- Chrome浏览器模拟移动设备Chrome浏览器(要求最新版,如34以上版本)模拟移动设备的方法: 打开一个标签页,按 F12,(或者在页面空白区域点鼠标右键,审查元素),打开调试窗口. 然后在将光标移动到调试窗口中, 按 ESC键,或者点击右上角的 dr

iOS9官方文档

       iOS9已经发布一段时间了,我也在最近升级了Xcdoe 7.0正式版,升级后才发现又有了很多奇妙的变化,于是查看官方文档的一些解释,顺便做了一些翻译,和大家分享一下(转载请注明出处). iPad多任务增强 iOS9增强了对iPad用户的多任务处理如滑动(Slide Over),拆分视图(Split View)和画中画(Picture in Picture)的体验.该滑过功能允许用户选择一个次要的App并快速地与之交互.拆分视图功能让用户能够同时并排开启两个App.画中画功能(也称为

Oracle12cR1官方文档打开图片无法显示问题

当下载Oracle12cR1官方文档解压后,打开主页时出现有些图片无法显示,如下: 解决办法: 在E50529_01\dcommon\js\目录下,找到下面三个js文件 common.js  headfoot.js headfoot_prev.js 在三个文件里分别能找到下面的内容: if (document.getElementById("searchbody") === undefined || document.getElementById("searchbody&qu