怎么使用jquery创建一个提示工具
在这里，有一个简单的想法用jquery来创建提示信息。
具体想法为……
1. 确定需要显示提示信息的目标。
2. 创建提示信息和它的css类型。
3. 存在三个函数：分别为 showTooltips,hideTooltips,changeTooltipsPosition.
4. 当鼠标进入目标区域时，使用showTooltips函数来显示提示信息及使用changTooltipsPosition来初始化位置。
5. 当鼠标在目标区域移动时，使用changTooltipsPosition函数来保持提示信息改变的位置。
6. 当鼠标离开目标区域时，使用hideTooltips来隐藏提示信息。
7. 使用jquery来实现。
1 目标
hint 和username标签都是用来显示提示信息的目标。
<labelid="username">Username : </label><inputtype="text"/size="50">
<spanid="hint">hint (mouseover me)</span>
2 提示工具(tooltips)的 css
创建一个css 类型为提示信息。
.tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:yellow;
position: absolute;
z-index: 2;
}
3 显示提示工具(tooltips)
添加提示信息到body标签，并初始化提示信息的位置。
var showTooltip = function(event) {
$('div.tooltip').remove();
$('<divclass="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
.appendTo('body');
changeTooltipPosition(event);
};
5 改变提示工具
改变提示信息的位置。
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX - 8;
var tooltipY = event.pageY + 8;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
6 隐藏提示工具
隐藏提示信息。
var hideTooltip = function() {
$('div.tooltip').remove();
};
7 绑定它即绑定事件
给目标绑定鼠标事件
$("span#hint,label#username'").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
自我尝试
在下面的例子中，当鼠标停留在hint或label时显示提示工具的效果。
<html>
<head>
<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>
<styletype="text/css">
#hint{
cursor:pointer;
}
.tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:yellow;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<h1>jQuery tooltips example</h1>
<labelid="username">Username : </label><inputtype="text"/size="50">
<spanid="hint">hint (mouseover me)</span>
<scripttype="text/javascript">
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX - 8;
var tooltipY = event.pageY + 8;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var showTooltip = function(event) {
$('div.tooltip').remove();
$('<divclass="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
.appendTo('body');
changeTooltipPosition(event);
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("span#hint,label#username'").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
});
</script>
</body>
</html>
初始效果：
鼠标进入后的效果：
2 ：
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
