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

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

Włodzimierz Gajda

Podpowiedzi wyskakujące obok wskaźnika myszki są określane terminami hint lub tooltip. Artykuł przedstawia metodę implementacji takich wyskakujących podpowiedzi przy użyciu jQuery. Treść podpowiedzi może być pobierana w tle przy użyciu Ajaksa.

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

2. Podpowiedzi Ajaksowe

Treść podpowiedzi może być pobierana w tle przy użyciu Ajaksa. Takie rozwiązanie przedstawię na przykładzie słownika angielskich wyrazów.

2.1 Dane

Plik zdania.txt zawiera zdania ilustrujące użycie angielskich słów. Początkowe linie pliku mają postać:

forbearance|I ask the forbearance of the children...
primeval|...a book about the primeval forest called True Stories.
swallow|It showed a boa constrictor swallowing an animal.
...

Separatorem w pliku jest znak |. Pierwszy element każdego wiersza to słowo w języku angielskim, drugi — zdanie prezentujące użycie danego słowa. Podane cytaty pochodzą z „Małego Księcia”.

Drugi plik, slownik.txt, zawiera polskie tłumaczenia słów:

forbearance|wyrozumiałość, cierpliwość, powstrzymywanie się
primeval|pierwotny, pradawny, prastary
swallow|jaskółka, skok do wody, połknąć, przełknąć
...

Separatorem jest znowu znak |. Plik stosuje kodowanie utf-8.

2.2 Zadanie

Zadanie polega na tym, by plik zdania.txt przedstawić na stronie WWW w postaci akapitów. Trudne słowa należy wytłuścić. Po wskazaniu słowa myszką, należy wyświetlić tooltip zawierający tłumaczenie słowa.

W pliku zdania.txt pierwsze zdanie to:

forbearance|I ask the forbearance of the children...

Na rysunku 1 słowo forbearance zostało wytłuszczone. Po wskazaniu słowa myszką ujrzymy wyskakujące okienko (tooltip) z tłumaczeniem odczytanym z pliku slownik.txt:

forbearance|wyrozumiałość, cierpliwość, powstrzymywanie się

Rysunek 1. Podpowiedź tooltip z tłumaczeniem słowa forbearance

Rysunek 2 prezentuje drugie zdanie z wytłuszczonym wyrazem primeval oraz okno z tłumaczeniem.

Rysunek 2. Podpowiedź tooltip z tłumaczeniem słowa primeval

2.3 Rozwiązanie

Rozwiązanie składa się z dwóch skryptów:

Pierwszy z nich drukuje zdania z zaznaczonymi słowami, a drugi — zwraca tłumaczenie słowa.

2.4 Skrypt slownik.php

Skrypt slownik.php posługuje się jedną zmienną URL o nazwie slowo. Po wywołaniu w przeglądarce:

slownik.php?slowo=awkward

ujrzysz tłumaczenie słowa awkward.

Skrypt rozpoczynamy od ustalenia — w odpowiedzi HTTP — kodowania znaków:

header('Content-type: text/html; charset=utf-8');

W zależności od ustawień serwera Apache brak powyższej linijki może spowodować niepoprawne wyświetlanie polskich znaków.

Następnie odczytujemy plik tlumaczenia.txt i na jego podstawie tworzymy tablicę $s, która będzie zawierała wszystkie słowa i ich tłumaczenia:

$p = file('dane/tlumaczenia.txt');
$s = array();

foreach ($p as $linia) {
    $e = explode('|', trim($linia));
    $wyraz = strtolower($e[0]);
    $tlumaczenie = $e[1];
    $s[$wyraz] = $tlumaczenie;
}

W kolejnym kroku sprawdzamy czy została podana zmienna $_GET['slowo']:

if (isset($_GET['slowo'])) {

    ...

} else {
    exit();
}

Jeśli tak, słowo przekształcamy do małych liter, oraz usuwamy wiodące i końcowe białe znaki:

$slowo = strtolower(trim($_GET['slowo']));

Następnie sprawdzamy, czy słowo nie jest zbyt długie, czy składa się tylko z liter, oraz czy jest zawarte w tablicy $s. Jeśli tak, to drukujemy tłumaczenie:

if (
    (strlen($slowo) < 60) &&
    preg_match('/^[a-z\-]+$/i', $slowo) &&
    isset($s[$slowo])
) {
    echo '<h1>' . $slowo . '</h1><p>';
    echo $s[$slowo];
    echo '</p>';
}

Kompletny skrypt został przedstawiony na listingu 2.

<?php

header('Content-type: text/html; charset=utf-8');

$p = file('dane/tlumaczenia.txt');
$s = array();

foreach ($p as $linia) {
    $e = explode('|', trim($linia));
    $wyraz = strtolower($e[0]);
    $tlumaczenie = $e[1];
    $s[$wyraz] = $tlumaczenie;
}


if (isset($_GET['slowo'])) {
    $slowo = strtolower(trim($_GET['slowo']));
    if (
        (strlen($slowo) < 60) &&
        preg_match('/^[a-z\-]+$/i', $slowo) &&
        isset($s[$slowo])
    ) {
        echo '<h1>' . $slowo . '</h1><p>';
        echo $s[$slowo];
        echo '</p>';
    }

} else {
    exit();
}

Listing 2. Skrypt slownik.php

2.5 Skrypt zdania.php

W skrypcie zdania.php linijka po linijce przetwarzamy plik zdania.txt:

<body>
<?php

$p = file('dane/zdania.txt');

foreach ($p as $l) {
...
}

?>
</body>

W pętli każda linijka jest krojona znakiem |:

$e = explode('|', trim($l));

Wytłuszczanie wyrazów wykonujemy wywołując funkcję preg_replace():

echo '<p class="tresc">';
echo preg_replace("/($e[0])/i", '<strong>$1</strong>', $e[1]);
echo '</p>';

Za wyświetlanie podpowiedzi odpowiada skrypt tooltip.js przedstawiony na listingu 3.

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

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

    $('strong').mouseover(function(){
        $('#popup').show();
        $('#popup').load('slownik.php?slowo=' + $(this).html());
    });    
    
    $('strong').mouseout(function(){
        $('#popup').hide();
    });        
    
    $('strong').mousemove(function(e){
        $('#popup').css('left', e.pageX + 10);
        $('#popup').css('top', e.pageY + 10);        

    });     
    
});

Listing 3. Skrypt tooltip.js

lp. Przykład
1. Przykład 1: okienko Tooltip
2. Przykład 2: słownik z podpowiedziami tooltip

Tabela 1. Przykłady do pobrania


Reklama

Szkolenia z Zend Framework 2.0