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

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：取消事件；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框

    如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框

    本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用,效果大气漂亮且很实用! 由于浏览器提供的alert和confirm框体验不好,而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数,所以很多项目都会自定义对话框组件.本篇文章介绍自己在项目中基于bootstrap的modal组件,自定义alert,confirm和modal对话框的经验,相对比较简单实用,希望能对你有所参考价值. 1. 实例展示 详细的代码可通过前面给出的下载链接下载源码去了解,代码

  • 集合Bootstrap自定义confirm提示效果

    本文实例为大家分享了集合Bootstrap自定义confirm的具体代码,供大家参考,具体内容如下 效果 这里写图片描述 js端 var Common = { confirm:function(params){ var model = $("#common_confirm_model"); model.find(".title").html(params.title) model.find(".message").html(params.mess

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

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

    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

  • BootStrap实现树形目录组件代码详解

    BootStrap实现树形目录组件代码详解

    需求描述 产品添加页面,需要选择车型.在bootStrap的modal上弹出子modal来使用. 车型一共有4级目录.要使用目录树. 然后分活动和商品两种,需要能够通过不通参数来调用该组件. 车型品牌要使用字母导航. 技术实现 数据都是后端传json过来,我们ajax获取然后操作. 由于车型总数据有几万条以上,不可能一次性请求过来.这里我们使用异步的方式,每点击一次目录节点,加载它的下一级. 这里我们用两个参数来控制活动和商品的不同加载._showPrice和opened 后端传过来的第一级数据

  • vue实现过渡动画Message消息提示组件示例详解

    vue实现过渡动画Message消息提示组件示例详解

    目录 概述 目录结构 总结 概述 在我自己平时做项目的时候,必不可少的会用到message组件,用来对用户友好反馈,总之使用频率还是挺高的,刚开始工作的时候,经常用的就是组件库的现成的,想想也不能总是用别人现成的,最近模拟组件库调用方式自己写了一个消息提示组件,支持过渡效果,支持自己进行扩展. 目录结构 .src/component/MessageBox/MessageBox.vue代码: <template> //css实现过渡 <transition name="fade-

  • Bootstrap Fileinput文件上传组件用法详解

    Bootstrap Fileinput文件上传组件用法详解

    最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到我们平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传 上传中 4.boot

  • Bootstrap进度条组件知识详解

    Bootstrap进度条组件知识详解

    在网页中,经常见到进度条效果,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本中并不支持,Opera 12 不支持 animation 属性. 进度条和其他独立组件一样,开发者可以根据自己的需要选择对应的版本: LESS: progress-bars.less SASS: _progress-bars.scss 基础进度条 实现原理: 需要两个容器,外容器使用类名.progre

  • vue实现简单表格组件实例详解

    vue实现简单表格组件实例详解

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩

  • Element el-upload上传组件使用详解

    Element el-upload上传组件使用详解

    目录 基本用法 上传文件数量 上传格式及大小限制 上传过程中的各种钩子 显示已上传文件列表 上传时提交数据 选取和上传分开处理 upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件. 基本用法 代码: <el-upload :action="uploadActionUrl"> <el-button size="small" type="primary">点击

  • Vue 过渡（动画）transition组件案例详解

    Vue 过渡（动画）transition组件案例详解

    Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g

  • 通过npm引用的vue组件使用详解

    通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

  • BootStrap中Table分页插件使用详解

    BootStrap中Table分页插件使用详解

    分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式 引入css和js <!--css样式--> <link href=&qu

随机推荐