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 相关文章推荐
JavaScript 继承详解(三)
Jul 13 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 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和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
javascript 函数式编程
2007/08/16 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
详解python脚本自动生成需要文件实例代码
2017/02/04 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
python实现爬山算法的思路详解
2019/04/09 Python
基于python实现高速视频传输程序
2019/05/05 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
用Python配平化学方程式的方法
2019/07/20 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
物业招聘计划书
2014/01/10 职场文书
回门宴父母答谢词
2014/01/26 职场文书
小班重阳节活动方案
2014/02/08 职场文书
小学毕业感言50字
2014/02/16 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
离婚财产分割协议书
2015/08/11 职场文书
2016党校培训心得体会
2016/01/07 职场文书
Python中的pprint模块
2021/11/27 Python
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏