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
bootbox.js官方文档的更多相关文章
- bootbox.js官方文档中文版
bootbox.js官方文档中文版简介:Bootbox.js是一个小型的JavaScript库,基于Bootstrap模态框开发,用于创建可编程的对话框. 不像原生的alert等对话框,所有的Boot ...
- Hui之Hui.js 官方文档
基础 // 判断值是否是指定数据类型 var result = hui.isTargetType("百签软件", "string"); //=>true ...
- node.js官方文档解析 02—buffer 缓冲器
Buffer 类的实例类似于整数数组,但 Buffer 的大小是固定的.且在 V8 堆外分配物理内存.Buffer 的大小在被创建时确定,且无法调整. Buffer 类在 Node.js 中是一个全局 ...
- Node.js官方文档:到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)?
译者按: Node.js文档阅读系列之一. 原文: Overview of Blocking vs Non-Blocking 译者: Fundebug 为了保证可读性,本文采用意译而非直译. 这篇博客 ...
- node.js官方文档解析 01—assert 断言
assert-------断言 new assert.AssertionError(options) Error 的一个子类,表明断言的失败. options(选项)有下列对象 message < ...
- node.js官方文档chm电子书的制作
制作软件:WebCHMSetup2.22.zip,http://www.onlinedown.net/soft/31553.htm 制作好的电子书:Node.js(v6.10.2).zip 参考链接: ...
- Vue.js官方文档学习笔记(一)起步篇
Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...
- vue.js官方文档 PDF
链接:https://pan.baidu.com/s/1jHMBb5W 密码:gsks
- Vue.js官方文档学习笔记(三)创建Vue实例
创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...
随机推荐
- django学习,session与cookie
Cookies,某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明.Cook ...
- Jquery.Datatable 控件后端分页实例 (后台使用ashx、aspx-webmethod)
本实例引用Datatable版本号: 1.10.16 一.传到aspx后台(webmethod) 1.添加js.css引用: <link href="/Scripts/ThirdLib ...
- C语言的转义字符
原文地址:http://blog.163.com/sunshine_linting/blog/static/44893323201181325818165/ 在字符集中,有一类字符具有这样的特性:当从 ...
- eclipse启动时要求高版本jdk的问题
在eclipse.ini文件首行添加 -vm C:\Program Files\Java\jdk1.8\jdk1.8.0_131\bin https://blog.csdn.net/wanlin77/ ...
- Educational Codeforces Round 61 Editorial--C. Painting the Fence
https://codeforces.com/contest/1132/problem/C 采用逆向思维,要求最大的覆盖,就先求出总的覆盖,然后减去删除两个人贡献最少的人 #include<io ...
- Nginx 教程(1):基本概念
简介 嗨!分享就是关心!所以,我们愿意再跟你分享一点点知识.我们准备了这个划分为三节的<Nginx教程>.如果你对 Nginx 已经有所了解,或者你希望了解更多,这个教程将会对你非常有帮助 ...
- stm32模拟IO读写AT24C02
/* *@brief 主机向从机写多字节 * *@param addr - 地址 *@param p_buf - 数据指针 *@param len - 待写入字节长度 * *@return * *@n ...
- 插入排序之Java实现
插入排序类似于大多数人安排扑克牌的方式. 1.从你手中的一张牌开始, 2.选择下一张卡并将其插入到正确的排序顺序中, 3.对所有的卡重复上一步. /** * * 代码理解:只需要记住两点: * 1.当 ...
- python 导入模块出错 ImportError: No module named 'request'
运行程序时报错 ImportError: No module named 'request' 1,第一种情况是真的没有安装requests这个模块,使用 sudo pip install reques ...
- 1.1.5 PROB Friday the Thirteenth
Friday the Thirteenth Is Friday the 13th really an unusual event? That is, does the 13th of the mont ...