怎么使用jquery创建一个提示工具

来源：互联网发布：淘宝帐号实名认证在哪编辑：程序博客网时间：2024/06/11 12:11

怎么使用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 ：

0 0