jQuery執行個體: ToolTip的實現

Tooltip的外掛程式網上很多,這裡主要是通過一個簡單的執行個體來學習jQuery.

注:本執行個體需要jQuery架構.

先看一下實現後的效果:

滑鼠放上來看看                   我的Flash站

下面讓我們開始,首先,我們需要一個CSS來定義我們的顯示效果:

#luluTip
{}{
    word-wrap:break-word; /**//*自動換行,在FF中對英文和數字無效*/
    position:absolute;
    width:150px;
    color: #a00;
    background-color:#FFFFCC;
    border:1px solid #a00;
    padding:10px;
    display:none; /**//*我們先不要讓它顯示*/
}
#luluTip div.triangle /**//*後代選取器,選擇ID為"luluTip"中DIV的類為"triangle"的元素*/
{}{
    background:transparent
        url('http://images.cnblogs.com/cnblogs_com/qleelulu/sj.gif')
        no-repeat scroll left top;
    position:absolute;
    height:17px;
    left:20px;
    top:-16px;
    width:31px;
    z-index:999;
}

這個CSS的效果大概是這樣的:

然後就開始寫我們的JS.首先要在我們的想要顯示Tooltip的地方動態插入一個DIV.在這裡,我將會在具有"myTip"屬性的元素上顯示Tooltip,並將"myTip"屬性的值作為顯示內容顯示出來.例如我們的目標元素就好像這樣:

<a myTip="這是要顯示的內容!" href="#"></a> 

所以我們的jQuery代碼如下:

$(function(){
              $("[myTip]").hover(function(){
                $('<div id="luluTip"><div class="triangle" /></div>')
                .insertAfter(this)
                .prepend($(this).attr("myTip"));
                $("#luluTip").css({"display":"block"});
              });
              },function(){
                $("#luluTip").remove();
            })
});

$("[myTip]") 的意思是找到文檔中含有"myTip"屬性的所有元素,這個是CSS運算式.jQuery的選取器還是很強的,建議多看它的文檔.
我們看到上面有個 hover(function(){},function(){}) 的事件,其中第一個function()是滑鼠移至上方(hover)的時候會觸發的,而後面一個function() 則在滑鼠離開當前元素後觸發.
$('<div id="luluTip"><div class="triangle" /></div>').insertAfter(this) 的意思是動態建立一個'<div id="luluTip"><div class="triangle" /></div>'的元素並將它插入到當前元素的後面.
然後我們在該動態建立的DIV中顯示我們想要顯示的內容，該顯示內容就是我們目標元素上"myTip"屬性的值.我們可以通過$(this).attr("myTip")來擷取"myTip"屬性的值.在這裡我們用的$(this)而不是this.因為$(this)返回的是jQuery對象,而this返回的是DOM對象.jQuery對象才具有attr("myTip")方法.然後我們用 prepend() 將該要顯示的內容插入到我們剛才動態建立的DIV中.
因為我們在CSS中將改DIV定義為不可見的，所以最後我們要將它設定為可見的,我們通過設定CSS來實現:
css({"display":"block"});
在我們的滑鼠離開當前元素後我們動態建立添加進來的DIV並沒有用了並且還有礙地方,所以我們用remove()將它移除掉.當然在這裡你可以加一個動態效果,例如:

$("#luluTip").fadeOut('slow',function(){
    $(this).remove();
});

好,接下來我們我們要實現滑鼠移動的時候我們的Tooltip跟隨滑鼠移動的效果.
首先我們加一個mousemove的函數.這就是JS中的onmousemove,在jQuery中所有的事件函數命名都將前面的on去掉的.
然後,我們就要想辦法擷取滑鼠的座標.在這裡我們需要聲明一個evnet對象.不論何時你移動滑鼠/點擊/按鍵等等，會對應一個event的事件．在IE裡event是全域變數，會被儲存在window.event裡．在firefox中，或者其他瀏覽器，event事件會被相應的自訂函數擷取.所以我們取得event對象的函數如下:

$(this).mousemove(function(e){
    e=e || window.event;
});

(e = e || window.event) 讓e在所有瀏覽器下都能擷取到event事件的對象.在Firefox下"||window.event"將不起作用，因為e已經有了賦值．在MSIE下e則是空的，所以e將被賦值為window.event.
然後我們就可以很簡單的擷取到滑鼠的座標位置,最後完整的代碼如下:

$(function(){
      $("[myTip]").hover(function(){
        $('<div id="luluTip"><div class="triangle" /></div>')
        .insertAfter(this)
        .prepend($(this).attr("myTip"));
      $(this).mousemove(function(e){
            e=e || window.event;
            var x=e.pageX-36;
            if(x-2<0)
                x=2;
            if(x+152>document.body.clientWidth)
                x=document.body.clientWidth-152;
            $("#luluTip").css({"left":x,"top":e.pageY+18,"display":"block"});
      });
        },function(){
        $("#luluTip").remove();
    })
});

在這裡要注意一下e.pageX和e.clientX的區別和在不同瀏覽器下的區別.這裡不做詳細分析了,有興趣的自己搜尋相關的文章看看.

Enjoy！