bootstrap confirmation按钮提示组件使用详解


Posted in Javascript onAugust 22, 2017

bootstrap-confirmation按钮提示组件,它类似于js里面confirm的功能,界面更加美观。

介绍这个组件之前,可以先来看看bootstrap里面提示框的效果:

bootstrap confirmation按钮提示组件使用详解

1、源码地址

http://ethaizone.github.io/Bootstrap-Confirmation/

2、效果展示

bootstrap confirmation按钮提示组件使用详解

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:取消事件;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
JavaScript 是什么意思
Sep 22 Javascript
js实现无缝滚动图
Feb 22 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
JS中min函数实例讲解
Feb 18 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
bootstrap multiselect下拉列表功能
Aug 22 #Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 #Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 #Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 #Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 #Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 #jQuery
React学习笔记之列表渲染示例详解
Aug 22 #Javascript
You might like
php中的登陆login
2007/01/18 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
php生成shtml类用法实例
2014/12/09 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
Python实现多并发访问网站功能示例
2017/06/19 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python tkinter实现连连看游戏
2020/11/16 Python
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
创先争优活动方案
2014/02/12 职场文书
好学生评语大全
2014/05/05 职场文书
教师辞职信范文
2015/02/28 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
后天观后感
2015/06/08 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang