bootstrap confirmation按鈕提示組件使用詳解
更新時間：2017年08月22日 11:50:15 作者：javanbme
這篇文章主要為大家詳細(xì)介紹了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實現(xiàn)代碼
<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：是否只允許出現(xiàn)一個確定框；
popout：當(dāng)用戶點擊其他地方的時候是否隱藏確定框；
title：標(biāo)題；
placement：放置位置；
onConfirm：確定事件；
onCancel：取消事件；
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了javascript檢測flash插件是否被禁用的方法,涉及JavaScript調(diào)用ActiveXObject組件操作flash插件的相關(guān)技巧,需要的朋友可以參考下2016-01-01
javascript firefox不顯示本地預(yù)覽圖片問題的解決方法
在Firefox一直不能用js做出圖片預(yù)覽的效果，下面這個即可解決，用替換的方法實現(xiàn)firefox支持得的路徑格式2008-11-11
js根據(jù)屬性刪除對象數(shù)組里的相應(yīng)對象
這篇文章主要介紹了js根據(jù)屬性刪除對象數(shù)組里的相應(yīng)對象,需要的朋友可以參考下2023-07-07
導(dǎo)致這個問題產(chǎn)生的原因，一般是因為js（一個比較復(fù)雜的js）寫在body里面，在body元素加載完之前調(diào)用出現(xiàn)問題。顯然，解決該問題的方法就是將這一段js放在body元素解析完畢之后。2010-11-11
這篇文章主要介紹了JS實現(xiàn)的Select三級下拉菜單,涉及javascript動態(tài)創(chuàng)建下拉列表的技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
給Javascript數(shù)組插入一條記錄的代碼...2007-08-08
uni-app登錄與支付功能實現(xiàn)三秒后自動跳轉(zhuǎn)
這篇文章主要介紹了uni-app:登錄與支付-- 三秒后自動跳轉(zhuǎn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
Javascript中的return作用及javascript return關(guān)鍵字用法詳解
本文給大家介紹Javascript中的return作用及javascript return關(guān)鍵字用法詳解，對于大家學(xué)習(xí)javascript中的return知識有所幫助，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要給大家介紹了關(guān)于微信小程序前端自定義分享的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
下面小編就為大家?guī)硪黄贘avaScript表單腳本(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10