如何使用Bootbox?
大家好,我是IT修真院深圳分院第06期学员,一枚正直善良的web程序员。
今天给大家分享一下,修真院官网 JS-06任务中可能会使用到的知识点:
1.背景介绍
在JS任务6-10做萝卜多后台中我们会使用到模态框,当时我在做这个任务的时候是使用了AngularJS的ui-bootstrap中的模态框,但是使用起来真的真的很繁琐!直到后来接触到bootbox,发现原来写模态框可以如此的简单。
Bootbox.js是一个小型的JavaScript库,基于 Twitter 的 Bootstrap 开发。它允许你创建使用编程对话框。可以快速定制,创建自己所需的模态框,可以方便的更改它的样式。
Bootbox不像原生的alert等对话框,所有的Bootstrap模态框生成的都是非阻塞事件。所以 在使用confirm()对话框时,请记住这一点,因为它不是本地确认对话框的替代。 任何取决于用户选择的代码都必须放在回调函数中。
2.知识剖析
该库提供了模拟原生JavaScript的alert警告,confirm确认、prompt提示这三个对话框,另外Bootbox还有dialog自定义对话框。它们每个可以采取各种参数来定制标签和指定默认值,它们最基本用法如下:
alert是只有单个按钮的对话框,按ESC键或单击关闭按钮可关闭对话框。
bootbox.alert("Your message here…", function(){ /* your callback code */ })
Confirm是具有确定和取消按钮的对话框, 按ESC键或单击关闭将忽略对话框并调用回调函数,效果等同于单击取消按钮。
需要注意的是,使用confirm时回调函数是必须的。
bootbox.confirm("Are you sure?", function(result){ /* your callback code */ })
prompt 是提示用户进行输入操作并确定或者取消的对话框, 按ESC键或单击关闭将忽略对话框并调用回调函数,效果等同于单击取消按钮。 同样,prompt中回调函数也是必须的。
注意:prompt在使用options选项时需要title选项,并且不允许使用message选项。
bootbox.prompt("What is your name?", function(result){ /* your callback code */ })
dialog 一个完全自定义的对话框方法,它只接收一个参数 options 对象。也就是说按ESC键时,这个自定义对话框将不会自动关闭,需要使用onEscape函数手动实现此行为。
bootbox.dialog(options)
options至少要有message选项。
3.常见问题
使用Bootbox需要注意的地方有哪些?
4.解决方案
首先Bootbox引入的版本要正确,bootbox的所有版本都是在Bootstrap和jQuery的基础之上的,因此bootstrap,jQuery和Bootbox的版本要对应
还有需要注意脚本引用的顺序:
- jQuery
- Bootstrap
- Bootbox
例如:
5.编码实战
demo
6.扩展思考
模态框和非模态框有什么区别?
模态对话框:就是在其没有被关闭之前,用户不能与同一个应用程序的其他窗口进行交互,直到该对话框关闭。
非模态对话框:当被打开时,用户既可选择和该对话框进行交互,也可以选择同应用程序的其他窗口交互。
7.参考文献
参考文献:
Bootbox.js
bootbox.js官方文档中文版
8.更多讨论
问题1:那个自定义按钮的名字随便起吗?
答:名字可以随便取的。
问题2:自定义按钮的名字是不是必须放在dialig里?
答:不是的,alert、comfirm、prompt和dialog都是可以自定义按钮名字的,方式参考上面的demo。
问题3:提示框可以嵌套么?
答:可以。
IT修真院欢迎您,邀请码:20152484
如何使用Bootbox?相关推荐
- bootbox显示中文的按钮
$("selector").on('click',function(){ bootbox.confirm({ title : "请确认", buttons: { ...
- bootbox.js
bootbox:一个弹出框插件,官网看一下例子就好了:http://bootboxjs.com/examples.html 目前来说应该只要调用bootbox.js就可以了,没有css的问题 1.有最 ...
- bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
- bootbox.js bootbox.promt()
想用bootbox做一个弹出的输入框,输入框是必填项,想看一下API,结果bootxbox.js的官网怎么也打不开.摸索了一下,发现用this可以获取整个模态框节点,这就好办了: bootbox.pr ...
- bootbox.js实践总结(一)
最近使用bootstrap做后台管理系统,弹出框用到了bootbox.js,也是和bootstrap风格匹配. 在这里记录下来使用体会. 顺序依赖 jQuery.js Bootstrap(css和js ...
- bootBox 提示框插件
引用地址:https://blog.csdn.net/kiwi4814/article/details/54730109 bootbox.js官方文档中文版 简介:Bootbox.js是一个小型的Ja ...
- bootstrap插件(对话框)bootbox参数和自定义弹出框宽度设置
参考:https://hisune.com/post/view/17/bootstrap-plugin-bootbox-and-custom-width-dialog 官网:http://bootbo ...
- django+jquery ajax post csrf 配置
2019独角兽企业重金招聘Python工程师标准>>> django+jquery ajax post csrf 配置: <body> {% csrf_token %} ...
- 2014年最热门的国人开发开源软件TOP100
2014年最热门的国人开发开源软件TOP100 不知道从什么时候开始,很多一说起国产好像就非常愤慨,其实大可不必.做开源中国六年有余,这六年时间国内的开源蓬勃发展,从一开始的使用到贡献,到推出自己很多 ...
- php接收表单图片,如何在PHP中获取表单图片数据
这是我的HTML,用于发布带图片的广告. {% for count in 1..10 %} {% endfor %} 这是我的轮廓仪功能 public function insertProduct( ...
最新文章
- nokia 上的好玩应用(转载)
- 常见的面向对象的面试题(附答案)
- ceil和floor
- azure机器学习_Microsoft Azure机器学习x Udacity —第4课笔记
- string.intern_使用String.intern()减少内存使用
- 不等式约束的拉格朗日乘数法_Abaqus血管支架仿真|接触约束执行方式
- fiddler,他和其他抓包软件有什么区别,如何使用fiddler进行抓包
- linux通过bg后台执行作业
- 如何准确估计机器人的状态,增强机器人控制的精度及稳定性
- web前端之js快速入门(ECMAscript)
- 如何解决联通电信宽带连接错误691
- 飞客蠕虫专杀工具_案例-飞客蠕虫攻击
- revit 二次开发之创建图纸和放置视图
- Android | WIFI Direct -1 Basic knowledge
- 多重比较和多重比较陷阱
- matlab 向量_MatLab简易教程 #4.向量、矩阵操作命令
- 家庭新成员:德牧听泉
- 车站信息管理系统Android,客运站车无线交互系统
- 2020-2021的瞻前顾后
- Java使用GeoTools轻松读取shapefile文件内容