bootbox.js官方文档中文版
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选项参数详解
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
}
});
必需: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() {
}
你可以设置的其他属性有:
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
bootbox.js官方文档中文版的更多相关文章
- bootbox.js官方文档
简介 Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Bootstrap模态框生成的都是非阻塞事 ...
- Node.js 官方文档中文版
这目录也是醉了 . 列出跟没列出没两样
- 2DToolkit官方文档中文版打地鼠教程(三):Sprite Collections 精灵集合
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
- 2DToolkit官方文档中文版打地鼠教程(二):设置摄像机
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
- 2DToolkit官方文档中文版打地鼠教程(一):初始设置
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
- 人工智能系统Google开源的TensorFlow官方文档中文版
人工智能系统Google开源的TensorFlow官方文档中文版 2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,机器学习作为人工智能的一种类型,可以让软件根据大量的 ...
- TestNG官方文档中文版(2)-annotation(转)
1. 介绍 TestNG是一个设计用来简化广泛的测试需求的测试框架,从单元测试(隔离测试一个类)到集成测试(测试由有多个类多个包甚至多个外部框架组成的整个系统,例如运用服务器). 编写一个测试的 ...
- TensorFlow 官方文档中文版 --技术文档
1.文档预览 2.文档下载 TensorFlow官方文档中文版-v1.2.pdf 提取码:pt7p
- TensorFlow 官方文档中文版学习
TensorFlow 官方文档中文版 地址:http://wiki.jikexueyuan.com/project/tensorflow-zh/
随机推荐
- linux后台执行命令:&和nohup
当我们在终端或控制台工作时,可能不希望由于运行一个作业而占住了屏幕,因为可能还有更重要的事情要做,比如阅读电子邮件.对于密集访问磁盘的进程,我们更希望它能够在每天的非负荷高峰时间段运行(例如凌晨).为 ...
- [转] - spark推荐 - 从50多分钟到3分钟的优化
原文地址 从50多分钟到3分钟的优化 某推荐系统需要基于Spark用ALS算法对近一天的数据进行实时训练, 然后进行推荐. 输入的数据有114G, 但训练时间加上预测的时间需要50多分钟, 而业务的要 ...
- 常见的压缩文件格式案例tarZ
在AIX上最常见的压缩文件就是.tar压缩格式的文件了. 而除了tar文件以外,有时会遇到数据是用其它的压缩文件格式,所以偶顺手整理了一些常见的压缩文件格式,在AIX要怎么解压缩 : 一. .tar ...
- LeetCode 155 - 最小栈 - [数组模拟栈]
题目链接:https://leetcode-cn.com/problems/min-stack/description/ 设计一个支持 push,pop,top 操作,并能在常数时间内检索到最小元素的 ...
- [No0000FA]C# 接口(Interface)
接口定义了所有类继承接口时应遵循的语法合同.接口定义了语法合同 "是什么" 部分,派生类定义了语法合同 "怎么做" 部分. 接口定义了属性.方法和事件,这些都是 ...
- [No0000F3]C# 结构(Struct)
在 C# 中,结构是值类型数据结构.它使得一个单一变量可以存储各种数据类型的相关数据.struct关键字用于创建结构. 结构是用来代表一个记录.假设您想跟踪图书馆中书的动态.您可能想跟踪每本书的以下属 ...
- tensorRT 构建推理引擎
- spring boot拦截器WebMvcConfigurerAdapter,以及高版本的替换方案
Springboot中静态资源和拦截器处理(踩了坑) 背景: 在项目中我使用了自定义的Filter 这时候过滤了很多路径,当然对静态资源我是直接放过去的,但是,还是出现了静态资源没办法访问到spr ...
- React兄弟、父子元素之间的通信
React兄弟.父子元素之间的通信 React元素之间的通信主要由下面几种方式 1. Redux 2. EventEmitter 3. 通过props进行通信(需要有嵌套关系) 子元素到父元素 父子元 ...
- 使用FFmpeg常见问题
使用FFmpeg常见问题 https://blog.csdn.net/willib/article/details/52530328 https://blog.csdn.net/nogodoss/ar ...