bootstrap confirmation按钮提示组件使用详解
作者:javanbme 时间:2023-07-02 05:25:38
bootstrap-confirmation按钮提示组件,它类似于js里面confirm的功能,界面更加美观。
介绍这个组件之前,可以先来看看bootstrap里面提示框的效果:
1、源码地址
http://ethaizone.github.io/Bootstrap-Confirmation/
2、效果展示
3、代码示例
所需引入的js和css
<link href="css/bootstrap.css" rel="external nofollow" rel="stylesheet" />
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-confirmation.js"></script>
初始化
<button type="button" id="btn_submit1" class="btn btn-primary" style="margin: 100px;">
<span class="glyphicon glyphicon-remove" aria-hidden="true">
</span>删除</button>
js实现代码
<script type="text/javascript">
$(function () {
$('#btn_submit1').confirmation({
animation: true,
placement: "top",
title: "确定要删除吗?",
btnOkLabel: '确定',
btnCancelLabel: '取消',
onConfirm: function () {
alert("点击了确定");
},
onCancel: function () {
alert("点击了取消");
}
})
});
</script>
常用的属性。比如:
btnOkClass:确定按钮的样式;
btnCancelClass:取消按钮的样式;
singleton:是否只允许出现一个确定框;
popout:当用户点击其他地方的时候是否隐藏确定框;
title:标题;
placement:放置位置;
onConfirm:确定事件;
onCancel:取消事件;
来源:http://blog.csdn.net/javanbme/article/details/77467151
标签:bootstrap,confirmation,按钮提示组件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python Event事件、进程池与线程池、协程解析
2023-09-06 00:39:19
CSS教程:关于网页图片的属性的介绍
2008-10-31 12:02:00
java正则表达式解析html示例分享
2023-06-13 15:53:42
python 字符串格式化的示例
2021-01-23 23:33:06
从"..."看中国的UI设计界的粗糙
2007-11-21 19:28:00
![](https://img.aspxhome.com/file/UploadPic/200711/21/20071121193134977s.gif)
mysql数据库下损坏数据的恢复操作其过程总结
2009-02-13 13:36:00
公众号接入chatGPT的详细教程 附Python源码
2021-09-10 04:48:31
![](https://img.aspxhome.com/file/2023/7/135077_0s.png)
Django打印出在数据库中执行的语句问题
2024-01-21 04:26:41
符合语言习惯的 Python 优雅编程技巧【推荐】
2022-07-07 10:43:40
python使用pygame实现笑脸乒乓球弹珠球游戏
2021-07-26 09:49:47
![](https://img.aspxhome.com/file/2023/3/87473_0s.jpg)
将内容自动添加到指定文本域的JS
2007-10-08 12:50:00
MySQL中主键为0与主键自排约束的关系详解(细节)
2024-01-22 20:10:04
![](https://img.aspxhome.com/file/2023/7/124537_0s.png)
Go Gin实现文件上传下载的示例代码
2023-06-21 15:11:13
Python单元测试简单示例
2021-07-27 12:03:11
IDA Pro 6.0使用Qt框架实现了跨平台的UI界面
2022-12-05 05:07:55
![](https://img.aspxhome.com/file/2023/7/134947_0s.gif)
Pycharm挂代理后依旧插件下载慢的完美解决方法
2023-06-17 23:07:31
![](https://img.aspxhome.com/file/2023/5/98975_0s.png)
使用apidoc管理RESTful风格Flask项目接口文档方法
2022-11-24 10:05:14
![](https://img.aspxhome.com/file/2023/8/75888_0s.jpg)
springboot 启动时初始化数据库的步骤
2024-01-26 18:32:57
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2023-08-23 12:26:39
![](https://img.aspxhome.com/file/2023/3/56253_0s.png)
电子商务网站评论设计探讨
2009-12-21 16:28:00
![](https://img.aspxhome.com/file/UploadPic/20101/11/youdao-38s.png)