jQueryUI的工具提示小部件取代了原生工具提示.此小部件添加新主题并允许自定义.首先让我们了解一下工具提示是什么?工具提示可以附加到任何元素.要显示工具提示,只需将 title 属性添加到输入元素,title属性值将用作工具提示.当您使用鼠标悬停元素时,title属性将显示在元素旁边的一个小框中.
jQueryUI提供了 tooltip()方法来添加工具提示到要显示工具提示的任何元素.与仅切换可见性相比,这默认显示淡入淡出动画以显示和隐藏工具提示.
工具提示( )方法可以使用两种形式 :
$(selector, context).tooltip (options) 方法
$(selector, context).tooltip ("action", [params]) 方法
工具提示(选项)方法声明可以将工具提示添加到HTML元素. options 参数是一个对象,它指定工具提示的行为和外观.
$(selector, context).tooltip(options);
您可以使用Javascript对象一次提供一个或多个选项.如果要提供多个选项,则使用逗号分隔它们,如下所示;
$(selector, context).tooltip({option1: value1, option2: value2..... });
下表列出了可与此方法一起使用的不同选项 :
Sr.No. | 选项&安培;描述 |
---|---|
1 | content 此选项代表工具提示的内容.默认情况下,其值为返回标题属性的函数. 选项 - 内容 此选项表示工具提示的内容.默认情况下,其值为函数,返回标题属性.这可以是 :
语法 $(".selector").tooltip( {content:"some content!"} ); |
2 | disabled 此选项设置为 true 时会禁用工具提示.默认情况下,其值为 false . 选项 - 已停用 设置为 true 时,此选项禁用工具提示.默认情况下,其值为 false . 语法 $(".selector").tooltip( {disabled:true} ); |
3 | hide 此选项表示隐藏工具提示时的动画效果.默认情况下,其值为 true . 选项 - 隐藏 此选项表示隐藏工具提示时的动画效果.默认情况下,其值为 true .这可以是 :
语法 $(".selector").tooltip( {hide:{effect:"explode ",持续时间:1000}} ); |
4 | items 此选项指示哪些项目可以显示工具提示.默认情况下,其值为 [title] . 选项 - 项目 此选项指示哪些项目可以显示工具提示.默认情况下,其值为 [title] . 语法 $(".selector").tooltip( {items:"img [alt]"} ); |
5 | position 此选项决定相关目标元素的工具提示的位置.默认情况下,其值为函数,返回标题属性.可能的值包括: my,at,of,collision,using,within. 选项 - 位置 此选项决定相关目标元素的工具提示的位置.默认情况下,其值为函数,返回标题属性.可能的值包括: my,at,of,collision,using,within. 语法 $(".selector").tooltip( {{my:"left top + 15",at:"left bottom",collision:"flipfit" } ); |
6 | show 此选项表示如何为工具提示的显示设置动画.默认情况下,其值为 true . 选项 - 显示 此选项表示如何为工具提示的显示设置动画.默认情况下,其值为 true .这可以是 :
语法 $(".selector").tooltip( {show:{effect:"blind ",持续时间:800}} ); |
7 | tooltipClass 此选项是一个类,可以将其添加到工具提示窗口小部件中,以获取警告或错误等工具提示.默认情况下,其值为 null . 选项 - tooltipClass 此选项是一个类,可以将其添加到工具提示窗口小部件中,以获取警告或错误等工具提示.默认情况下,其值为 null . 语法 $(".selector").tooltip( {tooltipClass:"custom-tooltip-styling"}} ); |
8 | track 此选项设置为 true 时,工具提示跟随/跟踪鼠标.默认情况下,其值为 false . 选项 - 跟踪 此选项设置为 true 时,工具提示跟随/跟踪鼠标.默认情况下,其值为 false . 语法 $(".selector").tooltip( {track:true} ); |
以下部分将向您展示工具提示功能的一些工作示例.
以下示例演示了传递否的工具提示功能的简单示例 tooltip()方法的参数.
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript --> <script> $(function() { $("#tooltip-1").tooltip(); $("#tooltip-2").tooltip(); }); </script> </head> <body> <!-- HTML --> <label for = "name">Name:</label> <input id = "tooltip-1" title = "Enter You name"> <p><a id = "tooltip-2" href = "#" title = "Nice tooltip"> I also have a tooltip</a></p> </body> </html>
让我们将上述代码保存在HTML文件 tooltipexample.htm 中,并在支持javascript的标准浏览器中打开它,你还必须看到以下输出.现在,您可以使用结果
在上面的示例中,将鼠标悬停在上面的链接上或使用Tab键将焦点循环到每个元素上。
以下示例显示了JqueryUI工具提示功能中三个重要选项(a)内容(b)跟踪和(c)禁用的用法。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript --> <script> $(function() { $( "#tooltip-3" ).tooltip({ content: "<strong>Hi!</strong>", track:true }), $( "#tooltip-4" ).tooltip({ disabled: true }); }); </script> </head> <body> <!-- HTML --> <label for = "name">Message:</label> <input id = "tooltip-3" title = "tooltip"><br><br><br> <label for = "name">Tooltip disabled for me:</label> <input id = "tooltip-4" title = "tooltip"> </body> </html>
让我们将上述代码保存在HTML文件tooltipexample.htm中,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出。 现在,你可以玩结果
在上面的示例中,使用内容选项设置第一个框的工具提示的内容。 您还可以注意到鼠标后面的工具提示。 第二个输入框的工具提示已禁用。
以下示例显示了JqueryUI的工具提示函数中选项位置的用法。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- CSS --> <style> body { margin-top: 100px; } .ui-tooltip-content::after, .ui-tooltip-content::before { content: ""; position: absolute; border-style: solid; display: block; left: 90px; } .ui-tooltip-content::before { bottom: -10px; border-color: #AAA transparent; border-width: 10px 10px 0; } .ui-tooltip-content::after { bottom: -7px; border-color: white transparent; border-width: 10px 10px 0; } </style> <!-- Javascript --> <script> $(function() { $( "#tooltip-7" ).tooltip({ position: { my: "center bottom", at: "center top-10", collision: "none" } }); }); </script> </head> <body> <!-- HTML --> <label for = "name">Enter Date of Birth:</label> <input id = "tooltip-7" title = "Please use MM.DD.YY format."> </body> </html>
让我们将上述代码保存在HTML文件tooltipexample.htm中,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出。 现在,你可以玩结果
在上面的示例中,工具提示位置设置在输入框的顶部。
工具提示(action,params)方法可以对工具提示元素执行操作,例如禁用工具提示。 该操作在第一个参数中指定为字符串,并且可选地,可以基于给定的操作提供一个或多个参数。
基本上,这里的动作只不过是jQuery方法,我们可以以字符串的形式使用它们。
$(selector, context).tooltip ("action", [params]);
下表列出了此方法的操作
Sr.No. | Action & Description |
---|---|
1 | close() 此操作将关闭工具提示。 此方法不接受任何参数。 Action - close() 此操作将关闭工具提示。 此方法不接受任何参数。 Syntax $(".selector").tooltip("close"); |
2 | destroy() 此操作将完全删除工具提示功能。 这将使元素返回到其初始化前状态。 此方法不接受任何参数。 Action - destroy() 此操作将完全删除工具提示功能。 这将使元素返回到其初始化前状态。 此方法不接受任何参数。 Syntax $(".selector").tooltip("destroy"); |
3 | disable() 此操作将停用工具提示。 此方法不接受任何参数。 Action - disable() 此操作将停用工具提示。 此方法不接受任何参数。 Syntax $(".selector").tooltip("disable"); |
4 | enable() 此操作会激活工具提示。 此方法不接受任何参数。 Action - enable() 此操作会激活工具提示。 此方法不接受任何参数。 Syntax $(".selector").tooltip("enable"); |
5 | open() 此操作以编程方式打开工具提示。 此方法不接受任何参数。 Action - open() 此操作以编程方式打开工具提示。 此方法不接受任何参数。 Syntax $(".selector").tooltip("open"); |
6 | option( optionName ) 此操作获取与工具提示的optionName关联的值。 此方法不接受任何参数。 Action - option( optionName ) 此操作获取与工具提示的optionName关联的值。 此方法不接受任何参数。 Syntax var isDisabled = $( ".selector" ).tooltip( "option", "disabled" ); |
7 | option() 此操作获取一个对象,其中包含表示当前工具提示选项哈希的键/值对。 此方法不接受任何参数。 Action - option() 此操作获取一个对象,其中包含表示当前工具提示选项哈希的键/值对。 此方法不接受任何参数。 Syntax $(".selector").tooltip("option"); |
8 | option( optionName, value ) 此操作设置与指定的optionName关联的工具提示选项的值。 Action - option( optionName, value ) 此操作设置与指定的optionName关联的工具提示选项的值。 Syntax $( ".selector" ).tooltip( "option", "disabled", true ); |
9 | option( options ) 此操作为工具提示设置一个或多个选项。 Action - option( options ) 此操作为工具提示设置一个或多个选项。 Syntax $( ".selector" ).tooltip( "option", { disabled: true } ); |
10 | widget() 此操作返回包含原始元素的jQuery对象。 此方法不接受任何参数。 Action - widget() 此操作返回包含原始元素的jQuery对象。 此方法不接受任何参数。 Syntax $(".selector").tooltip("widget"); |
现在让我们看一个使用上表中的操作的示例。 以下示例演示了禁用和启用操作的用法。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript --> <script> $(function() { $("#tooltip-8").tooltip({ //use 'of' to link the tooltip to your specified input position: { of: '#myInput', my: 'left center', at: 'left center' }, }), $('#myBtn').click(function () { $('#tooltip-8').tooltip("open"); }); }); </script> </head> <body style = "padding:100px;"> <!-- HTML --> <a id = "tooltip-8" title = "Message" href = "#"></a> <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" /> <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" /> </body> </html>
我们将上述代码保存在HTML文件tooltipexample.htm中,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出
在上面的示例中,单击myBtn按钮,弹出工具提示。
除了我们在前面部分中看到的tooltip(options)方法之外,JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下所列
Sr.No. | Event Method & Description |
---|---|
1 | create(event, ui) 创建工具提示时触发。 其中event是Event类型,ui是Object类型。 Event - create(event, ui) 创建工具提示时触发。 其中event是Event类型,ui是Object类型。 Syntax $(".selector").tooltip( create: function(event, ui) {} ); |
2 | close(event, ui) 工具提示关闭时触发。 通常在聚焦或鼠标移动时触发。 其中event是Event类型,ui是Object类型。 Event - close(event, ui) 工具提示关闭时触发。 通常在聚焦或鼠标移动时触发。 其中event是Event类型,ui是Object类型。 ui的可能值是
Syntax $(".selector").tooltip( close: function(event, ui) {} ); |
3 | open(event, ui) 显示或显示工具提示时触发。 通常在focusin或mouseover上触发。 其中event是Event类型,ui是Object类型。 Event - open(event, ui) 显示或显示工具提示时触发。 通常在focusin或mouseover上触发。 其中event是Event类型,ui是Object类型.ui的可能值是
Syntax $(".selector").tooltip( open: function(event, ui) {} ); |
以下示例演示了工具提示功能期间的事件方法用法。 此示例演示了打开和关闭事件的使用。
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- Javascript --> <script> $(function() { $('.tooltip-9').tooltip({ items: 'a.tooltip-9', content: 'Hello welcome…', show: "slideDown", // show immediately open: function(event, ui) { ui.tooltip.hover( function () { $(this).fadeTo("slow", 0.5); }); } }); }); $(function() { $('.tooltip-10').tooltip({ items: 'a.tooltip-10', content: 'Welcome to TutorialsPoint…', show: "fold", close: function(event, ui) { ui.tooltip.hover(function() { $(this).stop(true).fadeTo(500, 1); }, function() { $(this).fadeOut('500', function() { $(this).remove(); }); }); } }); }); </script> </head> <body style = "padding:100px;"> <!-- HTML --> <div id = "target"> <a href = "#" class = "tooltip-9">Hover over me!</a> <a href = "#" class = "tooltip-10">Hover over me too!</a> </div> </body> </html>
让我们将上述代码保存在HTML文件tooltipexample.htm中,并在支持javascript的标准浏览器中打开它,您还必须看到以下输出
在上面的例子中,悬停在我身上的工具提示! 立即消失,而工具提示也悬停在我身上! 在1000ms的持续时间后消失。