srcmini本文概述
- 第一种方法
- jQuery UI Tooltip()示例1
- jQueryUI Tooltip()方法示例2
- jQuery UI Tooltip()方法示例3
- 第二种方法
- jQueryUI Tooltip()方法示例4
jQuery UI工具提示小部件取代了本机工具提示, 因为jQuery UI工具提示允许自定义并添加新主题。
什么是工具提示？
当你将鼠标悬停在元素上时, 工具提示会与元素一起使用, 以在元素旁边的标题框中显示标题。工具提示可以附加到任何元素。如果要显示工具提示, 只需将标题属性添加到输入元素, 标题属性值将用作工具提示。
jQueryUI Tooltip有什么作用？
jQuery UI tooltip()方法将工具提示添加到要在其上显示工具提示的任何元素。与仅切换可见性相比, 默认情况下, 它提供淡入淡出的动画来显示和隐藏工具提示。
句法：
你可以两种形式使用tooltip()方法。
$(selector, context).tooltip (options) Method(selector, context).tooltip ("action", [params]) Method第一种方法
工具提示（选项）方法指定可以将工具提示添加到HTML元素。 options参数是一个对象, 用于指定工具提示的行为和外观。
句法：
$(selector, context).tooltip(options);你可以使用Javascript对象一次使用一个或多个选项。如果有多个选项, 你将使用逗号将它们分开, 如下所示：
$(selector, context).tooltip({option1: value1, option2: value2..... });以下是可与该方法一起使用的不同选项的列表。
| 选项 | 描述 |
|---|---|
| content | 此选项用于表示工具提示的内容。默认情况下, 其值为返回标题属性的函数。 |
| disabled | 如果将此选项设置为true, 它将禁用工具提示。默认情况下, 其值为false。 |
| hide | 隐藏工具提示时, 此选项用于表示动画效果。默认情况下, 其值为true。 |
| items | 此选项指定哪些项目可以显示工具提示。默认情况下, 其值为[title]。 |
| position | 此选项用于指示工具提示相对于关联目标元素的位置。默认情况下, 其值为返回标题属性的函数。其可能的值为：我的, 发生于, 发生于, 发生碰撞, 使用中, 发生于内部。 |
| show | 此选项表示如何对工具提示的显示进行动画处理。默认情况下, 其值为true。 |
| tooltipClass | 此选项是一个类, 可以为警告或错误之类的工具提示添加到工具提示小部件中。默认情况下, 其值为null。 |
| track | 如果将此选项设置为true, 则工具提示将跟随/跟踪鼠标。默认情况下, 其值为false。 |
jQuery UI Tooltip()示例1
让我们以一个简单的示例来演示工具提示功能, 该工具提示功能不将任何参数传递给tooltip()方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 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>
<!-- Javascript -->
<script>
$(function() {
$("#tooltip-1").tooltip();
$("#tooltip-2").tooltip();
});
</script>
</head>
<body>
<!-- HTML -->
<label for="comment">What is your comment:</label>
<input id="tooltip-1" title="We are asking your comment just for feedback">
<p><a id="tooltip-2" href="#" title="srcmini is the best tutorial website.">
I also have a tooltip
</a></p>
</body>
</html>立即测试
jQueryUI Tooltip()方法示例2
使用职位：
让我们以一个示例来演示jQuery UI工具提示功能中选项位置的用法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 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>
<!-- 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">Name:</label>
<input id="tooltip-7" title="Please use capital letters.">
</body>
</html>立即测试
jQuery UI Tooltip()方法示例3
内容的使用, 跟踪和禁用：
以下示例演示了选项内容, 跟踪和禁用选项的用法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 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>
<!-- Javascript -->
<script>
$(function() {
$( "#tooltip-3" ).tooltip({
content: "<strong>Hello srcmini</strong>", track:true
}), $( "#tooltip-4" ).tooltip({
disabled: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<label for="name">Here is the message:</label>
<input id="tooltip-3" title="tooltip"><br><br><br>
<label for="name">Tooltip is disabled:</label>
<input id="tooltip-4" title="tooltip">
</body>
</html>立即测试
第二种方法
工具提示（操作, 参数）方法用于对工具提示元素执行操作, 例如禁用工具提示。该操作在第一个参数中指定为字符串, 并且可以选择根据给定操作使用一个或多个参数。
句法：
$(selector, context).tooltip ("action", [params]);以下是此方法使用的不同操作的列表。
| 行动 | 描述 |
|---|---|
| close() | 此操作用于关闭工具提示。此方法不接受任何参数。 |
| destroy() | 此操作用于完全删除工具提示功能。这将使元素返回其初始状态。此方法不接受任何参数。 |
| disable() | 此操作用于停用工具提示。此方法不接受任何参数。 |
| enable() | 此操作将激活工具提示。此方法不接受任何参数。 |
| open() | 此操作以编程方式打开工具提示。此方法不接受任何参数。 |
| option(optionName) | 此操作获取与工具提示的optionName关联的值。此方法不接受任何参数。 |
| option() | 此操作将获取一个对象, 该对象包含表示当前工具提示选项哈希的键/值对。此方法不接受任何参数。 |
| option(optionName, Value) | 此操作设置与指定的optionName关联的工具提示选项的值。 |
| option(Options) | 此操作为工具提示设置一个或多个选项。 |
| widget() | 该操作返回一个包含原始元素的jQuery对象。此方法不接受任何参数。 |
与工具提示元素一起使用的事件方法：
jQueryUI触发特定事件的事件方法。以下是这些事件方法的列表：
| 事件方法 | 描述 |
|---|---|
| create(event, ui) | 创建工具提示时将触发它。这里事件是事件类型, 而用户界面是对象类型。 |
| close(event, ui) | 当工具提示关闭时触发。通常是在对焦或鼠标离开时触发。这里事件是事件类型, 而用户界面是对象类型。 |
| open(event, ui) | 显示或显示工具提示时触发。通常在focusin或鼠标悬停时触发。这里事件是事件类型, 而用户界面是对象类型。 |
jQueryUI Tooltip()方法示例4
让我们以一个示例来演示工具提示功能期间事件方法的用法。下面的示例使用open和close事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 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>
<!-- Javascript -->
<script>
$(function() {
$('.tooltip-9').tooltip({
items: 'a.tooltip-9', content: 'Are you looking for a training program?', 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 srcmini', 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><br/>
<a href="#" class="tooltip-10">Hover over me too!</a>
</div>
</body>
</html>立即测试
评论前必须登录！
注册