bootstrap confirmation按鈕提示組件使用詳解

發(fā)布時(shí)間：2020-10-02 22:38:21 來(lái)源：腳本之家閱讀：328 作者：javanbme 欄目：web開(kāi)發(fā)

bootstrap-confirmation按鈕提示組件，它類似于js里面confirm的功能,界面更加美觀。

介紹這個(gè)組件之前，可以先來(lái)看看bootstrap里面提示框的效果：

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" >
<span class="glyphicon glyphicon-remove" aria-hidden="true">
</span>刪除</button>

js實(shí)現(xiàn)代碼

<script type="text/javascript"> 
 $(function () { 
  $('#btn_submit1').confirmation({ 
   animation: true, 
   placement: "top", 
   title: "確定要?jiǎng)h除嗎？", 
   btnOkLabel: '確定', 
   btnCancelLabel: '取消', 
   onConfirm: function () { 
    alert("點(diǎn)擊了確定"); 
   }, 
   onCancel: function () { 
    alert("點(diǎn)擊了取消"); 
 
   } 
  }) 
 
 }); 


</script>

常用的屬性。比如：

btnOkClass：確定按鈕的樣式；
btnCancelClass：取消按鈕的樣式；
singleton：是否只允許出現(xiàn)一個(gè)確定框；
popout：當(dāng)用戶點(diǎn)擊其他地方的時(shí)候是否隱藏確定框；
title：標(biāo)題；
placement：放置位置；
onConfirm：確定事件；
onCancel：取消事件；

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

bootstrap confirmation按鈕提示組件使用詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽