jQuery UI 教程
描述:可自定義的、可主題化的工具提示框,替代原生的工具提示框。
版本新增:1.9
工具提示框(Tooltip)取代了原生的工具提示框,讓它們可主題化,也允許進(jìn)行各種自定義:
默認(rèn)使用一個(gè)漸變的動(dòng)畫(huà)來(lái)顯示和隱藏工具提示框,這種外觀與簡(jiǎn)單的切換可見(jiàn)度相比更具靈性。這可以通過(guò) show
和 hide
選項(xiàng)進(jìn)行定制。
items
和 content
選項(xiàng)需要保持同步。如果您改變了其中一個(gè),您需要同時(shí)改變另一個(gè)。
在一般情況下,禁用的元素不會(huì)觸發(fā)任何 DOM 事件。因此,適當(dāng)?shù)乜刂平迷氐墓ぞ咛崾究蚴遣豢赡艿?,因?yàn)槲覀冃枰O(jiān)聽(tīng)事件來(lái)決定何時(shí)顯示和隱藏工具提示框。這就導(dǎo)致 jQuery UI 不能保證對(duì)附加到禁用元素上的工具提示框任何層次上的支持。這意味著如果您需要在禁用元素上進(jìn)行提示,您可能需要使用一個(gè)原生的提示框和 jQuery UI 工具提示框的混合物。
工具提示框部件(Tooltip Widget)使用 jQuery UI CSS 框架 來(lái)定義它的外觀和感觀的樣式。如果需要使用工具提示框指定的樣式,則可以使用下面的 CSS class 名稱:
ui-tooltip
:工具提示框的外層容器。
ui-tooltip-content
:工具提示框的內(nèi)容。show
和 hide
選項(xiàng)一起使用時(shí))使用帶有 title 屬性的所有元素的事件代理,在文檔上創(chuàng)建一個(gè)工具提示框(Tooltip)。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>工具提示框部件(Tooltip Widget)演示</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <p> <a href="#" title="錨描述">錨文本</a> <input title="輸入幫助"> </p> <script> $( document ).tooltip(); </script> </body> </html>其他擴(kuò)展