工具提示插件——tooltip
工具提示插件可以定制元素的提示外觀，提示內(nèi)容支持變量、Ajax遠(yuǎn)程獲取，還可以自定義提示內(nèi)容顯示的位置，它的調(diào)用格式如下：
$(selector).tooltip({options});
其中selector為需要顯示提示信息的元素，可選項參數(shù)options為tooltip()方法的配置對象，在該對象中，可以設(shè)置提示信息的彈出、隱藏時的效果和所在位置。
例如，將三個<a>元素與工具提示插件相綁定，當(dāng)把鼠標(biāo)移動在<a>元素內(nèi)容時，以動畫效果彈出對應(yīng)的提示圖片，移出時，圖片自動隱藏，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于各個<a>元素都綁定了工具提示插件，因此，將在指定的位置并以動畫效果展示各個<a>元素中title屬性所對應(yīng)的內(nèi)容。
任務(wù)
我來試試，親自調(diào)用工具提示插件展示文本輸入框的提示信息。
在下列代碼的第26行，將文本輸入框元素綁定提示插件，當(dāng)鼠標(biāo)在文本輸入框中移動時，在指定的位置并以動畫的效果顯示對應(yīng)的title屬性值內(nèi)容。
- ?不會了怎么辦
-
- 首先，通過選擇器獲取需要綁定工具提示插件的輸入框元素，然后，根據(jù)獲取的元素，調(diào)用插件的
tooltip()方法，實現(xiàn)動畫彈出和隱藏提示內(nèi)容的效果。
- 在插件的“tooltip()”方法中，通過定義配置對象中的“show”、“hide”屬性值，可以設(shè)置提示信息顯示或隱藏時的效果，“position”屬性定義顯示位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>工具提示插件</title>
<link href="http://idcbgp.cn/data/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://idcbgp.cn/data/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://idcbgp.cn/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title">
工具提示插件</div>
<div class="content">
<div>
<label for="name">
姓名</label>
<input id="name" name="name" title="我是土豪，歡迎與我做朋友" />
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
?({
show: {
effect: "slideDown",
delay: 350
},
hide: {
effect: "explode",
delay: 350
},
position: {
my: "left top",
at: "left bottom"
}
});
});
</script>
</body>
</html>
body
{
font-size: 13px;
}
#divtest
{
width: 382px;
}
#divtest .title
{
padding: 8px;
background-color: Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px 0px;
background-color: #fff;
font-size: 13px;
}
#divtest a
{
width: 127px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
