网络编程
位置：首页>> 网络编程>> JavaScript>> bootstrap confirmation按钮提示组件使用详解

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

作者：javanbme　　发布时间：2023-07-02 05:25:38　

标签：bootstrap,confirmation,按钮提示组件

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

来源：http://blog.csdn.net/javanbme/article/details/77467151

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com