jQuery UI工具提示框部件Tooltip Widget

可自定义的、可主题化的工具提示框，替代原生的工具提示框。

一、实例

使用带有 title 属性的所有元素的事件代理，在文档上创建一个工具提示框（Tooltip）。

代码：

<p>
  <a href="#" rel="external nofollow"  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。

到此这篇关于jQuery UI工具提示框部件Tooltip Widget的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

最新评论