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

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


Reklama

Szkolenia z Zend Framework 2.0


1 2