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