bootstrapconfirmation按鈕提示組件使用詳解

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

創(chuàng)新互聯(lián)公司是一家專業(yè)提供北流企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都網(wǎng)站制作、H5開(kāi)發(fā)、小程序制作等業(yè)務(wù)。10年已為北流眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

介紹這個(gè)組件之前，可以先來(lái)看看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" >
<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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章題目：bootstrapconfirmation按鈕提示組件使用詳解
網(wǎng)頁(yè)路徑：http://muchs.cn/article48/pdgeep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、全網(wǎng)營(yíng)銷推廣、ChatGPT、自適應(yīng)網(wǎng)站、網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)