jQuery UI (16)工具提示框部件(Tooltip Widget)
可自定义的、可主题化的工具提示框,替代原生的工具提示框。
一、实例
使用带有 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
。
posted on 2020-03-16 14:05 springsnow 阅读(449) 评论(0) 编辑 收藏 举报