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 */ }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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*/ }
})
  • 1
  • 2
  • 3
  • 4
  • 5

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 */ }
})
  • 1
  • 2
  • 3
  • 4
  • 5

注意: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选项参数详解

  1. message
    类型:String | Element
    描述:显示在对话框上的内容
    必需:alert | confirm | custom dialogs
  2. title
    类型:String | Element
    描述:为对话框添加标题,默认大小为<h4>
    必需:prompts
  3. callback
    类型:Function
    描述:回调函数
    alert回调不提供参数,函数体为空则会被忽略,如:bootbox.alert({ message: "I'm an alert!", callback: function() {} })
    confirm和prompt回调必须提供参数result。当为confirm时,result类型为boolean,用来判定是还是否;当为prompt时result将保存用户输入的值。
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}
}); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

必需:confirm | prompt
4. onEscape
类型:Boolean | Function
描述:允许用户通过点击ESC来关闭对话框,点击ESC这将调用此选项。
默认值 : alert | confirm | prompt : true ; custom dialogs : null
必需:alert | confirm | custom dialogs
5. show
类型:Boolean
描述:是否立即显示对话框
默认值 : null
6. backdrop
类型:Boolean
描述:对话框是否有背景,还可以确定点击背景是否退出模态。
Undefined (null) 显示背景,点击背景不会触发事件
true * 显示背景,点击背景会取消此对话框
false 不显示背景
注意:当此值设置为true时,仅当onEscape设置esc也可以关闭时,对话框才会关闭
默认值 : null
7. closeButton
类型:Boolean
描述:对话框是否显示关闭按钮
默认值 : true
8. animate
类型:Boolean
描述:显示动画效果(需要浏览器支持)
默认值 : true
9. className
类型:String
描述:为对话框增加额外的css文件
默认值 : null
10. size
类型:String
描述:将Bootstrap模态大小类添属性加到对话框包装器,有效值为'large''small',需要Bootstrap 3.1.0以上。
默认值 : null
11. buttons
类型:Object
描述:按钮被定义为JavaScript对象。 定义按钮的最小定义是:

"Your button text": function() {}
  • 1
  • 2

你可以设置的其他属性有:

buttonName : {label: 'Your button text',className: "some-class",callback: function() {}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

其中buttoName应为:

alert       ok
confirm     cancel, confirm
prompt      cancel, confirm
  • 1
  • 2
  • 3

每个可用的按钮选项都可以被重写,以使用自定义内容(文本或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) {// ...}
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

您不能重写alert,confirm和prompt对话框的按钮的回调。
默认值 : null

bootbox.js文档中文版相关推荐

  1. Node.js 文档(目录)

    Node.js 文档 Node.js®是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时. 提供以下几种类型的文档: API参考文档 ES6功能 指南 API参考文档 ...

  2. javaAPI文档中文版(JDK11在线版)无需下载、直接打开

    强烈推荐!巨好用! 菜鸟教程javaAPI文档中文版:https://www.runoob.com/manual/jdk11api/index.html

  3. JAVA API文档中文版,网盘下载

    JAVA API 1.9文档中文版,网盘下载 链接:https://pan.baidu.com/s/1FKMSg-7xrvNms44W51vR6Q 提取码:4yg4

  4. Direct3D 9.0 SDK 文档(中文版)

    一直以来想将D3D的文档翻译一下,一来是为了学习,二来也是给其他朋友提供一下方便,但一直没有时间来做这件事情,今天偶尔在网上发现有人已经将这件事情做得足够好了,我将链接贴出来,希望想学习D3D的哥们, ...

  5. Java API文档中文版

    Java API文档中文版 Sun 公司提供的Java API Docs是学习和使用Java语言中最经常使用的参考资料之一.但是长期以来此文档只有英文版,对于中国地区的Java开发者来说相当的不便.目 ...

  6. SQLAlchemy 1.3文档中文版 - 对象关系指南

    SQLAlchemy 1.3文档中文版 - 对象关系指南(Object Relational Tutorial) 中文翻译:郭夫子(374jetko@sina.com) 英文原文地址:https:// ...

  7. python3.6手册中文版-python3.6文档中文版

    广告关闭 腾讯云双11爆品提前享,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高满返5000元! 新pythonmalloc环境变量现在可用于调试解释器内存分配与访问错误. 标准库 ...

  8. “全能”选手—Django 1.10文档中文版Part1

    欢迎大家访问我的个人网站<刘江的博客和教程>:www.liujiangblog.com ### 主要分享Python 及Django教程以及相关的博客 本文是博主翻译的Django1.10 ...

  9. simple-uploader.js 文档

    simple-uploader.js(也称 Uploader) 是一个上传库,支持多并发上传,文件夹.拖拽.可暂停继续.秒传.分块上传.出错自动重传.手工重传.进度.剩余时间.上传速度等特性:该上传库 ...

  10. Swagger 文档中文版,国产API 文档工具使用教程

    swagger文档.swagger ui 在后端开发中使用非常广泛,接口文档开发和代码生成等功能非常好用. 但swagger是付费的产品,而免费版的swagger 文档需要自己去配置,流程非常复杂,因 ...

最新文章

  1. The HipHop Virtual Machine
  2. Go 语言简介(上)— 语法
  3. cxTreeList交换当前两个节点的的位置
  4. Bash 中的 $0 在什么时候不是 argv[0]
  5. Fragment使用PagerSlidingTabStrip嵌套子Fragment显示问题
  6. LeGO-LOAM学习
  7. html:(7):了解hx标签和加强语气
  8. Mysql 查询返回结果空时间错误
  9. POJ 1821 Fence(单调队列优化DP)
  10. 使用 SYSENTER 和 SYSEXIT 指令执行对系统过程的快速调用
  11. MockServer的测试思想与实现
  12. wpf-AvalonDock-使用技巧总结
  13. linux系统手机助手,手机助手Linux版下载
  14. 家族关系查询系统程序设计算法思路_大数据结构课程设计(家族关系查询系统)要点...
  15. bzero和sigevent
  16. 福昕阅读器给pdf创建目录方法
  17. android camera2 API流程分析
  18. 【组成原理-处理器】处理器的相关概念
  19. 基于图论的立体匹配方法研究----绪论
  20. 保洁实业如何使用虚拟机器人提高安全性

热门文章

  1. linux常用网络命令大全
  2. Weblogic之端口查看
  3. Review Board了解
  4. 从Internet上下载ActiveX(转)
  5. python读音有道-[Python]通过有道词典API获取单词发音MP3
  6. 条件概率,乘法公式——概率论与数理统计(宋浩)
  7. 常微分方程机敏问答[3] #20210622
  8. tensorflow 77 tensorflow android版本demo win10 下 编译
  9. 使用Struts之ActionForm
  10. 历经18年胡培松创制优良新种质 国稻种芯百团计划行动