日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

jQuery?UI工具提示框部件Tooltip?Widget_jquery

作者:springsnow ? 更新時間: 2022-07-30 編程語言

可自定義的、可主題化的工具提示框,替代原生的工具提示框。

一、實例

使用帶有 title 屬性的所有元素的事件代理,在文檔上創建一個工具提示框(Tooltip)。

代碼:

<p>
  <a href="#"   title="錨描述">錨文本</a>
  <input title="輸入幫助">
</p>
<script>
  $( document ).tooltip();
</script>

工具提示框(Tooltip)取代了原生的工具提示框,讓它們可主題化,也允許進行各種自定義:

  • 顯示不僅僅是標題的其他內容,就如內聯的腳注或通過 Ajax 檢索的額外內容。
  • 自定義定位,例如,在元素上居中工具提示框。
  • 添加額外的樣式來定制警告或錯誤區域的外觀。

默認使用一個漸變的動畫來顯示和隱藏工具提示框,這種外觀與簡單的切換可見度相比更具靈性。這可以通過?show?和?hide?選項進行定制。

items?和?content?選項需要保持同步。如果您改變了其中一個,您需要同時改變另一個。

在一般情況下,禁用的元素不會觸發任何 DOM 事件。因此,適當地控制禁用元素的工具提示框是不可能的,因為我們需要監聽事件來決定何時顯示和隱藏工具提示框。這就導致 jQuery UI 不能保證對附加到禁用元素上的工具提示框任何層次上的支持。這意味著如果您需要在禁用元素上進行提示,您可能需要使用一個原生的提示框和 jQuery UI 工具提示框的混合物。

二、主題化

工具提示框部件(Tooltip Widget)使用?jQuery UI CSS 框架?來定義它的外觀和感觀的樣式。如果需要使用工具提示框指定的樣式,則可以使用下面的 CSS class 名稱:

  • ui-tooltip:工具提示框的外層容器。
  • ui-tooltip-content:工具提示框的內容。

三、快速導航

1、Options

  • content:tooltip(工具提示框)的內容。當改變這個選項時,你可能還需要更改?items選項。
  • disabled:如果設置為?true,則禁用該 tooltip(工具提示框)。
  • hide:tooltip(工具提示框)關閉(隱藏)時的動畫效果。
  • items:一個選擇器表示哪些項目應該顯示tooltip(工具提示框)。 如果您使用其他的東西自定義,那么title屬性將作為tooltip(工具提示框)的內容, 或者你需要一個不同的選擇來事件委托。
  • position:確定 tooltip(工具提示框) 相對于 相關目標元素的位置。?of選項默認為目標元素, 但您可以指定其他元素來定位。
  • show:tooltip(工具提示框) 打開(顯示)時的動畫效果。
  • tooltipClass:一個CSS樣式類名 添加到tooltip(工具提示框)小部件, 可用于顯示各種提示類型, 像警告或錯誤。
  • track:tooltip(工具提示框)是否應該跟蹤(跟隨)鼠標。

2、Methods

  • close():關閉 tooltip(工具提示框) 。這僅供非委派的 tooltip(工具提示框) 調用。
  • destroy():完全移除 tooltip(工具提示框) 功能. 這將使元素返回到之前的初始化狀態.
  • disable():禁用 tooltip(工具提示框)。
  • enable():啟用 tooltip(工具提示框)。
  • open():以編程方式打開一個 tooltip(工具提示框) 。這僅供非委派的 tooltip(工具提示框) 調用。
  • option():獲取當前與指定的?optionName?關聯的值。
  • widget():返回一個包含 生成包裹元素 的?jQuery?對象。

3、Events

  • close( event, ui ):當 tooltip(工具提示框) 關閉時觸發,觸發事件為focusout?或?mouseleave
  • create( event, ui ):在創建tooltip(工具提示框)時觸發該事件。
  • open( event, ui ):當tooltip(工具提示框)打開,顯示時,觸發此事件,觸發的事件為focusin?或?mouseover

原文鏈接:https://www.cnblogs.com/springsnow/p/12503525.html

欄目分類
最近更新