網(wǎng)站首頁 編程語言 正文
可自定義的、可主題化的工具提示框,替代原生的工具提示框。
一、實例
使用帶有 title 屬性的所有元素的事件代理,在文檔上創(chuàng)建一個工具提示框(Tooltip)。
代碼:
<p> <a href="#" title="錨描述">錨文本</a> <input title="輸入幫助"> </p> <script> $( document ).tooltip(); </script>
工具提示框(Tooltip)取代了原生的工具提示框,讓它們可主題化,也允許進行各種自定義:
- 顯示不僅僅是標(biāo)題的其他內(nèi)容,就如內(nèi)聯(lián)的腳注或通過 Ajax 檢索的額外內(nèi)容。
- 自定義定位,例如,在元素上居中工具提示框。
- 添加額外的樣式來定制警告或錯誤區(qū)域的外觀。
默認(rèn)使用一個漸變的動畫來顯示和隱藏工具提示框,這種外觀與簡單的切換可見度相比更具靈性。這可以通過?show
?和?hide
?選項進行定制。
items
?和?content
?選項需要保持同步。如果您改變了其中一個,您需要同時改變另一個。
在一般情況下,禁用的元素不會觸發(fā)任何 DOM 事件。因此,適當(dāng)?shù)乜刂平迷氐墓ぞ咛崾究蚴遣豢赡艿模驗槲覀冃枰O(jiān)聽事件來決定何時顯示和隱藏工具提示框。這就導(dǎo)致 jQuery UI 不能保證對附加到禁用元素上的工具提示框任何層次上的支持。這意味著如果您需要在禁用元素上進行提示,您可能需要使用一個原生的提示框和 jQuery UI 工具提示框的混合物。
二、主題化
工具提示框部件(Tooltip Widget)使用?jQuery UI CSS 框架?來定義它的外觀和感觀的樣式。如果需要使用工具提示框指定的樣式,則可以使用下面的 CSS class 名稱:
-
ui-tooltip
:工具提示框的外層容器。 -
ui-tooltip-content
:工具提示框的內(nèi)容。
三、快速導(dǎo)航
1、Options
-
content:tooltip(工具提示框)的內(nèi)容。當(dāng)改變這個選項時,你可能還需要更改?
items
選項。 -
disabled:如果設(shè)置為?
true
,則禁用該 tooltip(工具提示框)。 - hide:tooltip(工具提示框)關(guān)閉(隱藏)時的動畫效果。
- items:一個選擇器表示哪些項目應(yīng)該顯示tooltip(工具提示框)。 如果您使用其他的東西自定義,那么title屬性將作為tooltip(工具提示框)的內(nèi)容, 或者你需要一個不同的選擇來事件委托。
-
position:確定 tooltip(工具提示框) 相對于 相關(guān)目標(biāo)元素的位置。?
of
選項默認(rèn)為目標(biāo)元素, 但您可以指定其他元素來定位。 - show:tooltip(工具提示框) 打開(顯示)時的動畫效果。
- tooltipClass:一個CSS樣式類名 添加到tooltip(工具提示框)小部件, 可用于顯示各種提示類型, 像警告或錯誤。
- track:tooltip(工具提示框)是否應(yīng)該跟蹤(跟隨)鼠標(biāo)。
2、Methods
- close():關(guān)閉 tooltip(工具提示框) 。這僅供非委派的 tooltip(工具提示框) 調(diào)用。
- destroy():完全移除 tooltip(工具提示框) 功能. 這將使元素返回到之前的初始化狀態(tài).
- disable():禁用 tooltip(工具提示框)。
- enable():啟用 tooltip(工具提示框)。
- open():以編程方式打開一個 tooltip(工具提示框) 。這僅供非委派的 tooltip(工具提示框) 調(diào)用。
-
option():獲取當(dāng)前與指定的?
optionName
?關(guān)聯(lián)的值。 -
widget():返回一個包含 生成包裹元素 的?
jQuery
?對象。
3、Events
-
close( event, ui ):當(dāng) tooltip(工具提示框) 關(guān)閉時觸發(fā),觸發(fā)事件為
focusout
?或?mouseleave
。 - create( event, ui ):在創(chuàng)建tooltip(工具提示框)時觸發(fā)該事件。
-
open( event, ui ):當(dāng)tooltip(工具提示框)打開,顯示時,觸發(fā)此事件,觸發(fā)的事件為
focusin
?或?mouseover
。
原文鏈接:https://www.cnblogs.com/springsnow/p/12503525.html
相關(guān)推薦
- 2022-10-28 Go語言包和包管理詳解_Golang
- 2023-01-20 C/C++實現(xiàn)獲取系統(tǒng)時間的示例代碼_C 語言
- 2022-03-29 C#加密知識整合?(AES,MD5,RSA,SHA256)_C#教程
- 2022-04-09 SpringBoot自定義Validated枚舉校驗器
- 2022-07-10 elementUI去掉el-card內(nèi)部padding
- 2022-07-21 H5 開發(fā)內(nèi)嵌頁面跨域問題
- 2023-04-18 MongoDB超大塊數(shù)據(jù)問題解決_MongoDB
- 2022-04-15 Python3實現(xiàn)自定義比較排序/運算符_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支