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