GAJDAW


MOJE KSIĄŻKI

Książka pt. Git. Recipes
Książka pt. Git. Rozproszony system kontroli wersji
Książka pt. PhpStorm Starter
Książka pt. Symfony w przykładach
Książka pt. GIMP. Praktyczne projekty. Wydanie II
Książka pt. PHP, MySQL i MVC. Tworzenie witryn WWW opartych na bazie danych
Książka pt. PHP. Praktyczne projekty

PROGRAMY

1 2


Tooltip — podpowiedzi wyskakujące obok kursora myszki. Implementacja przy użyciu jQuery

Włodzimierz Gajda

1. Wyskakujące okno

Na stronie WWW umieszczamy akapit tekstu:

<body>

<p>
Lorem ipsum dolor sit amet...
</p>

</body>

Następnie w nagłówku strony dołączamy jQuery:

<script type="text/javascript" src="jquery.js"></script>    

Wyskakująca podpowiedź będzie zawarta w elemencie div o identyfikatorze #popup. Element ten możemy dodać do strony statycznie:

<body>

<div id="popup"></div>

<p>
Lorem ipsum dolor sit amet...
</p>

</body>

lub dynamicznie, wywołując metodę prepend():

$('body').prepend('<div id="popup">Lorem ipsum...</div>');    

Kod jQuery ustala obsługę trzech zdarzeń elementu p:

$('p').mouseover(function(){
    $('#popup').show();
});    

$('p').mouseout(function(){
    $('#popup').hide();
});        

$('p').mousemove(function(e){
    $('#popup').css('left', e.pageX + 10);
    $('#popup').css('top', e.pageY + 10);        
});     

Współrzędne myszki odczytujemy z parametru e przekazanego do metody mousemove, jak to opisano w tutorialu Mouse Position.

Kompletny przykład jest przedstawiony na listingu 1.

<!DOCTYPE...>
<html>
    ...
    <script type="text/javascript" src="jquery.js"></script>    
    <script type="text/javascript">
    
    $(function(){
    
        $('body').prepend('<div id="popup">Lorem ipsum...</div>');    

        $('#popup').hide();

        $('p').mouseover(function(){
            $('#popup').show();
        });    
    
        $('p').mouseout(function(){
            $('#popup').hide();
        });        
    
        $('p').mousemove(function(e){
            $('#popup').css('left', e.pageX + 10);
            $('#popup').css('top', e.pageY + 10);        
        });     
    
    });    
        
    </script>

    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
<body>

<p>
Lorem ipsum...
</p>

</body>
</html>

Listing 1. Podpowiedź wyskakująca po wskazaniu akapitu kursorem myszki


Reklama

Szkolenia z Zend Framework 2.0


1 2