bootstrap confirmation按鈕提示組件使用詳解
bootstrap-confirmation按鈕提示組件，它類似于js里面confirm的功能,界面更加美觀。
介紹這個(gè)組件之前，可以先來看看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 程序循環(huán)結(jié)構(gòu)詳解
這篇文章主要為大家介紹了JavaScript 程序循環(huán)結(jié)構(gòu)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
JS實(shí)現(xiàn)的定時(shí)器展示簡(jiǎn)單秒表、頁面彈框及跳轉(zhuǎn)操作完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的定時(shí)器展示簡(jiǎn)單秒表、頁面彈框及跳轉(zhuǎn)操作,結(jié)合實(shí)例形式分析了JavaScript時(shí)間函數(shù)及頁面元素動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2020-01-01
javascript的列表切換【實(shí)現(xiàn)代碼】
下面小編就為大家?guī)硪黄猨avascript的列表切換【實(shí)現(xiàn)代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。2016-05-05
微信小程序scroll-view不能左右滑動(dòng)問題的解決方法
scroll-view為滾動(dòng)視圖,分為水平滾動(dòng)和垂直滾動(dòng),這篇文章主要給大家介紹了關(guān)于微信小程序scroll-view不能左右滑動(dòng)問題的解決方法,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Cookies 和 Session的詳解及區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章介紹了Mac地址驗(yàn)證的javascript代碼，在路由器中，mac地址是用得比較多的2013-11-11
JS基于FileSaver.js插件實(shí)現(xiàn)文件保存功能示例
這篇文章主要介紹了JS基于FileSaver.js插件實(shí)現(xiàn)文件保存功能,結(jié)合實(shí)例形式演示了FileSaver.js插件的具體使用技巧,需要的朋友可以參考下2016-12-12
詳解js跨域請(qǐng)求的兩種方式，支持post請(qǐng)求
原先一直以為要實(shí)現(xiàn)跨域請(qǐng)求只能用jsonp，只能支持GET請(qǐng)求，后來了解到使用POST請(qǐng)求也可以實(shí)現(xiàn)跨域，但是需要在服務(wù)器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers頭，下面說明下兩個(gè)不同的方法實(shí)現(xiàn)的方式和原理。2018-05-05
在頁面中js獲取光標(biāo)/鼠標(biāo)的坐標(biāo)及光標(biāo)的像素坐標(biāo)
頁面JS光標(biāo)/鼠標(biāo)坐標(biāo)，百度統(tǒng)計(jì)中有個(gè)熱點(diǎn)統(tǒng)計(jì)圖，我們要做的就是獲取光標(biāo)的像素坐標(biāo)2013-11-11
詳解JavaScript對(duì)象轉(zhuǎn)原始值
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12