Bootstrap提示框

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/07/11/7147288.html
-Advertisement-
Play Games

前面的話 提示框是一個比較常見的功能,一般來說是滑鼠移動到特定元素上時,顯示相關的提示語。本文將詳細介紹Bootstrap提示框 基本用法 Bootstrap框架中的提示框,結構非常簡單,常常使用的是按鈕<button>標簽或者鏈接<a>標簽來製作。不管是使用按鈕還是鏈接來製作提示框,他們都需要滿足 ...


前面的話

  提示框是一個比較常見的功能,一般來說是滑鼠移動到特定元素上時,顯示相關的提示語。本文將詳細介紹Bootstrap提示框

 

基本用法

  Bootstrap框架中的提示框,結構非常簡單,常常使用的是按鈕<button>標簽或者鏈接<a>標簽來製作。不管是使用按鈕還是鏈接來製作提示框,他們都需要滿足下列條件:

  1、通過 title 屬性的值來定義提示信息(也可以使用自定義屬性 data-original-title 來設置提示信息),title屬性的優先順序高

  2、通過 data-placement 自定義屬性來控制提示信息框的位置,根據四種不同的位置,data-placement具有四個值:top、right、bottom和left,分別表示提示框出現的位置在頂部、右邊、底部和左邊

  3、還有一個最重要的參數不可缺少,data-toggle="tooltip"

【觸發方式】

  Bootstrap框架中的提示框的觸發方式和前面介紹的插件略有不同。不能直接通過自定義的屬性 data- 來觸發。必須得依賴於JavaScript的代碼觸發

  最簡單的觸發方式如下:

$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
<body style="margin:80px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="提示框居左" title="左邊提示框">提示框居左</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="提示框在頂部">提示框在頂部</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-original-title="提示框在底部">提示框在底部</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-original-title="提示框居右">提示框居右</button>
<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});    
</script>

 

屬性參數

  提示框組件提供了7個自定義屬性參數,用來對提示框進行設置

<body style="margin-top:80px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="無動畫" data-animation="false" >無動畫</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="有動畫" >有動畫</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="hover觸發" data-trigger="hover">hover觸發</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="click觸發" data-trigger="click">click觸發</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="不延遲">不延遲</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="延遲500ms" data-delay="500">延遲500ms</button>
<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});    
</script>

 

JS觸發

  除了上面所說的最簡單的一種觸發方法,也可以單獨指定一個元素,在該元素上調用Tooltip組件,並且還可以提供各種javascript形式的自定義參數,而無需使用以data-開頭的元素自定義屬性

$(element).tooltip(options);

<button type="button" class="btn btn-default" data-toggle="tooltip" >按鈕</button>
<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip({
        title:"我是提示語",
        placement:'right'
    });
});    
</script>

【關鍵字】

  除了使用options對象,還可以使用關鍵字,'show'、'hide'、'toggle'、'destroy'

<body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn1">按鈕1</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn2">按鈕2</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn3">按鈕3</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn4">按鈕4</button>
<script>
$(function(){
    $('#btn1').tooltip('show');//顯示提示語
    $('#btn2').tooltip('hide');//關閉提示語
    $('#btn3').tooltip('toggle');//反轉提示語
    $('#btn4').tooltip('destroy');//隱藏並銷毀提示語
});    
</script>
</body>

【事件】

  該插件支持5種類型的事件訂閱

show.bs.tooltip        show方法調用之後立即觸發該事件
shown.bs.tooltip      此事件在tooltip已經顯示出來(並且同時在 CSS 過渡效果完成)之後被觸發
hide.bs.tooltip        hide方法調用之後立即觸發該事件。
hidden.bs.tooltip     此事件在tooltip被隱藏(並且同時在 CSS 過渡效果完成)之後被觸發
inserted.bs.tooltip    當tooltip模板載入到DOM中上時,在show.bs.tooltip觸發後,觸發該事件
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="提示信息" id="btn">按鈕</button>
<script>
$(function(){
    $('#btn').tooltip();
    $("#btn").on("show.bs.tooltip",function(e){
        $(this).html('關閉提示');    
    }).on("hide.bs.tooltip",function(e){
        $(this).html('打開提示');
    })

});    
</script>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 指針的語法 聲明一個指針變數的語法: <type> *<ptr_name>; 註:該語法不僅僅指出一個變數為指針,同時表明指針所指向的記憶體的類型。 指針的指向:變數的地址 指針既可以直接指向新分配的記憶體,也可以指向一個已經存在的變數。 為了獲得變數地址(即變數在記憶體中的位置),要把符號&放在變數名前 ...
  • HeaderDict封裝了dict,並將字典的鍵的單詞的首字母進行大寫。並且將value變成一個可迭代的對象,將value變成一個list對象,即value=[value]。WSGI標準中定義了要將一個字元串類型轉換成list類型,這樣會使其有更好的表現形式。server也可以不用一次全部輸出可以用 ...
  • 經常聽到有朋友抱怨,說學了UML不知該怎麼用,或者畫了UML卻覺得沒什麼作用。其實,就UML本身來說,它只是一種交流工具,它作為一種標準化交流符號,在OOA&D過程中開發人員間甚至開發人員與客戶之間傳遞信息。另外,UML也可以看做是OO思想的一種表現形式,可以說“OO是神,而UML是型”。所以,想用 ...
  • 本篇文章講述了SaaS軟體的必要特征一定是多租戶特性?對於許多小型企業來說,SaaS是採用先進技術的最好途徑,它消除了企業購買、構建和維護基礎設施和應用程式的需要 課課家教育平臺提醒各位:本篇文章純乾貨~因此大家一定要認真閱讀本篇文章哦! 當用戶選擇一個SaaS技術路線的時候,會面臨“多租戶SaaS ...
  • 字面量(自變數) let name="wei"; let age=3; let obj={ //簡寫變數,等同於name:name name, age } console.log(obj.name)//wei let qqq = { name: 'wrs', toString () { // 'fu ...
  • 什麼是AngularJS的路由呢?AngularJS 路由允許我們通過不同的 URL 訪問不同的內容。通過 AngularJS 可以實現多視圖的單頁Web應用 AngularJS 路由 就通過 # + 標記 幫助我們區分不同的邏輯頁面並將不同的頁面綁定到對應的控制器上。 ...
  • [1]基本用法 [2]屬性參數 [3]JS觸發 [4]對比提示框 ...
  • 在JS給元素設置樣式屬性值,我們只能通過curEle.style[attr] = value 這種方式給元素設置行內樣式 下麵封裝一個給當前元素的某一個樣式屬性設置值的方法(增加在行內樣式上的):setCss() ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...