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的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery UI 实例讲解 - 日期选择器(Datepicker)

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&

  • jquery-ui 进度条功能示例【测试可用】

    jquery-ui 进度条功能示例【测试可用】

    本文实例讲述了jquery-ui 进度条功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf8" /> <title>www.jb51.net progressbar</title> <style type="text/css"> #divprogressbar{ width:300px; heigh

  • jqueryUI tab标签页代码分享

    本文实例为大家分享了jqueryUI tab标签页的具体代码,供大家参考,具体内容如下 var temp=1; var arr=["我的首页"]; //×号点击关闭li $("#tabs").delegate( ".ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( &quo

  • jQuery UI实现动画效果代码分享

    jQuery UI实现动画效果代码分享

    页面文档载入后,为第一张图片添加class属性值为img1,为第二张图片添加class属性值img2,为第三张图片添加class属性img3,为第四张图片添加class属性值img4,这会使得每张图片的下半部分被上一张更大的图片给覆盖住. 当鼠标单击暴露在最上面的图片时,该图片在0.6秒内从原本大小放大150%,并逐渐减小不透明度直到完全消失,与此同时,其他所有图片在0.6秒内动态的放大并占据相应上一张图片的位置.全部动态效果结束后,消失不见的那张图片重新显示在最下面. <!DOCTYPE ht

  • jquery ui 实现 tab标签功能示例【测试可用】

    jquery ui 实现 tab标签功能示例【测试可用】

    本文实例讲述了jquery ui 实现 tab标签功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net tab切换</title> <style type="text/css"> #tabs{ width:500px; height:500px; margin:0 auto; } .ui-widget-header{ border

  • jQuery UI组件介绍

    一.jQuery UI简介 jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择. jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(

  • jQuery UI工具提示框部件Tooltip Widget

    jQuery UI工具提示框部件Tooltip Widget

    可自定义的.可主题化的工具提示框,替代原生的工具提示框. 一.实例 使用带有 title 属性的所有元素的事件代理,在文档上创建一个工具提示框(Tooltip). 代码: <p> <a href="#" rel="external nofollow" title="锚描述">锚文本</a> <input title="输入帮助"> </p> <script>

  • jQuery UI菜单部件Menu Widget

    jQuery UI菜单部件Menu Widget

    目录 实例 二.图标 三.分隔符 四.键盘交互 五.主题化 六.快速导航 1.Options 2.Methods 3.Events 带有鼠标和键盘交互的用于导航的可主题化菜单. 实例 一个简单的 jQuery UI 菜单(Menu). 代码 <ul id="menu"> <li><a href="#" rel="external nofollow" rel="external nofollow"

  • jQuery UI旋转器部件Spinner Widget

    jQuery UI旋转器部件Spinner Widget

    通过向上/向下按钮和箭头键处理,为输入数值增强文本输入功能. 一.实例 普通的数字选择器. 代码 <input id="spinner"> <script> $( "#spinner" ).spinner(); </script> 旋转器(Spinner),或数步进控件(number stepper widget),是用于处理各种数字输入的完美控件.它允许用户直接输入一个值,或通过键盘.鼠标.滚轮旋转改变一个已有的值.当与全球化(

  • 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框

    使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

  • jQuery UI Grid 模态框中的表格实例代码

    jQuery UI Grid 模态框中的表格实例代码

    在弹出的模态框中使用表格. 在某些情况下,特别是 bootstrap modal,可能会出现表格渲染宽度过小或有时显示不完全.会误认为是由于 bootstrap modal 的动画渲染导致表格渲染时的可用空间不如预期.可以通过调用handleWindowResize来纠正.动画渲染的时间不好确定,所以一般推荐使用$interval,在模态框打开后的5秒内每隔500ms循环调用. 从某种意义上说,这类似于自动调整大小的功能,但它只在模态框开启后的短时间内完成. 代码: index.html <!d

  • jQuery UI插件自定义confirm确认框的方法

    本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

  • 基于jQuery UI CSS Framework开发Widget的经验

    jQuery UI中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jQuery ui的界面上,并且可以通过jQuery ui ThemeRoller来生成自己的样式. .ui-helper-hidden :为元素应用display:none .ui-helper-hidden-accessible:将元素的绝对位置设置为不可见 .ui-helper-clearfix:适用于浮动包裹父元素的属性 . ui-helper-zfix:适用于修复if

  • jquery弹出框插件jquery.ui.dialog用法分析

    本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

  • 详解jQuery UI库中文本输入自动补全功能的用法

    自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在 输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 一．调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], }); 二．修改autocomplete()样式    由于autocomplete()方法是弹窗,然后鼠标悬停的样式.通过Firebug

随机推荐