Bootstrap popover用法詳解
最近在自學(xué)Java Web基礎(chǔ)，搭建自己的頁(yè)面時(shí)候用到了Boostrap的JS庫(kù)。由于之前沒(méi)有接觸過(guò)JQuery，所以用起來(lái)磕磕絆絆，所以在這里簡(jiǎn)單記一下Boostrap中我用到的JS 插件的一些用法。
第一個(gè)用到的就是Boostrap中的popover插件。原因是一個(gè)簡(jiǎn)單的注冊(cè)界面需要驗(yàn)證用戶名是否合法，是否已被注冊(cè)，密碼是否合法，再次輸入密碼是否和之前的密碼匹配等，需要用到popover來(lái)進(jìn)行信息警告。
首先一個(gè)簡(jiǎn)單的例子:
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" id="button1" class="btn btn-default"
data-container="body" data-toggle="popover">
左側(cè)的 Popover
</button>
</div>
<script>
$(function (){
$('#button1').popover({
trigger: 'click',
title: "test1",
placement: 'right',
content: 'hello'
});
});
</script>
可以看到，在使用API進(jìn)行popover編程時(shí)，一定要引用$(‘#element').popover()對(duì)id=”element”的控件進(jìn)行popover激活。之前就是直接復(fù)制官網(wǎng)上的代碼，發(fā)現(xiàn)點(diǎn)擊后并不能trigger，一直很困惑。然后用name=”element”是不能激活popover的。
要是需要為input框添加popover效果，則只需要trigger='focus'即可。但似乎不支持blur，不能在blur之后判斷input框中的內(nèi)容是否合法從而觸發(fā)popover。這個(gè)還需后續(xù)再研究。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
autojs 螞蟻森林能量自動(dòng)拾取即給指定好友澆水的實(shí)現(xiàn)方法
這篇文章主要介紹了autojs 螞蟻森林能量自動(dòng)拾取即給指定好友澆水的實(shí)現(xiàn)方法，本文通過(guò)圖文并茂實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
下面小編就為大家分享一篇js生成word中圖片處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
弱類型語(yǔ)言javascript開(kāi)發(fā)中的一些坑實(shí)例小結(jié)【變量、函數(shù)、數(shù)組、對(duì)象、作用域等】
這篇文章主要介紹了弱類型語(yǔ)言javascript開(kāi)發(fā)中的一些坑,結(jié)合實(shí)例形式總結(jié)分析了javascript開(kāi)發(fā)中關(guān)于變量、函數(shù)、數(shù)組、對(duì)象、作用域等相關(guān)知識(shí)點(diǎn)常見(jiàn)易錯(cuò)問(wèn)題,需要的朋友可以參考下2019-08-08
js實(shí)現(xiàn)水平滾動(dòng)菜單導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)水平滾動(dòng)菜單導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
大家仔細(xì)看下面兩段代碼，代碼一的window.onload = doIt()函數(shù)后面有();而代碼二的window.onload = doIt函數(shù)名后面沒(méi)有括號(hào)。2008-09-09
JavaScript異步回調(diào)的Promise模式封裝實(shí)例
這篇文章主要介紹了JavaScript異步回調(diào)的Promise模式封裝實(shí)例,本文通過(guò)分析easyjs的源碼得出,實(shí)例均參考easyjs,需要的朋友可以參考下2014-06-06
使用原生js+canvas實(shí)現(xiàn)模擬心電圖的實(shí)例
下面小編就為大家?guī)?lái)一篇使用原生js+canvas實(shí)現(xiàn)模擬心電圖的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要幫助大家深入理解javascript模塊化，感興趣的小伙伴們可以參考一下2016-03-03
Django1.7+JQuery+Ajax驗(yàn)證用戶注冊(cè)集成小例子
下面是散仙使用Django+Jquery+Ajax的方式來(lái)模擬實(shí)現(xiàn)了一個(gè)驗(yàn)證用戶注冊(cè)時(shí)，用戶名存在不存在的一個(gè)小應(yīng)用。注意，驗(yàn)證存在不存在使用的是Ajax的方式，不用讓用戶點(diǎn)擊按鈕驗(yàn)證是否存在,需要的朋友可以參考下2017-04-04
所有瀏覽器通用的js添加收藏夾代碼，本文整理了多種方法實(shí)現(xiàn)加入收藏夾功能，下面為大家詳細(xì)介紹下實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈2013-05-05