JavaScript i jQuery. Nieoficjalny podręcznik · 2020. 8. 26. · Modyfikacja dziaania slidera...

Tytuł oryginału: JavaScript & jQuery: The Missing ManualTłumaczenie: Piotr Rajca

ISBN: 978-83-246-4381-3

© 2012 Helion S.A.

Authorized Polish translation of the English edition of JavaScript & jQuery: The Missing Manual, 2nd Edition ISBN 9781449399023 © 2012 David Sawyer McFarland.

This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher.

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były kompletnei rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl (księgarnia internetowa, katalog książek)

Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/jsjqnp.zip

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/jsjqnpMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/jsjqnp

http://helion.pl/rf/jsjqnp

http://helion.pl/ro/jsjqnp

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre�ci

Nieoficjalna czo�ówka ...................................................................................... 11

Wprowadzenie .................................................................................................. 15

Cze�� I. Wprowadzenie do j�zyka JavaScript ..............................33

Rozdzia� 1. Pierwszy program w j�zyku JavaScript ........................................ 35Wprowadzenie do programowania ............................................................. 36

Czym jest program komputerowy? ......................................................... 38Jak doda� kod JavaScript do strony? ........................................................... 38

Zewn�trzne pliki JavaScript .................................................................... 40Pierwszy program w j�zyku JavaScript ....................................................... 42Dodawanie tekstu do stron ........................................................................ 45Do��czanie zewn�trznych plików JavaScript .............................................. 46Wykrywanie b��dów .................................................................................. 48

Konsola JavaScript w przegl�darce Firefox ............................................... 48Wy�wietlanie okna dialogowego b��dów w Internet Explorerze 9 ............. 50Konsola b��dów w przegl�darce Chrome ................................................. 51Konsola b��dów w przegl�darce Safari ..................................................... 51

Rozdzia� 2. Gramatyka j�zyka JavaScript ....................................................... 55Instrukcje ................................................................................................. 55Wbudowane funkcje .................................................................................. 56Typy danych ............................................................................................. 56

Liczby .................................................................................................... 57�a�cuchy znaków .................................................................................. 57Warto�ci logiczne ................................................................................... 58

Zmienne ................................................................................................... 59Tworzenie zmiennych ............................................................................ 59Uywanie zmiennych ............................................................................. 62

S P I S T R E � C I4

Uywanie typów danych i zmiennych ........................................................63Podstawowe operacje matematyczne ......................................................64Kolejno�� wykonywania operacji .............................................................65��czenie �a�cuchów znaków ...................................................................65��czenie liczb i �a�cuchów znaków .........................................................66Zmienianie warto�ci zmiennych .............................................................67

Przyk�ad — uywanie zmiennych do tworzenia komunikatów ....................69Przyk�ad — pobieranie informacji ...............................................................70Tablice ......................................................................................................72

Tworzenie tablic .....................................................................................74Uywanie elementów tablicy ..................................................................75Dodawanie elementów do tablicy ............................................................76Usuwanie elementów z tablicy ................................................................79

Przyk�ad — zapisywanie danych na stronie za pomoc� tablic ......................79Krótka lekcja o obiektach ...........................................................................82Komentarze ...............................................................................................85

Kiedy uywa� komentarzy? .....................................................................86Komentarze w tej ksi�ce ........................................................................87

Rozdzia� 3. Dodawanie struktur logicznych i steruj�cych .............................. 89Programy reaguj�ce inteligentnie ...............................................................89

Podstawy instrukcji warunkowych ..........................................................91Uwzgl�dnianie planu awaryjnego ............................................................94Sprawdzanie kilku warunków .................................................................94Bardziej skomplikowane warunki ...........................................................97Zagniedanie instrukcji warunkowych ..................................................99Wskazówki na temat pisania instrukcji warunkowych ..........................100

Przyk�ad — uywanie instrukcji warunkowych .........................................101Obs�uga powtarzaj�cych si� zada� za pomoc� p�tli ...................................104

P�tle while ............................................................................................104P�tle i tablice ........................................................................................106P�tle for ................................................................................................107P�tle do-while .......................................................................................109

Funkcje — wielokrotne korzystanie z przydatnego kodu ...........................110Krótki przyk�ad .....................................................................................112Przekazywanie danych do funkcji .........................................................113Pobieranie informacji z funkcji .............................................................114Unikanie konfliktów mi�dzy nazwami zmiennych ...............................116

Przyk�ad — prosty quiz .............................................................................118

Cze�� II. Wprowadzenie do biblioteki jQuery ............................125

Rozdzia� 4. Wprowadzenie do jQuery ........................................................... 127Kilka s�ów o bibliotekach JavaScript .........................................................127Jak zdoby� jQuery? ..................................................................................129Dodawanie jQuery do strony ...................................................................132Podstawowe informacje o modyfikowaniu stron WWW ...........................134


Zrozumie� DOM .................................................................................... 138Pobieranie elementów stron na sposób jQuery ......................................... 140

Proste selektory .................................................................................... 141Selektory zaawansowane ...................................................................... 143Filtry jQuery ........................................................................................ 146Zrozumienie kolekcji jQuery ................................................................ 148

Dodawanie tre�ci do stron ....................................................................... 149Zast�powanie i usuwanie wybranych elementów .................................. 152

Ustawianie i odczyt atrybutów znaczników .............................................. 154Klasy .................................................................................................... 154Odczyt i modyfikacja w�a�ciwo�ci CSS ................................................. 155Jednoczesna zmiana wielu w�a�ciwo�ci CSS .......................................... 157

Odczyt, ustawienia i usuwanie atrybutów HTML .................................... 159Wykonanie akcji na kadym elemencie kolekcji ....................................... 160

Funkcje anonimowe ............................................................................. 160this oraz $(this) .................................................................................... 162

Automatycznie tworzone, wyróniane cytaty ........................................... 163Opis rozwi�zania ................................................................................. 164Kod rozwi�zania ................................................................................... 165

Rozdzia� 5. Akcja i reakcja — o�ywianie stron za pomoc� zdarze� ............. 169Czym s� zdarzenia? ................................................................................. 169

Zdarzenia zwi�zane z mysz� ................................................................. 171Zdarzenia zwi�zane z dokumentem i oknem ........................................ 172Zdarzenia zwi�zane z formularzami ..................................................... 173Zdarzenia zwi�zane z klawiatur� .......................................................... 174

Obs�uga zdarze� przy uyciu jQuery ........................................................ 174Przyk�ad — wyrónianie wierszy tabeli ..................................................... 177Zdarzenia specyficzne dla biblioteki jQuery ............................................. 181

Oczekiwanie na wczytanie kodu HTML ............................................... 182Zdarzenia biblioteki jQuery .................................................................. 183Obiekt reprezentuj�cy zdarzenie ........................................................... 185Blokowanie standardowych reakcji na zdarzenia ................................... 186Usuwanie zdarze� ................................................................................ 187

Zaawansowane zarz�dzanie zdarzeniami ................................................. 188Inne sposoby stosowania funkcji bind() .................................................... 189Przyk�ad — jednostronicowa lista FAQ .................................................... 191

Omówienie zadania ............................................................................. 191Tworzenie kodu ................................................................................... 192

Rozdzia� 6. Animacje i efekty ......................................................................... 197Efekty biblioteki jQuery ........................................................................... 197

Podstawowe wy�wietlanie i ukrywanie ................................................. 198Wygaszanie oraz rozja�nianie elementów ............................................. 200Przesuwanie elementów ....................................................................... 202

Przyk�ad: wysuwany formularz logowania ................................................ 202Tworzenie kodu ................................................................................... 203


Animacje ................................................................................................205Tempo animacji ...................................................................................207

Wykonywanie operacji po zako�czeniu efektu ..........................................209Przyk�ad: animowany pasek ze zdj�ciami .................................................211

Tworzenie kodu ...................................................................................213

Cze�� III. Dodawanie mechanizmów do stron WWW ................ 217

Rozdzia� 7. Efekty zwi�zane z rysunkami ......................................................219Zamiana rysunków ..................................................................................219

Zmienianie atrybutu src rysunków .......................................................220Wst�pne wczytywanie rysunków ..........................................................221Efekt rollover z uyciem rysunków ........................................................222

Przyk�ad — dodawanie efektu rollover z uyciem rysunków ......................223Omówienie zadania ..............................................................................224Tworzenie kodu ...................................................................................225

Przyk�ad — galeria fotografii z efektami wizualnymi .................................228Omówienie zadania ..............................................................................228Tworzenie kodu ...................................................................................230

Wzbogacona galeria z wtyczk� FancyBox biblioteki jQuery .......................234Podstawy ..............................................................................................235Tworzenie galerii zdj�� .........................................................................237Personalizacja efektu FancyBox ............................................................238

Przyk�ad — galeria fotografii oparta na wtyczce FancyBox .........................244

Rozdzia� 8. Usprawnianie nawigacji ............................................................. 249Podstawowe informacje o odno�nikach ....................................................249

Pobieranie odno�ników w kodzie JavaScript ..........................................249Okre�lanie lokalizacji docelowej ...........................................................250Blokowanie domy�lnego dzia�ania odno�ników .....................................251

Otwieranie zewn�trznych odno�ników w nowym oknie ...........................252Tworzenie nowych okien .........................................................................255

W�a�ciwo�ci okien ................................................................................255Otwieranie stron w okienku na pierwotnej stronie ...................................259

Przyk�ad — otwieranie strony na stronie ...............................................262Animowane menu nawigacyjne ...............................................................263

Kod HTML ...........................................................................................264Kod CSS ...............................................................................................266Kod JavaScript ......................................................................................268Przyk�ad ...............................................................................................268

Rozdzia� 9. Wzbogacanie formularzy ............................................................ 271Wprowadzenie do formularzy ..................................................................271

Pobieranie elementów formularzy .........................................................273Pobieranie i ustawianie warto�ci elementów formularzy ........................275Sprawdzanie stanu przycisków opcji i pól wyboru ..................................276Zdarzenia zwi�zane z formularzami .....................................................277


Inteligentne formularze ........................................................................... 281Aktywowanie pierwszego pola formularza ............................................ 282Wy��czanie i w��czanie pól ................................................................... 283Ukrywanie i wy�wietlanie opcji formularza ........................................... 284

Przyk�ad — proste wzbogacanie formularza .............................................. 285Aktywowanie pola ................................................................................ 286Wy��czanie pól formularza ................................................................... 286Ukrywanie pól formularza .................................................................... 289

Walidacja formularzy .............................................................................. 291Wtyczka Validation .............................................................................. 293Podstawowa walidacja .......................................................................... 294Zaawansowana walidacja ..................................................................... 297Okre�lanie stylu komunikatów o b��dach ............................................. 302

Przyk�ad zastosowania walidacji .............................................................. 303Prosta walidacja ................................................................................... 303Walidacja zaawansowana ..................................................................... 305Walidacja pól wyboru i przycisków opcji ............................................... 308Formatowanie komunikatów o b��dach ................................................ 311

Rozdzia� 10. Rozbudowa interfejsu stron WWW .......................................... 313Organizowanie informacji przy uyciu kart .............................................. 314

Kod HTML .......................................................................................... 315Kod CSS ............................................................................................... 316Kod JavaScript ...................................................................................... 319Przyk�ad — panel kart ........................................................................... 320

Dodawanie sliderów ................................................................................ 325Stosowanie slidera AnythingSlider ....................................................... 326Przyk�ad — AnythingSlider ................................................................... 327Modyfikowanie wygl�du slidera ............................................................ 329Modyfikacja dzia�ania slidera ............................................................... 332

Okre�lanie wielko�ci i po�oenia elementów strony ....................................... 333Okre�lanie wysoko�ci i szeroko�ci elementów ...................................... 334Okre�lanie po�oenia elementu na stronie ............................................ 337Uwzgl�dnianie przewini�cia strony ...................................................... 339

Dodawanie etykietek ekranowych ........................................................... 340Kod HTML .......................................................................................... 340Kod CSS ............................................................................................... 342Kod JavaScript ...................................................................................... 343Przyk�ad — etykiety ekranowe .............................................................. 344

Cze�� IV. AJAX — komunikacja z serwerem sieciowym ...........355

Rozdzia� 11. Wprowadzenie do AJAX-a .........................................................357Czym jest AJAX? .................................................................................... 357AJAX — podstawy ................................................................................... 360

Elementy uk�adanki ............................................................................. 360Komunikacja z serwerem sieciowym .................................................... 362


AJAX w bibliotece jQuery ........................................................................365Uywanie funkcji load() ........................................................................365Przyk�ad — korzystanie z funkcji load() .................................................368Funkcje get() i post() .............................................................................372Formatowanie danych przesy�anych na serwer ......................................373Przetwarzanie danych zwróconych z serwera .........................................376Obs�uga b��dów ....................................................................................380Przyk�ad — korzystanie z funkcji get() ...................................................380

Format JSON ..........................................................................................386Dost�p do danych z obiektów JSON ......................................................388Z�oone obiekty JSON ..........................................................................389

Rozdzia� 12. Flickr oraz Google Maps ............................................................ 393Prezentacja JSONP ..................................................................................393Dodawanie do witryny kana�u Flickr ........................................................395

Tworzenie adresu URL .........................................................................395Stosowanie funkcji $.getJSON() ............................................................398Prezentacja danych kana�u Flickr w formacie JSON ..............................398

Przyk�ad — dodawanie zdj�� z Flickr na w�asnej stronie ............................400Wy�wietlanie na w�asnej stronie map Google Maps .................................404

Okre�lanie lokalizacji na mapie ............................................................407Inne opcje wtyczki GoMap ...................................................................409Dodawanie znaczników ........................................................................411Dodawanie okienek informacyjnych do znaczników .............................415

Przyk�ad zastosowania wtyczki GoMap ....................................................415

Cze�� V. Rozwi�zywanie problemów, wskazówki i sztuczki .....419

Rozdzia� 13. Wykorzystywanie wszystkich mo�liwo�ci jQuery ....................421Przydatne informacje i sztuczki zwi�zane z jQuery ....................................421

$() to to samo, co jQuery() .....................................................................421Zapisywanie pobranych elementów w zmiennych .................................422Jak najrzadsze dodawanie tre�ci ............................................................423Optymalizacja selektorów ....................................................................425

Korzystanie z dokumentacji jQuery .........................................................426Czytanie dokumentacji na stronie jQuery .............................................430

Poruszanie si� po DOM ...........................................................................432Inne funkcje do manipulacji kodem HTML .............................................438Zaawansowana obs�uga zdarze� ..............................................................441

Rozdzia� 14. Zaawansowane techniki j�zyka JavaScript ............................. 445Stosowanie �a�cuchów znaków ................................................................445

Okre�lanie d�ugo�ci �a�cucha ...............................................................446Zmiana wielko�ci znaków w �a�cuchu ..................................................446Przeszukiwanie �a�cuchów znaków: zastosowanie indexOf() ...................447Pobieranie fragmentu �a�cucha przy uyciu metody slice() ....................449


Odnajdywanie wzorów w �a�cuchach ...................................................... 450Tworzenie i stosowanie podstawowych wyrae� regularnych ................... 451Tworzenie wyrae� regularnych ........................................................... 451Grupowanie fragmentów wzorców ....................................................... 456Przydatne wyraenia regularne ............................................................. 456Dopasowywanie wzorców ..................................................................... 461Zast�powanie tekstów .......................................................................... 463Testowanie wyrae� regularnych .......................................................... 464

Stosowanie liczb ...................................................................................... 464Zamiana �a�cucha znaków na liczb� ..................................................... 465Sprawdzanie wyst�powania liczb .......................................................... 467Zaokr�glanie liczb ................................................................................ 468Formatowanie warto�ci monetarnych ................................................... 468Tworzenie liczb losowych ..................................................................... 469

Daty i godziny ......................................................................................... 471Pobieranie miesi�ca ............................................................................. 471Okre�lanie dnia tygodnia ...................................................................... 472Pobieranie czasu .................................................................................. 472Tworzenie daty innej ni bie�ca .......................................................... 476

��czenie rónych elementów ................................................................... 477Uywanie zewn�trznych plików JavaScript ........................................... 477

Tworzenie bardziej wydajnego kodu JavaScript ........................................ 479Zapisywanie ustawie� w zmiennych .................................................... 479Operator trójargumentowy ................................................................... 481Instrukcja Switch ................................................................................. 482

Tworzenie kodu JavaScript o krótkim czasie wczytywania ....................... 484

Rozdzia� 15. Diagnozowanie i rozwi�zywanie problemów ........................ 487Najcz�stsze b��dy w kodzie JavaScript ...................................................... 487

Brak symboli ko�cowych ...................................................................... 488Cudzys�owy i apostrofy ........................................................................ 491Uywanie s�ów zarezerwowanych ......................................................... 492Pojedynczy znak równo�ci w instrukcjach warunkowych ...................... 493Wielko�� znaków ................................................................................. 493Nieprawid�owe �cieki do zewn�trznych plików JavaScript ................... 494Nieprawid�owe �cieki w zewn�trznych plikach JavaScript .................... 494Znikaj�ce zmienne i funkcje ................................................................. 496

Diagnozowanie przy uyciu dodatku Firebug ........................................... 496Instalowanie i w��czanie dodatku Firebug ............................................. 497Przegl�danie b��dów za pomoc� dodatku Firebug .................................. 498ledzenie dzia�ania skryptu za pomoc� funkcji console.log() .................. 499Przyk�ad — korzystanie z konsoli dodatku Firebug ................................ 500Diagnozowanie zaawansowane ............................................................ 503

Przyk�ad diagnozowania .......................................................................... 508

Dodatek A. Materia�y zwi�zane z j�zykiem JavaScript ................................ 515�ród�a informacji .................................................................................... 515

Witryny ............................................................................................... 515Ksi�ki ................................................................................................. 516


Podstawy j�zyka JavaScript ......................................................................516Artyku�y i prezentacje ...........................................................................516Witryny ................................................................................................516Ksi�ki .................................................................................................517

jQuery .....................................................................................................517Artyku�y i prezentacje ...........................................................................517Witryny ................................................................................................517Ksi�ki .................................................................................................518

AJAX .......................................................................................................518Witryny ................................................................................................518Ksi�ki .................................................................................................519

Zaawansowany j�zyk JavaScript ...............................................................519Artyku�y i prezentacje ...........................................................................519Witryny ................................................................................................519Ksi�ki .................................................................................................520

CSS .........................................................................................................520Witryny ................................................................................................521Ksi�ki .................................................................................................521

Skorowidz ....................................................................................................... 525

Rozbudowa interfejsustron WWW

ywa, e strony WWW przypominaj� d�ugie, jednostronicowe broszury. Od-wiedzaj�ce je osoby mog� si� czu� przyt�oczone przez wiele tekstu i znaczn�liczb� obrazków, które musz� d�ugo przewija�, zw�aszcza gdy nie s� w stanie

szybko znale�� poszukiwanych informacji. To naszym zadaniem, zadaniem twór-ców stron jest zapewnienie uytkownikom narz�dzi, które u�atwi� im znalezienietego, czego szukaj�. Przy uyciu JavaScriptu oraz biblioteki jQuery mona uspraw-nia� tworzone strony i u�atwia� uytkownikom korzystanie z nich — na przyk�adpoprzez ukrywanie zawarto�ci, a do momentu gdy b�dzie potrzebna, oraz zapew-nianie �atwiejszego dost�pu do informacji.

W tym rozdziale poznasz techniki s�u�ce do poprawiania czytelno�ci i �atwo�ci ko-rzystania ze stron WWW. Karty pozwalaj� na umieszczanie znacznych ilo�ci in-formacji na stosunkowo niewielkim obszarze i zapewniaj� moliwo�� klikni�cia wy-branej karty w celu uzyskania dost�pu do mniejszej porcji danych. Etykietki ekranowe— niewielkie, wyskakuj�ce okienka pokazywane po wskazaniu jakiego� elementustrony wska�nikiem myszy — umoliwiaj� wy�wietlanie dodatkowych informacji.Coraz bardziej popularn� form� kontroli zawarto�ci strony s� tak zwane slidery(od angielskiego s�owa slide — przesuwa�) — mona by je porówna� do okna, które-go zawarto�� da si� przesuwa�, by ukry� jedne, a wy�wietli� inne elementy tejestrony. Slidery pozwalaj� na prezentowanie znacznych ilo�ci informacji i s� bardzocz�sto stosowane na stronach g�ównych witryn.

W tym rozdziale poznasz take kilka przydatnych technik pozwalaj�cych na tworze-nie w�asnych komponentów interfejsu uytkownika, takich jak okre�lanie wymiarówokna przegl�darki, konkretnego elementu strony oraz po�oenia elementu na stronie.

B

10ROZDZIA�

C Z � � � I I I � W P R O W A D Z D O D A W A N I E M E C H A N I Z M Ó W D O S T R O N W W W

Organizowanie informacjiprzy u�yciu kart

314

Organizowanie informacji przy u�yciu kartUmieszczenie na stronie zbyt wielu informacji moe przyt�oczy� uytkownika i spra-wi�, e strona b�dzie wygl�da�a na przepe�nion�. J�zyk JavaScript zapewnia wiele mo-liwo�ci prezentowania znacznych ilo�ci informacji na niewielkim obszarze. Jedn�z technik jest stosowanie kart. Panel kart sk�ada si� z rz�du zak�adek wy�wietlonychu góry oraz jednej, widocznej karty. Kiedy uytkownik kliknie zak�adk�, aktualnieprezentowana karta znika, a na jej miejscu pojawia si� inna (patrz rysunek 10.1).

Rysunek 10.1. Panele kart s� cz�sto stosowane na witrynach zajmuj�cych si� handlem elektronicznym, naktórych informacje s� prezentowane na osobnych kartach. W przedstawionym tu przyk�adzie (b�d�cym jedy-nie fragmentem ca�ej strony) przedstawiono karty zawieraj�ce opis produktu, jego specyfikacj� oraz informa-cje o sposobie dostawy; przy takim rozwi�zaniu u�ytkownik mo�e klikn�� kart�, by wy�wietli� te informacje,które go interesuj�

Panele kart, tak jak wszystkie komponenty interfejsu uytkownika stron WWW, s�tworzone przy uyciu kodów napisanych w j�zykach HTML, JavaScript oraz zapomoc� CSS. Kady z tych elementów paneli kart mona pisa� na wiele sposobów,poniej przedstawione zosta�o bardzo proste rozwi�zanie.

R O Z D Z I A � 1 0 . R O Z B U D O W A I N T E R F E J S U S T R O N W W W


315

Kod HTMLPanel kart sk�ada si� z dwóch podstawowych elementów: zak�adek (czyli przyciskówumieszczonych jeden obok drugiego w wierszu wy�wietlonym na górze lub na dolekomponentu) oraz kart (b�d�cych znacznikami <div> zawieraj�cymi informacje,które chcemy prezentowa�). Dodatkowo komponent moe zawiera� kilka innychznaczników s�u�cych do zapewnienia w�a�ciwej jego organizacji oraz maj�cych nacelu u�atwienie kodu JavaScript, który go obs�uguje. Oto one.

� Element pojemnika. Cho� w�a�ciwie nie jest to niezb�dne, jednak zastosowa-nie dodatkowego znacznika <div>, w którym b�d� umieszczone wszystkie za-k�adki i karty, moe w wyra�ny sposób oznaczy� pocz�tek i koniec komponentuoraz u�atwi� tworzenie kodu JavaScript zw�aszcza wtedy, kiedy na jednej stroniema znale�� si� wi�cej takich paneli karty. Oto podstawowy kod HTML takiegoelementu:

<div class="tabbedPanels">

</div>

Dodanie do tego znacznika atrybutu class identyfikuje go i u�atwia tworzeniestylów okre�laj�cych posta� elementów wewn�trz panelu oraz tworzenie selek-torów jQuery odwo�uj�cych si� do poszczególnych zak�adek i kart. Je�li na naszejstronie ma si� znajdowa� tylko jeden panel kart, zamiast klasy mona by okre-�li� identyfikator tego znacznika.

� Zak�adki. Zazwyczaj tworzy si� je w postaci listy wypunktowanej, zawieraj�cejodno�niki:

<ul class="tabs"><li><a href="#panel1">Informacje ogólne</a></li><li><a href="#panel2">Specyfikacja</a></li><li><a href="#panel3">Dostawa</a></li></ul>

Odno�niki umieszczone w poszczególnych punktach listy odwo�uj� si� do iden-tyfikatorów przypisanych poszczególnym kartom (opisanym poniej). Utworze-nie odno�nika od karty sprawia, e uytkownicy, którzy wy��czyli w swoichprzegl�darkach obs�ug� j�zyka JavaScript, b�d� mogli przeskoczy� prosto od wy-branego fragmentu tre�ci — klikni�cie takiego odno�nika powoduje przewini�ciestrony do okre�lonego miejsca.

Uwaga: Je�li nie wiesz, jak tworzy si� takie odno�niki, krótkie wyja�nienie mo�esz znale�� na stroniehttp://www.yourhtmlsource.com/text/internallinks.html.

� Pojemnik kart. Znacznik <div> zawieraj�cy wszystkie karty moe przyda� si�do okre�lania ich postaci w stylach CSS oraz odwo�ywania do nich przy uyciujQuery:

<div class="panelContainer">

</div>

316

� Karty. To w�a�nie w nich umieszczane s� w�a�ciwe informacje. Kada karta jestreprezentowana przez znacznik <div> i moe zawiera� dowolne tre�ci: nag�ówki,akapity, obrazki oraz inne znaczniki <div>. Kady z tych znaczników powinienmie� unikalny identyfikator, odpowiadaj�cy identyfikatorowi podanemu w atry-bucie HREF odno�ników tworz�cych zak�adki (patrz drugi punkt listy):

<div class="panel" id="panel1"> </div><div class="panel" id="panel2"> </div><div class="panel" id="panel3"> </div>

Dodanie do kadego z tych znaczników jakiej� klasy — na przyk�ad class=�"panel" — take jest dobrym pomys�em, gdy zapewnia dodatkowy sposóbokre�lania ich wygl�du i pobierania przy uyciu jQuery.

Wszystkie znaczniki <div> poszczególnych kart s� umieszczane wewn�trz nad-rz�dnego znacznika <div> pe�ni�cego rol� pojemnika. Kompletna struktura koduHTML panelu kart ma zatem nast�puj�c� posta�:

<div class="tabbedPanels"> <ul class="tabs"> <li><a href="#panel1">Informacje ogólne</a></li> <li><a href="#panel2">Specyfikacja</a></li> <li><a href="#panel3">Dostawa</a></li> </ul> <div class="panelContainer"> <div class="panel" id="panel1">  </div> <div class="panel" id="panel2">  </div> <div class="panel" id="panel3">  </div> </div></div>

Kod CSSArkusz stylów pozwoli nada� nag�ówkom kart wygl�d zak�adek (przycisków umiesz-czonych tu obok siebie), a take sprawi, e same karty b�d� wygl�da�y jako spójnaca�o��, w której tre�� b�dzie si� ��czy� z zak�adk�.

� Pojemnik. Nie musimy w aden sposób okre�la� wygl�du znacznika <div>,wewn�trz którego s� umieszczone wszystkie karty (w rzeczywisto�ci ten znacz-nik w ogóle nie jest potrzebny). Jednak moe si� przyda�, gdyby�my chcieli ogra-niczy� szeroko�� ca�ego panelu na przyk�ad po to, by umie�ci� go obok jakiego�innego elementu strony b�d� umiejscowi� obok siebie dwa takie panele. W ta-kim przypadku w stylu odnosz�cym si� do tego znacznika mogliby�my okre�li�jego szeroko�� w nast�puj�cy sposób:



317

.tabbedPanels { width: 50%}

� Lista wypunktowana oraz jej elementy. Poniewa listy wypunktowane s� za-zwyczaj nieco wci�te, zatem musimy z niej usun�� wszelkie wype�nienia zarów-no z lewej, jak i z prawej strony. Co wi�cej, aby zak�adki by�y rozmieszczone boksiebie, a nie jedna nad drug�, w elementach listy musimy zastosowa� w�a�ci-wo�� float. I w ko�cu nie moemy zapomnie� o usuni�ciu punktorów, które s�standardowo wy�wietlane z lewej strony kadego punktu listy. Wszystkie te za-dania realizuj� dwa ponisze style:

.tabs { margin: 0; padding: 0;}.tabs li { float: left; list-style: none;}

Uwaga: Przedstawiony tu kod CSS odnosi si� do kodu HTML z poprzedniego punktu rozdzia�u. Innymis�owy, regu�a .tabs odwo�uje si� do listy wypunktowanej — <ul class="tabs"> — natomiast regu�a.tabs li — do znaczników <li> umieszczonych wewn�trz tej listy.

� Same zak�adki s� reprezentowane przez znaczniki <a> umieszczone wewn�trzpunktów listy, czyli znaczników <li>. W stylu okre�laj�cym ich posta� na pewnotrzeba b�dzie odpowiednio ustawi� kilka w�a�ciwo�ci. Przede wszystkich chce-my usun�� podkre�lenie, którym zazwyczaj s� oznaczane wszystkie odno�niki,oprócz tego ich w�a�ciwo�ci display przypiszemy warto�� block, by mona by�ookre�la� ich marginesy i wype�nienia. Oto styl okre�laj�cy posta� zak�adek:

.tabs a { display: block; text-decoration: none; padding: 3px 5px;}

Oczywi�cie, mona przypuszcza�, e b�dziesz chcia� uzupe�ni� t� regu�� styluo dodatkowe w�a�ciwo�ci, by zak�adki wygl�da�y naprawd� wspaniale. Móg�by�na przyk�ad oywi� je, okre�laj�c kolor t�a, zmieni� czcionk�, jej kolor i wielko��,by tekst zak�adek wyrónia� si� w�ród pozosta�ej tre�ci kart.

� Aktywna zak�adka. Bardzo dobrym pomys�em jest wyrónienie zak�adki skoja-rzonej z aktualnie widoczn� kart�. To rodzaj sygna�u „jeste� tutaj”, który wizu-alnie identyfikuje informacje prezentowane na karcie. Popularnym rozwi�za-niem stosowanym w tym celu jest utworzenie stylu, który przy uyciu jQueryzostanie dodany do zak�adki po jej klikni�ciu. Nie ma adnych obowi�zkowychw�a�ciwo�ci, które musieliby�my umieszcza� w tym stylu, jednak warto nada�zak�adce taki sam kolor t�a, który ma powi�zana z ni� karta (a jednocze�nie za-pewni�, by pozosta�e zak�adki mia�y inny kolor t�a), gdy dzi�ki temu zak�adkaoraz karta b�d� tworzy�y wizualn� ca�o��:

.tabs a.active { background-color: white;}



318

Wskazówka: Cz�sto stosowanym rozwi�zaniem jest dodawanie obramowa wokó� zak�adek i kart.Po klikni�ciu zak�adki ukrywamy jej dolne obramowanie, co sprawia wra�enie, jakby zak�adka zosta�azespolona z kart� (patrz rysunek 10.1). Aby powsta�o takie rozwi�zanie, na pocz�tek w regule .tabsa nale�y doda� w�a�ciwo�� border oraz przypisa� dolnemu marginesowi (margin-bottom) warto��-1px. Zastosowanie warto�ci ujemnej spowoduje przesuni�cie zak�adki o jeden piksel w dó�, co sprawi,�e b�dzie ona zachodzi� na kart�. Dodatkowo w regule .tabs a.active nale�y nada� dolnej kraw�dziobramowania kolor odpowiadaj�cy kolorowi t�a kart. W ten sposób, cho� kraw�d� obramowania wci��b�dzie wy�wietlana, ze wzgl�du na to, �e b�dzie ono mie� ten sam kolor, co t�o karty, a dodatkowob�dzie zachodzi� na jej obramowanie, b�dzie si� wydawa�o, �e zak�adka i karta stanowi� jedno��. (Abytakie rozwi�zanie dzia�a�o w przegl�darce Internet Explorer 8 oraz jej wcze�niejszych wersjach, ko-nieczne jest tak�e dodanie do regu�y stylu w�a�ciwo�ci position:relative). W kocu, mo�emy tak�edoda� obramowanie do pojemnika zawieraj�cego karty — powinno ono mie� taki sam styl, grubo��i kolor, co obramowanie u�yte w stylu .tabs a. Ostateczny efekt zastosowania takich stylów mo�nazobaczy� w przyk�adzie zamieszczonym na stronie 320.

� Pojemnik kart. Bardzo wany jest styl okre�laj�cy posta� znacznika <div>, we-wn�trz którego s� umieszczone poszczególne karty i ich zawarto��. Poniewaw stylu dla zak�adek uyli�my w�a�ciwo�ci float:left (aby przegl�darka wy-�wietli�a je jedn� obok drugiej), zatem musimy zadba�, by dalsza zawarto�� na-szego komponentu by�a prawid�owo wy�wietlana poniej zak�adek. W przeciw-nym razie przegl�darka spróbuje wy�wietli� j� z ich prawej strony.

.panelContainer { clear: left;}

Dodatkowo tego stylu mona uy� w celu okre�lenia postaci kart. Poniewapojemnik ten tworzy prostok�t wokó� wszystkich kart, mona w nim okre�li�kolor t�a, obramowanie, wype�nienie i tak dalej.

� Karty. Zgodnie z informacjami podanymi w poprzednim punkcie listy, do okre-�lenia podstawowych aspektów wygl�du kart, takich jak obramowanie, kolor t�ai podobne, mona uy� regu�y stylów odnosz�cej si� do pojemnika, w którym s�one umieszczone. Gdy jednak b�dziemy chcieli, moemy take okre�li� regu��stylów odnosz�c� si� do poszczególnych znaczników <div> tworz�cych karty.Wystarczy w tym celu zdefiniowa� regu�� stylu z selektorem .panel.

� Zawarto�� kart. Do okre�lenia postaci zawarto�ci umieszczonej na kartach mo-na zastosowa� selektory elementów potomnych, które pozwol� odwo�ywa� si�do znaczników wewn�trz elementów <div> tworz�cych karty. Aby na przyk�adokre�li� posta� znaczników <h2> umieszczonych wewn�trz kart i wy�wietli� ichzawarto�� czcionk� Arial, w kolorze pomara�czowym, mogliby�my uy� nast�-puj�cego stylu:

.panel h2 { color: orange; font-family: Arial, Helvetica, sans-serif}

Podobnie, by okre�li� posta� akapitów na kartach, nalea�oby uy� selektora w po-staci .panel p.



319

Kod JavaScriptPrzygotowali�my ju kod HTML oraz arkusz stylów CSS i moemy zobaczy� zak�adkiwy�wietlone w rz�dzie u góry komponentu oraz trzy znaczniki <div> (karty), umiesz-czone poniej, jeden nad drugim (patrz rysunek 10.2). Podstawowy wygl�d kompo-nentu jest zatem zgodny z naszymi zamierzeniami. Musimy jeszcze napisa� kodJavaScript, który b�dzie obs�ugiwa� otwieranie i zamykanie kart, zmienia� klasy orazpozwala� na wyrónianie aktywnej zak�adki i przywracanie pozosta�ych do standar-dowej postaci. Oto czynno�ci, jakie trzeba wykona�.

Rysunek 10.2. Struktura koduHTML panelu kart jest stosunko-wo prosta; sk�ada si� ze znaczni-ka <div>, listy wypunktowanej,kilku odno�ników oraz kilku kolej-nych znaczników <div>

1. Doda� obs�ug� zdarze click do odno�ników w zak�adkach.

Panele kart s� nierozerwalnie zwi�zane z iteracj� uytkownika z zak�adkami— klikni�cie pierwszej zak�adki powoduje wy�wietlenie pierwszej karty, klik-ni�cie innej — wy�wietlenie odpowiadaj�cej jej karty.

2. Doda� funkcj� anonimow� obs�uguj�c� zdarzenia click, która:

(a) Ukryje aktualnie widoczn� kart�,

(b) Usunie klas� active z wybranej wcze�niej zak�adki,

(c) Doda klas� active do klikni�tej zak�adki,

(d) Wy�wietli kart� skojarzon� z klikni�t� zak�adk�.



320

3. Zg�osi� zdarzenie click dla pierwszej zak�adki.

Ten krok jest konieczny, gdy w momencie wy�wietlania strony widoczne s�wszystkie karty, a adna zak�adka nie jest wyróniona. Oczywi�cie, mona na-pisa� kod, który wyróni pierwsz� zak�adk� oraz ukryje wszystkie karty z wyj�t-kiem pierwszej, jednak takie rozwi�zanie nie jest konieczne — mamy do dyspo-zycji funkcj� anonimow� obs�uguj�c� zdarzenia click (patrz krok 2.), która zrobito za nas. Moemy si� zatem ograniczy� do programowego „klikni�cia” pierw-szej zak�adki, co spowoduje wykonanie tej funkcji.

Tak ogólnie wygl�da kod, który musimy napisa�. Napiszesz go krok po kroku w ra-mach przyk�adu, przedstawionego w nast�pnym punkcie rozdzia�u.

Przyk�ad — panel kartSkoro ju rozumiesz podstawowe za�oenia zwi�zane z tworzeniem panelu kart,tu znajdziesz opis czynno�ci, jakie musisz wykona�, by go ostatecznie uruchomi�.W tym przyk�adzie dodasz kody CSS oraz JavaScript, które przekszta�c� prost� list�odno�ników przedstawion� na stronie 316 w interaktywny pasek nawigacyjny.

Uwaga: Informacje dotycz�ce pobierania przyk�adów do ksi��ki mo�na znale�� na stronie 43.

1. W edytorze tekstów otwórz plik tabs.html umieszczony w katalogu R10.

Plik tabs.html zawiera kod HTML opisany na stronie 315: nadrz�dny znacznik<div> ca�ego panelu karty, wypunktowan� list� odno�ników pe�ni�cych rolezak�adek, kolejny znacznik <div> zawieraj�cy karty oraz po jednym znaczniku<div> dla kadej karty. Znajdziesz w nim take podstawowe style CSS. Je�li wy-�wietlisz ten plik w przegl�darce, zobaczysz trzy zak�adki i zawarto�� trzech kart(wszystkie te karty s� rozmieszczone w pionie, jedna nad drug�).

Uwaga: Staraj�c si� w mo�liwie jak najwi�kszym stopniu poprawi� przejrzysto�� przyk�adu, u�ywanykod CSS umie�cili�my bezpo�rednio w kodzie HTML strony, w formie arkusza wpisanego. Je�li maszzamiar wielokrotnie korzysta� z niego podczas tworzenia w�asnych paneli kart, umie�� go w ze-wn�trznym pliku CSS.

Plik biblioteki jQuery zosta� ju do��czony do strony, a w sekcji nag�ówka znaj-duje si� wywo�anie funkcji $(document).ready(). Kolejnym krokiem, jaki wy-konasz, b�dzie ukrycie kart.

2. Kliknij puste miejsce wewn�trz funkcji $(document).ready() i wewn�trzniej dodaj poni�szy kod wyró�niony pogrubieniem:

$(document).ready(function() { $('.tabs a').click(function() {

}); // koniec funkcji click}); // koniec funkcji ready

Wywo�anie $('.tabs a') pobiera wszystkie znaczniki <a> umieszczone we-wn�trz elementu klasy tabs (czyli naszej wypunktowanej listy). (Funkcja click()



321

zosta�a opisana na stronie 175). Aktualnie dysponujesz pust� funkcj� anoni-mow�, musisz zatem uzupe�ni� jej kod. Zaczniesz od prostej instrukcji, którapozwoli poprawi� wydajno�� dzia�ania kodu.

3. Wewn�trz funkcji anonimowej wpisz poni�szy, pogrubiony kod: $('.tabs a').click(function() { $this = $(this); }); // koniec funkcji click

Zgodnie z informacjami podanymi na stronie 162, wyraenie $(this) stosowanewewn�trz funkcji anonimowej obs�uguj�cej zdarzenia pozwala odwo�a� si� doelementu, do którego zdarzenie zosta�o skierowane — w naszym przypadkuodwo�uje si� ono do zak�adki klikni�tej przez uytkownika. Za kadym razem,gdy uywamy wyraenia $() do pobrania elementu, wywo�ujemy funkcj� jQuery,zmuszaj�c tym samym przegl�dark� do wykonania wielu wierszy kodu JavaScript.Je�li wewn�trz jakiej� funkcji b�dziemy wielokrotnie uywali jakiego� selektorajQuery, doskona�ym pomys�em b�dzie zapisanie go w zmiennej. W powyszymprzyk�adzie $this jest zwyczajn� zmienn� zdefiniowan� przez programist� (czyliprzez Ciebie).

Zapisanie warto�ci wyraenia $(this) w zmiennej oznacza, e gdy tylko b�-dziesz chcia� odwo�a� si� do odno�nika, wystarczy skorzysta� ze zmiennej $this— nie b�dziesz musia� ponownie pobiera� go przy uyciu selektora jQuery. In-nymi s�owy, je�li w kodzie funkcji dwukrotnie pojawi si� wywo�anie $(this),b�dzie to oznacza�, e przegl�darka musi dwukrotnie wykona� funkcj� jQueryw celu pobrania tego samego elementu. Je�li za pierwszym razem zapiszesz war-to�� $(this) w zmiennej — $this — b�dziesz móg� z niej wielokrotnie korzy-sta� bez zmuszania przegl�darki do wykonywania jakichkolwiek dodatkowychczynno�ci (bardziej szczegó�owe informacje o zaletach, jakie daje zapisywanieselektorów jQuery w zmiennych, mona znale�� na stronie 422).

Teraz zajmiesz si� ukryciem kart i aktywacj� klikni�tej zak�adki.

4. Wpisz kod z wierszy 3. i 4. poni�szego fragmentu:1 $('.tabs a').click(function() {2 $this = $(this);3 $('.panel').hide();4 $('.tabs a.active').removeClass('active');5 }); // koniec funkcji click

Wiersz 3. powoduje ukrycie wszystkich kart. Poniewa kada z nich jest znacz-nikiem <div> nale�cym do klasy panel, selektor $('.panel') pobiera je wszyst-kie, a wywo�anie funkcji .hide() (patrz strona 198) powoduje ich ukrycie. Mu-sisz to zrobi�, gdy w przeciwnym razie po otworzeniu jednej karty poprzedniapozosta�aby widoczna.

Wiersz 4. usuwa klas� active ze wszystkich zak�adek — odno�ników umiesz-czonych w elemencie nale�cym do klasy tabs. Na stronie 317 wyja�nili�my,e utworzenie klasy active pozwoli zmieni� wygl�d zak�adki klikni�tej przezuytkownika (by wygl�da�a jak wizualny sygna� „jeste� tutaj”). Oczywi�cie, kiedyuytkownik kliknie zak�adk�, by j� uaktywni�, trzeba usun�� klas� active z za-k�adki, która do tej pory by�a aktywna. I w�a�nie to robi kod z wiersza 4., uywa-j�c przy tym funkcji removeClass() (opisanej na stronie 155). Teraz zajmieszsi� wyrónieniem klikni�tej zak�adki.



322

5. Dodaj kod umieszczony w wierszu 5.:1 $('.tabs a').click(function() {2 $this = $(this);3 $('.panel').hide();4 $('.tabs a.active').removeClass('active');5 $this.addClass('active').blur();6 }); // koniec funkcji click

Pami�tasz zapewne, e $this jest zmienn�, utworzon� w wierszu 2., która za-wiera odwo�anie do klikni�tego odno�nika. A zatem wywo�anie $this.addClass�('active') dodaje do tego odno�nika klas� active — przegl�darka uyje jej dookre�lenia postaci klikni�tej zak�adki. Umieszczone na ko�cu wiersza wywo-�anie funkcji .blur() korzysta z techniki tworzenia sekwencji wywo�a�, jak�daje biblioteka jQuery (która zosta�a opisana na stronie 149). To zwyczajnafunkcja wywo�ywana po wykonaniu funkcji addClass(). Funkcja ta usuwaognisko wprowadzania z wybranego elementu (odno�nika lub pola formularza).W naszym przypadku jej wywo�anie sprawi, e przegl�darka nie b�dzie wy�wie-tla� wokó� tekstu klikni�tego odno�nika cienkiej, przerywanej linii. Gdyby�myjej nie wywo�ali, zak�adka nie wygl�da�aby równie dobrze.

I to ju prawie wszystko... jeszcze tylko musisz wy�wietli� kart�.

6. Dodaj kod umieszczony w wierszach 6. i 7.:1 $('.tabs a').click(function() {2 $this = $(this);3 $('.panel').hide();4 $('.tabs a.active').removeClass('active');5 $this.addClass('active').blur();6 var panel = $this.attr('href');7 $(panel).fadeIn(250);8 }); // koniec funkcji click

Kada zak�adka jest w rzeczywisto�ci odno�nikiem wskazuj�cym powi�zan� z ni�kart�. Pami�tasz zapewne, e kod HTML karty wygl�da w nast�puj�cy sposób:<div id="panel1" class="panel">; natomiast kod HTML odpowiadaj�cejmu zak�adki to: <a href="#panel1">. Zwró� uwag�, e zawarto�� atrybutuhref odno�nika wygl�da dok�adnie tak samo jak selektor identyfikatora CSS.Poniewa jQuery korzysta z selektorów CSS do pobierania elementów stron,zatem wystarczy pobra� warto�� atrybutu href i uy� jej do pobrania karty, któr�chcemy wy�wietli�. W wierszu 6. tworzymy now� zmienn� — panel — w którejzapisujemy warto�� atrybutu href odno�nika (uywana przy tym funkcja attr()jQuery zosta�a opisana na stronie 159).

W wierszu 7. korzystamy z odczytanej wcze�niej warto�ci do pobrania kartyi stopniowego jej wy�wietlenia (uywamy przy tym funkcji fadeIn() opisanejna stronie 200). Mogliby�my j� zast�pi� jak�kolwiek inn� funkcj� jQuery gene-ruj�c� efekty wizualne, tak� jak show(), slideDown() b�d� animate().

Teraz, gdy ju prawie ca�y kod jest gotowy, musimy programowo wygenerowa�zdarzenie click podczas wczytywania strony, spowoduje to wywo�anie funkcji,ukrycie kart, wyrónienie pierwszej zak�adki i wy�wietlenie skojarzonej z ni�karty. Na szcz��cie, jQuery pozwala w bardzo prosty sposób symulowa� zg�o-szenie zdarzenia.



323

7. Poni�ej funkcji click() dodaj jeszcze jeden wiersz, powoduj�cy zg�osze-nie zdarzenia click dla pierwszej zak�adki.

1 $('.tabs a').click(function() {2 $this = $(this);3 $('.panel').hide();4 $('.tabs a.active').removeClass('active');5 $this.addClass('active').blur();6 var panel = $this.attr('href');7 $(panel).fadeIn(250);8 }); // koniec funkcji click9 $('.tabs li:first a').click();

Jak wida�, w wyrónionym wierszu zastosowali�my z�oony selektor — .tabsli:first a — który s�uy do pobrania pierwszej zak�adki. Selektor ten (podob-nie jak wszystkie inne selektory elementów potomnych) naley analizowa� odstrony prawej do lewej. Litera a umieszczona z prawej strony selektora oznacza,e chodzi o pobranie znacznika <a>. Umieszczony w �rodkowej cz��ci �a�cuchli:first korzysta z pseudoelementu first pobieraj�cego pierwszy elementpotomny. W naszym przypadku ca�y ten fragment selektora pozwala pobra�znacznik <li> b�d�cy pierwszym dzieckiem innego elementu. Poniewa za-k�adki zosta�y utworzone przy uyciu listy, zatem li:first odpowiada pierw-szemu elementowi tej listy (czyli pierwszej zak�adce). I w ko�cu fragment .tabspozwoli mie� pewno��, e pobierzemy odno�nik umieszczony na li�cie b�d�cejcz��ci� naszego panelu kart. Zabezpiecza on przed przypadkowym pobraniemodno�nika zapisanego na innej li�cie wypunktowanej (na przyk�ad pe�ni�cej rol�paska nawigacyjnego), umieszczonej w innym miejscu strony.

Po pobraniu interesuj�cego nas elementu wywo�ujemy funkcj� click(); jednakw tym przypadku nie s�uy ona do okre�lenia funkcji anonimowej obs�uguj�cejzdarzenia click, lecz do jego zg�oszenia. Innymi s�owy, wywo�anie umieszczonew wierszu 9. oznacza: „hej, przegl�darko — kliknij pierwsz� zak�adk�”. Zg�osze-nie tego zdarzenia powoduje ca�� sekwencj� czynno�ci: ukrycie kart, wyrónie-nie zak�adki i stopniowe wy�wietlenie odpowiedniej karty. O rany! To ju prawiewszystko. Gdyby� jednak stron� w tej postaci wy�wietli� w przegl�darce, zauwa-y�by� pewnie jeden, niewielki problem. Poniewa zak�adki s� odno�nikami, gdyzatem okno przegl�darki b�dzie niewielkie, mona zaobserwowa�, e po klik-ni�ciu zak�adki przegl�darka nie tylko wy�wietli odpowiedni� kart�, lecz takedo niej przeskoczy. Musisz zatem poinstruowa� przegl�dark�, by nie przechodzi�ado miejsca docelowego odno�nika.

8. Na kocu anonimowej funkcji obs�uguj�cej zdarzenia click (patrz wiersz 9.)dodaj instrukcj� return false;. A tak powinna wygl�da� ostateczna wersjakodu:

1 $(document.ready(function() {2 $($('.tabs a').click(function() {3 $this = $(this);4 $('.panel').hide();5 $('.tabs a.active').removeClass('active');6 $this.addClass('active').blur();7 var panel = $this.attr('href');8 $(panel).fadeIn(250);9 return false;10 }); // koniec funkcji click11 $('.tabs li:first a').click();12 }); // koniec funkcji ready



324

9. Zapisz plik i wy�wietl stron� w przegl�darce.

Doko�czona przyk�adowa strona powinna wygl�da� tak, jak przedstawiona narysunku 10.3. Mona j� poszerzy� o wi�cej zak�adek i kart, dodaj�c do listy ko-lejne punkty z odno�nikami wskazuj�cymi kolejne znaczniki <div> reprezen-tuj�ce nowe karty.

Rysunek 10.3. Panele zak�adek stanowi� elegancki sposób zapewnienia u�ytkownikom �atwego dost�pu dowielu informacji przy jednoczesnym oszcz�dzaniu miejsca na stronie

Uwaga: Pe�n� wersj� tego przyk�adu — complete_tabs.html — mo�na znale�� w katalogu R10. Dodat-kowo umie�cili�my tam tak�e bardziej z�o�on� wersj� tego samego przyk�adu, pozwalaj�c� naumieszczanie na jednej stronie kilku paneli kart. Znajdziesz j� w pliku complete_complex_tabs.html.Zosta�y w niej zastosowane zaawansowane funkcje jQuery s�u��ce do poruszania si� po drzewieDOM strony, opisane w dalszej cz��ci ksi��ki, na stronie 432.


Dodawanie sliderów

325

W I E D Z A W P I G U � C E

Projekt jQuery UIBardziej zaawansowan� wersj� panelu kart mo�na zna-le�� w projekcie jQuery UI. Jest to oficjalny projekt ze-spo�u jQuery, którego celem jest pisanie wtyczek roz-wi�zuj�cych popularne zadania zwi�zane z tworzenieminterfejsu u�ytkownika; s� to „akordeony” (ang. accor-dion), karty, okna dialogowe, kalendarze oraz elemen-ty stron, które mo�na przeci�ga�. Uczestnicy projektud�� do opracowania jednej wtyczki, która zapewni�a-by mo�liwo�� rozwi�zania wi�kszo�ci problemów napoty-kanych podczas tworzenia interfejsu u�ytkownika apli-kacji internetowych. Projekt ten ma swoj� w�asn� witryn�WWW (http://jqueryui.com/), na której mo�na znale��najnowsz� wersj� kodu, przyk�ady oraz odno�nik do do-kumentacji umieszczonej na g�ównej witrynie jQuery.

Projekt jQuery UI udost�pnia wiele narz�dzi dla projek-tantów stron, a nawet obs�uguje tematy CSS — pozwa-laj�ce na zapewnienie wspólnego, spójnego wygl�duwszystkich elementów jQuery UI. Projekt ten jest sto-sunkowo z�o�ony i w jego sk�ad wchodzi wiele ró�nychelementów. Pliki projektu mo�na tak�e modyfikowa�i dostosowywa� do w�asnych potrzeb — usuwa� z nich

komponenty, których nie b�dziemy potrzebowa�, ogra-niczaj�c tym samym wielko�� pliku i skracaj�c czas je-go pobierania. Mo�na nawet tworzy� w�asne tematyCSS dopasowuj�ce wygl�d komponentów jQuery UI dowygl�du naszej witryny. Ca�y ten proces u�atwia specjal-ne narz�dzie s�u��ce do przygotowywania pliku jQuery UI,dost�pne na stronie http://jqueryui.com/donwload.

W poprzednim wydaniu tej ksi��ki wtyczka jQuery UI by�au�ywana w kilku rozdzia�ach, jednak w mi�dzyczasie ze-spó� jej twórców zdecydowa� si� na ca�kowite przepisa-nie jej kodu i dodanie wielu nowych, fascynuj�cych kom-ponentów oraz mo�liwo�ci. Niestety, w czasie pisania tejksi��ki najnowsza wersja wtyczki jQuery UI (numer 1.9)nie by�a jeszcze dost�pna, dlatego te� nie warto traci�czasu na poznawanie grupy komponentów, które i takniebawem zostan� zast�pione. Dlatego w tym wydaniuksi��ki jQuery UI i jej komponenty nie zosta�y opisane.

Jednak jQuery UI zapowiada si� doskonale i zdecydowa-nie warto si� ni� interesowa�. Zajrzyj zatem na witryn�jQuery UI, by przekona� si�, czy wersja 1.9 zosta�a ju�opublikowana; je�li tak, sprawd� j� koniecznie.

Dodawanie sliderówKolejnym narz�dziem uywanym przez projektantów stron do walki ze zbyt wielk�liczb� prezentowanych informacji s� slidery (ang. content slider) — proste kompo-nenty interfejsu uytkownika, prezentuj�ce jedno wybrane zdj�cie lub fragment tre�ci,wybrane z wi�kszej grupy. Wiele witryn zawieraj�cych bardzo due ilo�ci informacji,takich jak witryna firmy Microsoft, korzysta ze sliderów w celu prezentowania zdj��,tekstów oraz odno�ników w niewielkich fragmentach, które s� przesuwane po ekra-nie i zast�powane innymi (patrz rysunek 10.4). Slider przypomina nieco panel kart,ale w jego przypadku poszczególne karty maj� zazwyczaj t� sam� wielko��, s� wy-�wietlane i chowane z wykorzystaniem animacji, które je przesuwaj� na ekranie, a ichpojawianie si� i znikanie jest zazwyczaj obs�ugiwane przy uyciu liczników czasu.S� one powszechnie stosowane na stronach g�ównych, gdy maj� bardzo atrakcyjn�posta�, a jednocze�nie pozwalaj� na zachowanie prostoty strony. Cz�sto uywa si�ich take jako zwiastunów reklamuj�cych tre�ci lub produkty opisane na innychstronach witryny. Klikni�cie karty takiego slidera zazwyczaj powoduje przej�cie nainn� stron�.


Dodawanie sliderów

326

Rysunek 10.4. Aby zminimalizowa� nat�ok informacji na ekranie, witryny, takie jak Microsoft.com, korzystaj�ze sliderów (na rysunku jeden zosta� zaznaczony czarn� ramk�), wewn�trz których prezentowane s� obrazkilub fragmenty tre�ci, po jednym w danej chwili. W przedstawionym przyk�adzie zaznaczony obrazek mo�e zo-sta� wysuni�ty na bok, ods�oni si� wtedy inny obrazek z kolejnymi informacjami

Utworzenie slidera wymaga opanowania kilku moliwo�ci j�zyka JavaScript i biblio-teki jQuery, a konkretnie tworzenia animacji, korzystania z liczników czasu orazmanipulacji kodem HTML i CSS. Cho� — oczywi�cie — mona utworzy� swójw�asny slider, jednak istnieje sporo wtyczek jQuery udost�pniaj�cych wiele przydat-nych moliwo�ci. Jedn� z najbardziej wszechstronnych wtyczek tego typu jest Any-thingSlider (kod mona pobra� ze strony https://github.com/ProLoser/AnythingSlider/).

Stosowanie slidera AnythingSliderDo dzia�ania wtyczki AnythingSlider potrzebujemy kilku plików; s� to jQuery(co chyba oczywiste), zewn�trzny plik JavaScript z kodem obs�uguj�cym slider,plik CSS ze stylami okre�laj�cymi podstawowy wygl�d slidera i stosowanych w nimefektów oraz obrazek z kontrolkami slidera (przyciskami nast�pny i poprzedni).Pliki te mona pobra� ze strony https://github.com/ProLoser/AnythingSlider/. (Doda-li�my je take do przyk�adów do��czonych do tej ksi�ki i umie�cili�my w kataloguz przyk�adami do tego rozdzia�u). Aby skorzysta� z tej wtyczki, naley wykona� na-st�puj�ce, bardzo proste czynno�ci.

1. Do��czy� do strony plik CSS anythingslider.css.

Ten zewn�trzny arkusz stylów CSS okre�la sposób formatowania przyciskównawigacyjnych slidera, jak równie ukryte style s�u�ce do w�a�ciwego rozmiesz-czania poszczególnych kart. Istnieje moliwo�� okre�lania postaci podstawo-wych elementów slidera poprzez modyfikowanie regu� CSS umieszczonychw tym pliku.


Dodawanie sliderów

327

2. Do��czy� do strony plik biblioteki jQuery.Biblioteka jQuery udost�pnia wszystkie podstawowe narz�dzia niezb�dne doutworzenia i obs�ugi slidera AnythingSlider. Podobnie jak podczas korzystaniaze wszystkich innych wtyczek jQuery, take i teraz na pocz�tek naley wczyta�sam plik biblioteki. Je�li wtyczka zostanie wczytana przed bibliotek� jQuery,slider nie b�dzie dzia�a�.

3. Do��czy� plik JavaScript z kodem wtyczki AnythingSlider.Ten plik zawiera ca�y kod odpowiadaj�cy za przekszta�cenie kodu HTML w in-teraktywny slider.

4. Doda� kod HTML.AnythingSlider nie wymaga adnego skomplikowanego kodu HTML. Naleytylko okre�li� pojemnik — znacznik <div> z identyfikatorem slidera: <div id=�"slider"> — a wewn�trz niego umie�ci� po jednym znaczniku <div> dla ka-dej z kart. Jak wida�, rozwi�zanie to w znacznym stopniu przypomina panelkart (opisany na stronie 315).

5. Doda� znacznik <script>, a wewn�trz niego umie�ci� wywo�anie funkcji$(document).ready(), w której z kolei wywo�ana zostanie funkcja slidera.Jedn� z ogromnych zalet korzystania z wtyczek jQuery jest to, e zazwyczaj kod,jaki w tym celu musimy napisa�, jest bardzo krótki i prosty. W naszym przy-padku wszystkim, czego potrzebujemy do utworzenia slidera, jest dopisanie po-niej odwo�ania dodanego w kroku 3. poniszego fragmentu kodu:

<script>$(document).ready(function) { $('#slider").anythingSlider();}); // koniec funkcji ready</script>

Istnieje wiele rónych sposobów okre�lania postaci slidera AnythingSlider, o czymprzekonasz si� dalej w tym rozdziale. Jednak najpierw sprawd�, jak taki slider dzia�a.

Przyk�ad — AnythingSliderUtworzenie prostego slidera jest bardzo proste. Przekonasz si� o tym, wykonuj�cprzedstawiony tu przyk�ad. Moesz w tym celu wykorzysta� dowolny edytor HTML.

Uwaga: Informacje dotycz�ce pobierania przyk�adów do��czonych do tej ksi��ki mo�na znale�� nastronie 43.

1. W edytorze tekstów otwórz plik slider.html umieszczony w katalogu R10.

Pierwszym krokiem b�dzie dodanie do strony pliku CSS wtyczki.

2. Kliknij pusty wiersz umieszczony poni�ej wiersza <link href="../_css/�site.css" rel="stylesheet"> i wpisz w nim:

<link rel="stylesheet" href="anythingSlider/anythingslider.css">

Ten wiersz kodu wczytuje arkusz stylów anythingslider.css, zawieraj�cy styleokre�laj�ce posta� slidera. Zawarto�ci tego pliku przyjrzymy si� dok�adniej niecopó�niej, kiedy b�dziemy zajmowali si� aktualizacj� wygl�du naszego komponen-tu. Kolejnym krokiem b�dzie dodanie do strony niezb�dnych plików JavaScript.


Dodawanie sliderów

328

3. W kolejnych dwóch wierszach wpisz poni�szy kod:<script src="../_js/jquery-1.6.3.min.js"></script><script src="anythingSlider/jquery.anythingslider.min.js"></script>

Pierwszy z powyszych znaczników <script> powoduje wczytanie pliku biblio-teki jQuery, natomiast drugi wczytuje plik wtyczki AnythingSlider. Kolejnymkrokiem b�dzie dodanie do strony kodu HTML.

Wskazówka: W tym przyk�adzie zak�adamy, �e pliki JavaScript oraz CSS wtyczki s� umieszczonew odr�bnym katalogu anythingSlider, umieszczonym wewn�trz katalogu z przyk�adami do rozdzia�u— R10. Umieszczenie wszystkich plików wymaganych do prawid�owego dzia�ania wtyczki w osob-nym katalogu jest doskona�ym sposobem zagwarantowania, �e wszystkie b�d� si� znajdowa�y tam,gdzie powinny; takie rozwi�zanie u�atwia tak�e wykorzystanie wtyczki na innych witrynach. Je�lipodobaj� Ci si� efekty dzia�ania wtyczki AnythingSlider, wystarczy, �e skopiujesz katalog anythingSliderna swoj� witryn� (umie�� go w katalogu g�ównym b�d� wewn�trz katalogu, gdzie przechowywane s�pliki JavaScript).

4. W kodzie strony odszukaj znacznik nag�ówka poziomu pierwszego —<h1>Anything Slider</h1> — i w wierszu poni�ej niego wpisz:

<div id="slider">

</div>

Jak wida�, uyli�my tu znacznika <div> (czyli znacznika HTML s�u�cego dodefiniowania regionów stron WWW). Ten konkretny znacznik b�dzie reprezen-towa� sam komponent slidera. Wewn�trz niego umie�cisz kolejne znaczniki<div> — po jednym dla kadej z kart slidera.

5. Wewn�trz elementu <div> slidera (czyli pomi�dzy otwieraj�cym znacz-nikiem <div> i zamykaj�cym znacznikiem </div>) wpisz:

<div><a href="page1.html"><img src="images/pumpkin.jpg" width="700"height="390"alt="Dynia"></a></div>

Ten drugi znacznik <div> zawiera odno�nik i obrazek. Klikni�cie obrazka spo-woduje przej�cie na inn� stron�: takie rozwi�zanie jest powszechnie stosowanew sliderach, które bardzo cz�sto spe�niaj� rol� animowanych reklam na stronie.Kada karta slidera jest swoistym zwiastunem reklamuj�cym inne tre�ci, a za-tem uytkownicy mog� j� klikn��, by przej�� do artyku�u lub innego fragmentuwitryny.

Gdy wykorzystamy slider AnythingSlider, w kartach b�dziemy mogli umiesz-cza� dowolny kod HTML — nasze moliwo�ci nie s� ograniczone do jednegoduego zdj�cia. Mona w nich umieszcza� tekst, obrazki oraz inne znaczniki<div> — niemal wszystko, co tylko zechcemy.

6. Wewn�trz elementu <div> slidera dodaj kolejne dwa znaczniki <div>:<div><a href="page2.html"><img src="images/grapes.jpg" width="700"height="390"alt="Winogrona"></a></div><div>


Dodawanie sliderów

329

<a href="page3.html"><img src="images/various.jpg" width="700"�height="390"alt="Rozmaito�ci"></a></div>

Te dwa zagniedone znaczniki <div> reprezentuj� kolejne karty. Moesz ichdoda� tyle, ile zechcesz. Teraz nadszed� czas, by zabra� si� za pisanie koduJavaScript.

7. W górnej cz��ci pliku, poni�ej drugiego znacznika <script>, lecz przed za-mykaj�cym znacznikiem </head>, dodaj pusty wiersz i wpisz w nim:

<script>$(document).ready(function() { $('#slider').anythingSlider();});</script>

Moesz w to uwierzy� lub nie, jednak wszystko, co musisz zrobi�, to pobranieznacznika <div> slidera — $('#slider') — i wywo�anie funkcji anything�Slider(). Ca�� reszt� zajmie si� ju sama wtyczka.

8. Zapisz plik i wy�wietl stron� w przegl�darce.

Strona powinna wygl�da� tak, jak przedstawiona na rysunku 10.5. (Je�li jednaktak nie wygl�da, powiniene� ponownie sprawdzi� jej kod. Moesz go porówna�z plikiem complete_slider.html, zawieraj�cym ko�cow�, pe�n� wersj� kodu przy-k�adu). Wypróbuj dzia�anie elementów steruj�cych: strza�ka w prawo powodujewy�wietlenie nast�pnej karty, a strza�ka w lewo — karty poprzedniej, przyciskiz cyframi pozwalaj� przej�� do konkretniej karty, a przycisk Start uruchamiaautomatyczny pokaz slajdów.

Modyfikowanie wygl�du slideraJak wida�, stosowanie wtyczki AnythingSlider jest bardzo proste. Oczywi�cie, do-my�lny wygl�d slidera nie musi wcale pasowa� do projektu naszej witryny i moesi� zdarzy�, e nie b�dziemy chcieli b�d� potrzebowali wszystkich jego moliwo�ci(takich jak automatyczny pokaz slajdów lub przyciski pozwalaj�ce przechodzi� donast�pnej lub poprzedniej karty). Wygl�d slidera AnythingSlider mona zmienia�na kilka sposobów: modyfikuj�c pliki graficzne, wprowadzaj�c zmiany w arkuszachstylów oraz ustalaj�c opcje wtyczki (ten sposób zosta� opisany w nast�pnym punk-cie rozdzia�u).

Dzi�ki zastosowaniu techniki „sprajtów CSS” jeden plik graficzny spe�nia wiele za-da� — okre�la normalny i „wyróniony” stan strza�ek do przodu i do ty�u, zawierat�o przycisków z numerami kart oraz ustala posta� przycisku Start (wi�cej informacjina temat tej techniki mona znale�� na stronie http://css-tricks.com/css-sprites/).Moesz otworzy� ten plik w dowolnym programie graficznym i zmodyfikowa�wygl�d przycisków strza�ek, kady z nich ma wymiary 45×140 pikseli.

Mona take modyfikowa� arkusz stylów i w ten sposób wyp�ywa� na posta� po-kazu slajdów. Poniej zamieszczono list� najcz��ciej stosowanych zmian, z których,by� moe, b�dziesz chcia� skorzysta�.


Dodawanie sliderów

330

Rysunek 10.5. Przy u�yciu wtyczki AnythingSlider mo�na szybko utworzy� interaktywny pokaz slajdów, by zwróci�uwag� u�ytkownika na wybrane strony witryny lub prezentowane na niej produkty

� Wysoko�� oraz szeroko�� slidera. Pierwsza regu�a stylu zapisana w plikuanythingslider.css — #slider — okre�la ogóln� szeroko�� i wysoko�� kom-ponentu. Szeroko�� (width) mona zmienia�, by tworzy� szersze b�d� w�szeprezentacje; a wysoko�� (height) regulowa�, je�li prezentowana zawarto��ma inn� wysoko�� ni domy�lne 390 pikseli.

� Kolor przycisków nawigacyjnych. Przyciski z cyframi wy�wietlane u do�u slide-ra s� zazwyczaj zielone. Je�li jednak nie podoba Ci si� ten kolor, moesz zmo-dyfikowa� regu�� stylu z bardzo z�oonym selektorem div .anythingSlider.�activeSlider .anythingControls ul a.cur, div.anythingSlider.active�Slider .anythingControls ul a. Zmie� podany w niej kolor o warto�ci#7C9127 na dowolny inny, lepiej odpowiadaj�cy projektowi Twojej witryny. Je�lichcia�by� take okre�li� kolor czcionki, dodaj do regu�y w�a�ciwo�� color, naprzyk�ad:

color: #F44439;

� Kolor przycisków wskazanych mysz�. Moesz take zmieni� kolor t�a przy-cisków nawigacyjnych, uywan� w nich czcionk� oraz dowolne inne aspektyich wygl�du; wystarczy w tym celu zmodyfikowa� regu�� stylu z selektorem div.anythingSlider .anythingControls ul a:hover. W domy�lnej postaciusuwa ona z przycisku obraz t�a (cie�).


Dodawanie sliderów

331

� Aktualnie wybrany przycisk nawigacyjny. Aby okre�li� styl wyróniaj�cyprzycisk skojarzony z aktualnie wybran� kart�, naley doda� do arkusza regu��z selektorem div.anythingSlider .activeSlider .anythingControls ula.cur i okre�li� w nim kolor t�a, czcionk� i tak dalej. Wane jest, by regu�a taby�a umieszczona w arkuszu stylów poniej regu�y opisanej w punkcie „Kolorprzycisków nawigacyjnych”; alternatywnie moesz take zmodyfikowa� opisan�tam regu�� stylu, usuwaj�c z niej selektor div.anythingSlider .activeSlider.anythingControls ul a.cur. Poniewa w stylu podanym wcze�niej jest juokre�lony kolor t�a, zatem przes�oni on kolor podany w tej regule, chyba e zo-stanie ona umieszczona bliej ko�ca arkusza stylów.

� Kolory przycisków rozpoczynaj�cych i zatrzymuj�cych prezentacj�. Posta�przycisków s�u�cych do rozpoczynania i zatrzymywania automatycznej pre-zentacji kart jest kontrolowana przy uyciu dwóch stylów. Aby zmieni� zielonet�o oraz czcionk� przycisku rozpoczynaj�cego prezentacj�, naley zmodyfikowa�regu�� stylu z selektorem div.anythingSlider .start-stop. Z kolei modyfi-kuj�c regu�� z selektorem div .anythingSlider .start-stop.playing, monazmieni� czerwony kolor przycisku przerywaj�cego automatyczn� prezentacj�.

� Usuni�cie cieni oraz inne zmiany wygl�du przycisków nawigacyjnych. Je�linie podobaj� Ci si� cienie widoczne przy przyciskach nawigacyjnych oraz ob-s�uguj�cych automatyczn� prezentacj�, powiniene� zmodyfikowa� regu�y sty-lów z selektorami div.anythingSlider .anythingControls ul a oraz div.anythingSlider .start-stop. Konkretnie rzecz bior�c, musisz usun�� z nichw�a�ciwo�� border-image. Moesz take zmodyfikowa� w�a�ciwo�ci border-�radius, -moz-border-radius oraz –webkit-border-radius, by ca�kowicieusun�� lub zmieni� promie� okr�g�ych wierzcho�ków tych przycisków. Ogólniemówi�c, style te okre�laj� podstawowe aspekty wygl�du przycisków slidera, za-tem warto z nimi poeksperymentowa�, by przekona� si�, jakie efekty mona zaich pomoc� uzyska�.

� Zielone obramowania powy�ej i poni�ej prezentacji. Powyej oraz poniejslidera wy�wietlane jest zielone obramowanie o szeroko�ci trzech pikseli.Aby je zmieni�, naley zmodyfikowa� styl z selektorem div.anythingSlider.anythingWindow. Je�li chcesz ca�kowicie usun�� obramowanie, usu� w�a-�ciwo�ci border-top oraz border-bottom; ewentualnie zmodyfikuj podanew nich warto�ci, by zmieni� kolor b�d� szeroko�� obramowania.

� Po�o�enie przycisków strza�ek. Po�oenie przycisków pozwalaj�cych na przej-�cie do poprzedniej i nast�pnej karty mona kontrolowa�, modyfikuj�c odpo-wiednio regu�� stylu z selektorem div.anythingSlider .back (strza�ka w lewo)oraz div.anythingSlider .right (strza�ka w prawo). Oprócz tego, regu�a z se-lektorem div.anythingSlider .arrow okre�la pewne wspólne aspekty wygl�duobu tych przycisków, w tym ich po�oenie po�rodku obszaru slidera. Gdyby� naprzyk�ad chcia� wy�wietli� te przyciski bliej górnej kraw�dzi slidera, wystarczy,e zmodyfikujesz styl div.anythingSlider .arrow, zmieniaj�c w�a�ciwo��top: 50% na top: 20% b�d� nawet na warto�� bezwzgl�dn� wyraon� w pikselach— top: 45px.


Dodawanie sliderów

332

Modyfikacja dzia�ania slideraJu sama modyfikacja arkusza stylów CSS pozwala na wprowadzenie wielu zmianw wygl�dzie slidera. By jednak wprowadzi� fundamentalne zmiany w sposobiedzia�ania tej wtyczki, konieczne jest okre�lenie warto�ci kilku jej w�a�ciwo�ci. W tymcelu trzeba przekaza� do niej odpowiedni litera� obiektowy (patrz strona 158):

{ buildArrows : false, startText : "Uruchom prezentacj�", stopText : "Zatrzymaj prezentacj�"}

W tym przyk�adzie buildArrows jest w�a�ciwo�ci� wtyczki, natomiast false —przypisywan� jej warto�ci�. Zastosowanie tej konkretnej warto�ci sprawi, ewtyczka nie wy�wietli w sliderze strza�ek do przechodzenia pomi�dzy kolejnymikartami. Za kad� par� nazwa-warto��, z wyj�tkiem ostatniej, naley umie�ci� prze-cinek (zwró� uwag�, e nie ma go za par� stopText : "Zatrzymaj prezentacj�").

Ten litera� obiektowy naley nast�pnie przekaza� w wywo�aniu funkcji anything�Slider(). Oto przyk�ad:

$('#slider').anythingSl[PR12]ider({ buildArrows : false, startText : "Uruchom prezentacj�", stopText : "Zatrzymaj prezentacj�"});

Poniej przedstawiono kilka najbardziej przydatnych opcji.

� Ukrycie przycisków nawigacyjnych. Aby ukry� przyciski ze strza�kami,naley przypisa� warto�� false w�a�ciwo�ci buildArrows:

buildArrows : false

� Zmiana etykiet przycisków. Aby zmieni� teksty wy�wietlane po wskazaniu przy-cisków rozpoczynaj�cego i przerywaj�cego automatyczn� prezentacj�, naleyje poda� we w�a�ciwo�ciach startText oraz stopText:

startText : "Uruchom prezentacj�", stopText : "Zatrzymaj prezentacj�"

� Wy��czenie automatycznego odtwarzania. By� moe nie b�dziesz chcia� wy-�wietla� przycisków do rozpoczynania i przerywania automatycznej prezentacji,bo preferujesz zapewnienie uytkownikowi moliwo�ci samodzielnego wyborukarty, która ma by� widoczna. W takim przypadku powiniene� przypisa� war-to�� false w�a�ciwo�ci buildStartStop:

buildStartStop : false

� Animacja w pionie. Aby karty w sliderze by�y przesuwane w kierunku piono-wym, a nie w poziomie, przypisz warto�� true w�a�ciwo�ci vertical:

vertical : true

� Automatyczne odtwarzanie. Je�li chcesz, by w momencie wy�wietlenia stronyrozpoczyna�a si� automatyczna prezentacja kart slidera, przypisz warto�� truew�a�ciwo�ci autoPlay:

autoPlay : true


Okre�lanie wielko�cii po�o�enia elementów

333

Automatyczne rozpoczynanie prezentacji jest bardzo popularnym rozwi�za-niem, cz�sto wykorzystywanym na witrynach ze sliderami — pozwala wy�wie-tli� wi�cej tre�ci bez konieczno�ci zmuszania uytkownika do klikania przy-cisku „rozpocznij pokaz”.

� Karty o ró�nej wielko�ci. Je�li zawarto�ci poszczególnych kart s� rónej wiel-ko�ci, moesz za�da�, by okno slidera zmienia�o wielko�� i dostosowywa�o si�do wymiarów zawarto�ci aktualnie prezentowanej karty. Za�ómy na przyk�ad,e pierwsza karta zawiera znacznik <div>, wewn�trz którego zosta� umieszczonypojedynczy akapit tekstu; natomiast na drugiej karcie mamy znacznik <div>zawieraj�cy nag�ówek, dwa due zdj�cia oraz trzy akapity tekstu. Je�li w takimprzypadku w�a�ciwo�ci resizeContents przypiszesz warto�� true, slider b�dzieautomatycznie zmienia� swoj� wielko��, dostosowuj�c si� do wielko�ci zawarto-�ci prezentowanej karty. W naszym przypadku w sliderze prezentowana jest po-cz�tkowo karta z jednym akapitem, a zatem jego wysoko�� b�dzie niewielka.Jednak po klikni�ciu przycisku i przej�ciu do nast�pnej karty — o znacznie wi�k-szej zawarto�ci — wysoko�� slidera zostanie powi�kszona. Aby zapewni� takiedzia�anie komponentu, umie�� w literale obiektowym nast�puj�c� w�a�ciwo��:

resizeContents : true

Aby przekona� si�, jakie efekty daje zastosowanie niektórych spo�ród tych w�a-�ciwo�ci, wy�wietl w przegl�darce przyk�adow� stron� complete_slider2.html.

Jak mog�e� si� przekona�, zarówno umieszczanie komponentu AnythingSlider nastronie, jak i dostosowywanie jego wygl�du i dzia�ania do w�asnych potrzeb jest ca�-kiem proste. Przedstawili�my tu jednie drobny u�amek wszystkich moliwo�ci tejwtyczki. Pozwala ona take na prezentowanie klipów wideo, dodawanie efektówspecjalnych oraz stosowanie w�asnego kodu JavaScript, który zapewni, e prezen-towany slider b�dzie dzia�a� dok�adnie tak, jak chcemy. Wi�cej informacji na ten tematmona znale�� w Wiki wtyczki AnythingSlider, dost�pnej na stronie https://github.com/ProLoser/AnythingSlider/wiki.

Okre�lanie wielko�ci i po�o�enia elementów stronyOkre�lanie wielko�cii po�o�enia elementów

Podczas dynamicznego modyfikowania zawarto�ci stron lub dodawania do nich no-wych tre�ci z wykorzystaniem j�zyka JavaScript i biblioteki jQuery cz�sto bardzoprzydatna moe si� okaza� znajomo�� rozmiaru oraz po�oenia elementów strony.Przyk�adowo moe si� zdarzy�, e b�dziesz chcia� wy�wietli� nad zawarto�ci� stronydodatkow� warstw�, tak zwan� nak�adk� (ang. overlay; tworzy ona efekt, w którymzawarto�� strony zostaje „wyszarzona”, podobny do tego, jaki daje wtyczka FancyBoxopisana na stronie 244). W tym celu konieczne jest dodanie do strony bezwzgl�dnieumieszczonego znacznika <div>, który przykryje ca�� zawarto�� okna przegl�darki.Aby to zrobi�, trzeba mie� pewno��, e znacznik ten b�dzie mia� dok�adnie takie samewymiary jak okno programu, a to oznacza, e trzeba b�dzie w jaki� sposób je okre�li�.

Gdyby�my chcieli utworzy� etykietki ekranowe — niewielkie okienka wy�wietlane,gdy uytkownik umie�ci wska�nik myszy w obszarze jakiego� elementu — koniecz-ne b�dzie okre�lenie wspó�rz�dnych wska�nika myszy, co pozwoli umie�ci� etykietk�w odpowiednim miejscu.



334

Okre�lanie wysoko�ci i szeroko�ci elementówBiblioteka jQuery udost�pnia funkcje .height() oraz .width(), które zwracaj� od-powiednio wysoko�� i szeroko�� wybranego elementu strony. Podaj�c odpowiedniselektor, mona okre�li� wymiary dowolnego znacznika wchodz�cego w sk�ad strony,a nawet ca�ego okna przegl�darki lub ca�ej zawarto�ci dokumentu.

� Wysoko�� i szeroko�� okna przegl�darki. Je�li chcesz pozna� wysoko�� i sze-roko�� okna przegl�darki, musisz uy� selektora $(window), a nast�pnie wy-wo�a� funkcj� height() lub width():

var winH = $(window).height();var winW = $(window).width();

Powyszy fragment kodu pobiera wysoko�� oraz szeroko�� okna przegl�darkii zapisuje je w dwóch zmiennych. Pobieranie wymiarów okna przegl�darki jestprzydatne, kiedy chcemy mie� pewno��, e jaki� element nie zostanie umiesz-czony poza widocznym obszarem strony.

� Wysoko�� i szeroko�� dokumentu. Dokument to nie to samo, co okno prze-gl�darki, i w wi�kszo�ci przypadków ma zupe�nie inne wymiary. Dokument re-prezentuje nasz� stron� WWW; je�li umie�cimy na niej tylko niewielki fragmenttekstu — na przyk�ad jeden akapit — dokument b�dzie mia� wysoko�� tego aka-pitu (powi�kszon� dodatkowo o marginesy górny i dolny). Na duym monitorzewysoko�� takiego dokumentu b�dzie mniejsza od wysoko�ci okna przegl�darki.W odwrotnej sytuacji — gdy zawarto�� strony jest bardzo obszerna i uytkow-nik musi j� przewija�, by dotrze� do jej ko�ca — wysoko�� dokumentu b�dziewi�ksza od wysoko�ci okna. Podobnie, gdyby� zmodyfikowa� styl okre�laj�cy po-sta� znacznika <div>, wewn�trz którego umieszczona jest ca�a zawarto�� strony,i nada� mu szeroko�� 1500 pikseli, okaza�oby si�, e szeroko�� dokumentu jestwi�ksza od szeroko�ci okna przegl�darki. Aby okre�li� wysoko�� i szeroko�� do-kumentu, wywo�ania metod height() i width() naley poprzedzi� selektorem$(document):

var docH = $(document).height();var docW = $(document).width();

Funkcji heigth() oraz width() mona take uywa� do okre�lania wymiarówzwyczajnych elementów HTML, takich jak akapity, sekcje (znaczniki <div>) czyte obrazki, jednak w takich przypadkach nie zawsze b�d� one zwraca� te infor-macje, których poszukujemy. Funkcje te zwracaj� warto�ci w�a�ciwo�ci heightoraz width CSS, a te nie zawsze s� takie same jak faktyczne wymiary elementówstrony. W�a�ciwo�ci te okre�laj� wymiary przydzielane zawarto�ci znacznika, czylina przyk�ad tekstowi umieszczonemu wewn�trz akapitu. Kiedy jednak dodamydo elementu marginesy, wype�nienie oraz obramowanie, ca�kowity obszar, jakizajmuje na stronie, b�dzie wi�kszy od tego, co wskazuj� w�a�ciwo�ci height i width.

Aby zrozumie�, jak to dzia�a, przeanalizujmy poniszy, przyk�adowy kod CSSokre�laj�cy posta� znacznika <div>:

div { width : 300px; height : 300px; padding : 20px; border : 10px solid black;}



335

Schemat tego elementu zosta� przedstawiony na rysunku 10.6. Rzeczywista wyso-ko�� i szeroko�� tego elementu na stronie b�dzie wynosi� 360 pikseli, gdy stanowisum� wysoko�ci (lub szeroko�ci) wype�nienia oraz obramowania. A zatem, faktycznaszeroko�� elementu jest sum� grubo�ci jego lewego obramowania, szeroko�ci lewegowype�nienia, szeroko�ci okre�lonej w stylu CSS, szeroko�ci prawego wype�nieniaoraz grubo�ci prawego obramowania; analogicznie, faktyczna wysoko�� jest sum�grubo�ci górnego obramowania, wysoko�ci górnego wype�nienia, wysoko�ci okre�lonejw stylu CSS, wysoko�ci dolnego wype�nienia oraz grubo�ci dolnego obramowania.

Rysunek 10.6. Podczas stosowania stylów CSS wysoko�� i sze-roko�� s� prostymi zagadnieniami. W�a�ciwo�ci width i heightCSS okre�laj� wtedy wy��cznie wymiary zawarto�ci elementu.Jednak faktyczna szeroko�� i wysoko�� obszaru, jaki elementzajmuje na stronie, wyliczana jest poprzez dodanie do wymia-rów zawarto�ci elementu tak�e wielko�ci jego wype�nieniai obramowania

Ze wzgl�du na te wszystkie wymiary jQuery udost�pnia trzy zestawy funkcji s�u�-cych do okre�lania rónych szeroko�ci i wysoko�ci elementów strony. Oto one.

� width() i height() — funkcje te zwracaj� szeroko�� i wysoko�� podane w styluCSS. Za�ómy na przyk�ad, e strona zawiera znacznik <div>, którego posta�okre�la przestawiona powyej regu�a CSS.

var divW = $('div').width(); // 300var divH = $('div').height(); // 300

Po wykonaniu powyszego fragmentu kodu zmiennym divW oraz divH zostanieprzypisana warto�� 300 — czyli szeroko�� i wysoko�� okre�lone w stylu CSS.

� Funkcja innerWidth() zwraca szeroko�� elementu podan� w stylu CSS powi�k-szon� o szeroko�� prawego i lewego wype�nienia, a funkcja innerHeight() —wysoko�� elementu podan� w stylu CSS powi�kszon� o wysoko�� górnego i dol-nego wype�nienia:

var divW = $('div').innerWidth(); // 340var divH = $('div').innerHeight(); // 340

W tym przypadku zmienne divW oraz divH przyjm� warto�� 340, odpowiadaj�c�szeroko�ci (i wysoko�ci) podanej w regule stylu, powi�kszonej o wymiary wy-pe�niania z obu stron elementu.

� Funkcja outerWidht() zwraca szeroko�� podan� w stylu CSS, powi�kszon�o szeroko�� prawego i lewego wype�nienia oraz grubo�� prawego i lewego obra-mowania; analogicznie, funkcja outerHeight() zwraca wysoko�� elementupodan� w stylu CSS, powi�kszon� o wysoko�� górnego i dolnego wype�nienia orazgrubo�� górnego i dolnego obramowania.



336

var divW = $('div').outerWidth(); // 360var divH = $('div').outerHeight(); // 360

Po wykonaniu powyszego fragmentu kodu w zmiennych divW oraz divH zosta-nie zapisana warto�� 360, czyli szeroko�� (i wysoko��) podana w regule CSS, po-wi�kszona o wielko�� wype�nienia i grubo�� obramowania z obu stron elementu.

Funkcje outerWidht() oraz outerHeight() pobieraj� take jeden dodatkowyargument — warto�� true, której przekazanie sprawi, e funkcje te b�d� uwzgl�d-nia�y w obliczeniach take wielko�� marginesów elementu. Przyk�adowo za�ómy,e posta� znacznika <div> jest okre�lana przy uyciu nast�puj�cej regu�y CSS:

div { width : 300px; height : 300px; padding : 20px; border : 10px solid black; margin: 20px;}

Warto zwróci� uwag� na w�a�ciwo�� margin: 20px. Je�li chcesz, by w wyliczanejszeroko�ci i wysoko�ci elementu zosta�y uwzgl�dnione te marginesy, musiszwywo�a� funkcje outerWidth() oraz outerHeight() w nast�puj�cy sposób:

var divW = $('div').outerWidth(true); // 400var divH = $('div').outerHeight(true); // 400

To, których funkcji naley uy�, zaley od tego, co chcemy osi�gn��. Za�ómy, echcemy zas�oni� czarnym prostok�tem pewien tekst wy�wietlony na stronie — naprzyk�ad odpowied� na pytanie quizowe — a pó�niej go wy�wietli�. Jednym z poten-cjalnych rozwi�za� b�dzie zas�oni�cie odpowiedzi prostok�tem z czarnym t�em.W takim przypadku moemy uy� funkcji width() oraz height(), by okre�li� wy-miary samego tekstu (z pomini�ciem wype�nie� i obramowa�), i na podstawie po-branych warto�ci okre�li� wymiary prostok�ta, który nast�pnie wy�wietlimy nadtekstem.

A teraz dla odmiany za�ómy, e tworzymy w�asn� wersj� znanej gry Pong, w którejniewielka pi�eczka odbija si� od kraw�dzi pola gry. Oczywi�cie, b�dziemy chcieli, bypi�eczka ca�y czas pozostawa�a wewn�trz wyznaczonego obszaru (znacznika <div>,który najprawdopodobniej b�dzie mia� wy�wietlone obramowanie). W tym przypad-ku potrzebna jest znajomo�� wymiarów ca�ego obszaru wewn�trz obramowa�, copozwoli upewni� si�, e animowana pi�eczka nie „wyleci” poza element oraz jegokraw�dzie. W takim przypadku powinni�my skorzysta� z funkcji innerHeight()oraz innerWidth(), gdy pi�eczka moe si� znale�� w dowolnym miejscu wewn�trzpude�ka elementu, nawet je�li b�dzie on mia� wype�nienie.

Uwaga: Funkcji innerHeight(), innerWidth(), outerHeight() oraz outerWidth() nie nale�ystosowa� podczas okre�lania wymiarów okna przegl�darki (z selektorem $(window)) czy dokumentu(z selektorem $(document)). W tych dwóch przypadkach mo�na korzysta� wy��cznie z funkcji height()i width().



337

Okre�lanie po�o�enia elementu na stronieZnajomo�� po�oenia elementu na stronie przydaje si� bardzo cz�sto, na przyk�adchcemy wy�wietli� nad obrazkiem etykiet� ekranow�, kiedy uytkownik wskae gomysz�. Po�oenie tej etykiety powinno by� zalene od po�oenia obrazka na stronie— oznacza to, e musimy najpierw okre�li� po�oenie obrazka, a dopiero potem najego podstawie wyliczy� wspó�rz�dne miejsca, gdzie ma si� pojawi� etykieta. Biblio-teka jQuery udost�pnia kilka funkcji u�atwiaj�cych okre�lanie po�oenia elementówna stronie. Oto one.

� Funkcja offset(). Jej wywo�anie zwraca obiekt zawieraj�cy w�a�ciwo�ci topi left, okre�laj�ce odpowiednio po�oenie lewego, górnego wierzcho�ka elementuod górnej oraz lewej kraw�dzi dokumentu. Przyk�adowo za�ómy, e kiedy uyt-kownik wskae mysz� obrazek, chcemy wzd�u jego górnej kraw�dzi wy�wietli�opis. W takim przypadku musimy zna� po�oenie obrazka. Za�ómy dodatkowo,e obrazek ten ma identyfikator captionImage. Wspó�rz�dne okre�laj�ce jegopo�oenie mona pobra� przy uyciu nast�puj�cego wywo�ania:

var imagePosition = $('#captionImage').offset();

W efekcie, w zmiennej imagePosition zostan� zapisane wspó�rz�dne obrazka.S� one zapisane w obiekcie JavaScript, z którego mona je odczyta�, stosuj�c za-pis z kropk�, opisany na stronie 82. Wspó�rz�dna pozioma jest zapisana wew�a�ciwo�ci left, natomiast wspó�rz�dna pionowa — we w�a�ciwo�ci top:

imagePosition.top // liczba pikseli od górnej kraw�dzi dokumentuimagePosition.left // liczba pikseli od lewej kraw�dzi dokumentu

Za�ómy teraz, e chcemy uy� tych informacji, by wy�wietli� na stronie znacz-nik <div> o identyfikatorze caption. Moemy uy� funkcji .css() jQuery(patrz strona 155), by okre�li� jego w�a�ciwo�ci CSS top, left oraz position,i tym samym wy�wietli� go w odpowiednim miejscu strony:

$('#caption').css({ 'position' : 'absolute', 'left' : imagePosition.left, 'top' : imagePosition.top});

Uwaga: Funkcje offset() oraz position() zwracaj� wspó�rz�dne wyra�one w pikselach nawetwtedy, kiedy po�o�enie elementu na stronie zostanie okre�lone przy u�yciu takich jednostek jak em lubwarto�ci procentowe.

� Funkcja position(). Wywo�anie tej funkcji zwraca obiekt zawieraj�cy wspó�-rz�dne elementu liczone wzgl�dem jego pierwszego przodka, w którego stylachCSS zosta�a okre�lona warto�� w�a�ciwo�ci display. Zrozumienie tego wcalenie jest �atwe, pos�uymy si� zatem przyk�adem dwóch elementów div przed-stawionych na rysunku 10.7. Oba te elementy zosta�y umiejscowione w sposóbbezwzgl�dny; po�oenie elementu outerBox jest okre�lone wzgl�dem dokumentu,natomiast po�oenie elementu innerBox, którego kod HTML jest umieszczonywewn�trz elementu outerBox, wzgl�dem zewn�trznego znacznika <div>. Po-�oenie elementu zewn�trznego jest okre�lane wzgl�dem dokumentu, gdy niejest on umieszczony wewn�trz adnego innego znacznika HTML, w którym



338

Rysunek 10.7. Biblioteka jQuery udost�pnia dwiefunkcje pozwalaj�ce na okre�lanie wspó�rz�dnychelementu na stronie. Gdy na stronie jeden elementumiejscowiony bezwzgl�dnie (#innerBox) zostanieumieszczony wewn�trz innego elementu umiejsco-wionego bezwzgl�dnie (#outerBox), funkcje te zwró-c� ró�ne wyniki

w�a�ciwo�ci CSS display zosta�a przypisana warto�� absolute, relativeb�d� fixed. W przypadku tego elementu funkcja position() zwróci dok�ad-nie takie same wyniki, co funkcja offset(), a zatem wywo�anie:

$('#outerBox').position() // { left : 100, top : 300 }

zwróci obiekt, którego w�a�ciwo�� left b�dzie mia�a warto�� 100, a w�a�ci-wo�� top warto�� 300. Takie warto�ci zosta�y podane w regule stylów dla tegoelementu.

Jednak w przypadku wewn�trznego znacznika <div> — o identyfikatorze inner�Box — którego po�oenie jest okre�lane wzgl�dem elementu zewn�trznego,wywo�ania funkcji offset() i position() zwróc� inne wyniki:

$('#innerBox').offset() // { left : 300, top : 550 }$('#innerBox').position() // { left : 200, top : 250 }

Teraz funkcja offset() zwróci wspó�rz�dne liczone wzgl�dem ca�ego doku-mentu, czyli 300 pikseli na prawo od lewej kraw�dzi dokumentu i 550 pikseliponiej jego górnej kraw�dzi. Natomiast funkcja position() zwróci warto�cipodane w regule stylów CSS dla tego elementu.

Zazwyczaj bardziej przydatna z tych dwóch funkcji jest offset(), gdy pozwala okre-�li� po�oenie elementu w odniesieniu do ca�ej strony i dostarcza informacje potrzebnedo wyznaczenia wspó�rz�dnych elementu wzgl�dem innego elementu strony.

Wskazówka: Funkcji offset() mo�na tak�e u�ywa� do ustawiania po�o�enia elementu na stronie.Wystarczy w tym celu przekaza� w jej wywo�aniu obiekt, co pokazano na poni�szym przyk�adzie:

$('#element').offset({ left : 100, top : 200 });

W tym przypadku wspó�rz�dne musz� by� okre�lane w pikselach — nie mo�na stosowa� innychjednostek, takich jak em (na przyk�ad 20em) lub warto�ci procentowe (na przyk�ad 20%).



339

Uwzgl�dnianie przewini�cia stronyStrony WWW bardzo cz�sto s� wi�ksze od okna przegl�darki, w którym s� prezen-towane: dokumenty HTML zawieraj�ce bardzo obszern� zawarto�� niejednokrot-nie s� wysze, a zdarza si� take, e i szersze od okna przegl�darki. Aby wtedy przej-rze� ca�� zawarto�� strony, uytkownik musi j� przewija� (patrz rysunek 10.8). Kiedyuytkownik przewija stron�, cz�� jej tre�ci przestaje by� widoczna. Przyk�adowo stro-na przedstawiona na rysunku 10.8 zosta�a przewini�ta nieco w dó� i w prawo, co spra-wia, e jej fragmenty przy górnej i lewej kraw�dzi nie s� widoczne. Oznacza to, egórny, lewy wierzcho�ek okna przegl�darki nie b�dzie si� pokrywa� z górnym, lewymwierzcho�kiem dokumentu. Je�li w takim przypadku spróbujemy wy�wietli� jaki�element, na przyk�ad animowany pasek reklamowy, u góry ekranu, po przypisaniuw�a�ciwo�ciom top i left warto�ci 0 pojawi� si� problemy. B�d� one spowodowanetym, e element zosta� umieszczony w lewym, górnym wierzcho�ku dokumentu, leczpoza fragmentem strony, który jest aktualnie widoczny w oknie przegl�darki.

Rysunek 10.8. Cz�stozdarza si�, �e wielko��strony wykracza pozawymiary okna prze-gl�darki. W takichprzypadkach u�ytkow-nik musi j� przewija�,by wy�wietli� pocz�t-kowo niewidocznefragmenty. Niemniejjednak, cho� w danejchwili wida� tylkocz�� dokumentu,przegl�darka zawszedysponuje ca�� jegozawarto�ci�

Na szcz��cie, biblioteka jQuery udost�pnia dwie funkcje pozwalaj�ce na okre�le-nie, o jaki dystans strona zosta�a przewini�ta w pionie oraz w poziomie (inaczejmówi�c, zwracaj� one liczby okre�laj�ce w pikselach, jaki fragment dokumentuznajduje si� powyej górnej kraw�dzi okna przegl�darki oraz poza jego lew� kraw�-dzi�). Poniszy fragment kodu pozwala okre�li� wysoko�� fragmentu dokumentuumieszczonego nad górn� kraw�dzi� okna przegl�darki:

$(document).scrollTop()


Dodawanie etykietekekranowych

340

By natomiast okre�li� szeroko�� obszaru dokumentu umieszczonego poza lew�kraw�dzi� okna, mona uy� nast�puj�cego wywo�ania:

$(document).scrollLeft()

Obie te funkcje zwracaj� wielko�ci liczbowe wyraone w pikselach, z którychmona skorzysta� podczas wyliczania wspó�rz�dnych elementów na stronie. Je�lina przyk�ad chcemy wy�wietli� okienko na �rodku strony, nawet je�li zosta�a onanieco przewini�ta w pionie, trzeba b�dzie okre�li�, o jaki dystans zosta�a przewi-ni�ta, i przesun�� wy�wietlane okienko o odpowiedni odcinek w dó� strony. Du�ostrono�� naley take zachowa� w przypadku wy�wietlania etykietek ekranowychna przewini�tych stronach — bardzo �atwo doprowadzi� do sytuacji, w której ety-kietka b�dzie wy�wietlana w obszarze strony, lecz poza jej fragmentem, który w da-nej chwili jest widoczny w oknie przegl�darki. Dlatego te w 12. kroku opisu kolej-nego przyk�adu, zamieszczonym na stronie 349, zobaczysz, jak skorzysta� z funkcjiscrollTop(), by chroni� si� przed wy�wietlaniem etykietek nad górn� kraw�dzi�prezentowanego w przegl�darce obszaru strony.

Dodawanie etykietek ekranowychEtykietki s� cz�sto stosowanym sposobem prezentowania informacji uzupe�-niaj�cych. S� to niewielkie, wyskakuj�ce okienka, wy�wietlane po wskazaniumysz� wybranego elementu strony — odno�nika, s�owa, obrazka i tym podobnych.Cz�sto s� one stosowane do wy�wietlania definicji s�owa, podpisu pod zdj�ciem,a nawet bardziej szczegó�owych informacji, takich jak czas, koszt oraz lokalizacjajakiego� zdarzenia.

Podstawowa zasada dzia�ania etykietek ekranowych jest bardzo prosta: wskazu-jemy wybrany element mysz� i wy�wietlamy inny element (zazwyczaj b�dzie nimznacznik <div>) w pobliu wskazanego; po usuni�ciu wska�nika myszy z obszaruelementu etykietka znika. Pozna�e� ju sposoby tworzenia kodu JavaScript nie-zb�dnego do zaimplementowania takiego rozwi�zania, zatem bez przeszkód moemyopisa� ca�y proces tworzenia etykietek krok po kroku.

Wykorzystamy w nim kody JavaScript, CSS oraz HTML w celu uzyskania osta-tecznego efektu przedstawionego na rysunku 10.9. Kod HTML pos�uy do zdefinio-wania zarówno elementu wyzwalaj�cego wy�wietlenie etykiety (czyli tego, który na-ley wskaza� mysz�), jak i samej etykiety. Podstawowe aspekty wygl�du etykietyustalimy przy uyciu arkusza stylów CSS, natomiast kod JavaScript pozwoli ukry�etykiet� w momencie wczytywania strony. Dodatkowo okre�limy take procedur�obs�ugi zdarze� hover i dodamy j� do wszystkich elementów strony, dla którychchcemy wy�wietla� etykiety.

Kod HTMLEtykieta ekranowa sk�ada si� z dwóch elementów: samej etykiety, czyli elementuwy�wietlanego na stronie, gdy uytkownik wskae mysz� element wyzwalaj�cy, oraztego elementu wyzwalaj�cego, którym moe by� dowolny inny element strony, takijak obrazek, odno�nik, nag�ówek b�d� znacznik <span>.



341

Rysunek 10.9. Etykiety ekranowe s� niewielkimi okienkami zawieraj�cymi dodatkowe informacje. S� one wy-�wietlane, kiedy u�ytkownik wska�e mysz� okre�lony element strony, tak zwany element wyzwalaj�cy (zosta�zakre�lony na rysunku), oraz ukrywane, gdy wskanik myszy zostanie usuni�ty z obszaru tego elementu

Etykieta jest znacznikiem <div> nale�cym do klasy tooltip i posiadaj�cym unikalnyidentyfikator. Wewn�trz tego znacznika mona umie�ci� dodatkowy kod HTML,chociaby nag�ówki, akapity tekstu i obrazki. Nie naley jednak umieszcza� w nichodno�ników, gdy nie b�d� dzia�a�y prawid�owo — przesuni�cie wska�nika myszydo obszaru etykiety w celu klikni�cia odno�nika spowoduje usuni�cie go z obszaruelementu wyzwalaj�cego, co sprawi, e etykieta zniknie.

Oto bardzo prosty kod etykiety ekranowej:<div class="tooltip" id="aardvarkTooltip"> <h2>Mrówkojad</h2> <p>�redniej wielko�ci ssak ryj�cy, prowadz�cy nocny tryb �ycia;wyst�puje g�ównie w Afryce.</p></div>

Cho� znaczniki <div> etykiet mona umie�ci� w dowolnym miejscu kodu HTMLstrony (w ko�cu przez znaczn� wi�kszo�� czasu i tak s� one niewidoczne), jednaknajlepszym rozwi�zaniem jest umieszczenie ich tu przed zamykaj�cym znacz-nikiem </body>. To optymalne miejsce, gdy pozwala unikn�� wszelkich dziwnychproblemów zwi�zanych ze sposobem prezentacji tre�ci, które mog�yby powsta� poumieszczeniu etykiet wewn�trz innego elementu, pozycjonowanego wzgl�dnie lubbezwzgl�dnie.

Elementem wyzwalaj�cym moe by� dowolny element strony — znacznik <h1>,<div> lub <img>. Je�li chcemy, by elementem wyzwalaj�cym by�o s�owo lub grupas�ów, trzeba je umie�ci� wewn�trz znacznika <span>. Do prawid�owego dzia�aniaelementu wyzwalaj�cego niezb�dne s� dwie informacje.



342

� Nazwa klasy. Wszystkie elementy wyzwalaj�ce musz� nalee� do tej samej klasy,na przyk�ad trigger. Nazwa klasy jest niezb�dna, by kod JavaScript móg� od-szuka� wszystkie te elementy i doda� do nich procedury obs�ugi zdarze� od-powiadaj�ce za wy�wietlanie i ukrywanie etykiet.

� Dane identyfikuj�ce etykiet�. Kady element wyzwalaj�cy jest skojarzony z jedn�etykiet�. Etykieta ta jest znacznikiem <div>, który zazwyczaj jest niewidoczny,lecz mona go wy�wietli�, gdy uytkownik umie�ci wska�nik myszy na odpo-wiednim elemencie wyzwalaj�cym. Kada etykieta musi posiada� unikalny iden-tyfikator, a my musimy dysponowa� jakim� sposobem skojarzenia elementuwyzwalaj�cego z odpowiednim znacznikiem <div> etykiety, dzi�ki któremub�dziemy wiedzieli, jaki znacznik <div> wy�wietli�, kiedy uytkownik wskaemysz� element wyzwalaj�cy. Prostym rozwi�zaniem jest umieszczenie identy-fikatora etykiety w jakim� atrybucie znacznika elementu wyzwalaj�cego (wartododa� przed nim znak #, dzi�ki czemu pobranie etykiety przy uyciu jQuery b�dzienaprawd� bardzo proste). J�zyk HTML5 pozwala na dodawanie danych doznaczników HTML, je�li nazwa atrybutu rozpoczyna si� od ci�gu znaków data-.

Przyk�adowo za�ómy, e elementem wyzwalaj�cym dla naszej etykiety jest s�owomrówkojad. Wskazanie go mysz� powinno spowodowa� wy�wietlenie etykiety(czyli, w rzeczywisto�ci, znacznika <div> o identyfikatorze aardvarkTooltip).Element wyzwalaj�cy moemy utworzy�, umieszczaj�c wybrane s�owo wewn�trzznacznika <span>, co pokazano na poniszym przyk�adzie:

<span class="trigger" data-tooltip="#aardvarkTooltip">mrówkojad</span>

Niestandardowe atrybuty danych standardu HTML5 s� naprawd� rewelacyjne.Pozwalaj� projektantom na umieszczanie w znacznikach przerónych informa-cji, które pó�niej mona pobiera� przy uyciu kodu JavaScript. Szczegó�owy opistych atrybutów mona znale�� na stronie http://html5doctor.com/html5-custom--data-attributes/.

Je�li korzystasz z j�zyków XHTML 1 b�d� HTML 4.01 i obawiasz si� proble-mów zgodno�ci ze standardami, nie b�dziesz móg� uywa� takich atrybutówdanych. Zamiast tego moesz wykorzysta� jeden z prawid�owych atrybutów j�-zyka HTML 4, na przyk�ad title:

<span class="trigger" title="#aardvarkTooltip">mrówkojad</span>

Takie zastosowanie atrybutu title nie jest — co prawda — zgodne z jego prze-znaczeniem i niektórzy projektanci stron mog� nie pochwala� takiego rozwi�za-nia. Najpro�ciej b�dzie skorzysta� z j�zyka HTML5 i uy� atrybutów danych.

Na jednej stronie mona umie�ci� dowoln� liczb� elementów wyzwalaj�cychoraz skojarzonych z nimi etykiet.

Kod CSSKady znacznik <div> etykiety naley do klasy tooltip, a zatem dodanie do uy-wanego na stronie arkusza stylów regu�y z selektorem .tooltip pozwoli okre�li� ichogólny wygl�d (na przyk�ad kolor t�a, obramowanie, szeroko�� i tak dalej). Oto wer-sja tej regu�y umieszczona w przyk�adowym pliku do��czonym do ksi�ki:



343

.tooltip { width: 25%; padding: 5px; background-color: white; border: 3px solid rgb(195,151,51); border-radius : 5px;}

Bez zastosowania dodatkowych stylów uytkownicy nie b�d� w stanie okre�li�,e elementy wyzwalaj�ce pe�ni� szczególn� rol�. Ma to szczególne znaczenie w przy-padkach, gdy b�dziemy dodawa� etykiet� ekranow� do wybranego s�owa nale�cegodo wi�kszego akapitu tekstu. Mona utworzy� specjalny styl CSS, który wyrónielementy wyzwalaj�ce — doda do nich obramowanie, kolor t�a i tym podobne.Ponisza, prosta regu�a dodaje doln� kraw�d� do wszystkich elementów nale�cychdo klasy trigger:

.trigger { border-bottom: 1px dashed white; cursor : help;}

Szczególnie uyteczna jest w�a�ciwo�� CSS cursor — kontroluje ona posta� wska�-nika myszy, w czasie gdy b�dzie si� znajdowa� w obszarze elementu. Kiedy wska�-nik myszy zostanie umieszczony w obszarze tekstu, wygl�da jak kursor do zazna-czania, jednak t� posta� wska�nika mona zmieni� — uycie warto�ci help sprawi,e b�dzie wygl�da� jak znak zapytania (co jest dobrym rozwi�zaniem, gdy etykietazawiera definicj� jakiego� terminu), a warto�ci pointer — e b�dzie wygl�da� jak d�o�z wyprostowanym palcem wskazuj�cym, czyli w sposób standardowy dla wska�nikaumieszczonego na odno�niku. Informacje o pozosta�ych dost�pnych kszta�tachwska�nika myszy mona znale�� na stronie www.w3schools.com/cssref/pr_class_cursor.asp.

Oprócz tego, do arkusza stylów mona doda� regu�� z pseudoelementem :hover,okre�laj�c� posta� elementu wyzwalaj�cego w przypadku umieszczenia w jego ob-szarze wska�nika myszy; oto przyk�ad takiej regu�y:

.trigger:hover { color: rgb(255,0,0);}

Kod JavaScriptNajpro�ciej rzecz ujmuj�c, etykieta ekranowa powinna zosta� wy�wietlona, gdy uyt-kownik umie�ci wska�nik myszy w obszarze elementu wyzwalaj�cego, i ma znik-n��, kiedy wska�nik zostanie z tego elementu usuni�ty. Ju wcze�niej, w rozdziale 6.,dowiedzia�e� si�, jak mona wy�wietla� i ukrywa� elementy. Jednak w tym przyk�a-dzie zwyczajne wy�wietlenie i ukrycie elementu to za ma�o. Kluczow� czynno�ci�zwi�zan� z wy�wietleniem kadej etykiety jest umieszczenie jej w pobliu elementuwyzwalaj�cego. To z kolei wi�e si� z konieczno�ci� uycia funkcji jQuery w celuokre�lenia szeroko�ci, wysoko�ci oraz wymiarów tego elementu. I to jest najtrud-niejsze zadanie. Aby nieco lepiej wyja�ni� wykonywane czynno�ci, w tym przyk�a-dzie zdecydowali�my si� podzieli� opis tworzonego kodu na trzy cz��ci.



344

1. Ukrycie etykiet.

W momencie wczytywania strony wszystkie znajduj�ce si� na niej etykiety(czyli znaczniki <div> umieszczone na samym ko�cu jej tre�ci) powinny by�ukryte. Oczywi�cie, mona by to zrobi� przy uyciu odpowiedniego stylu CSSjeszcze przed wczytaniem strony, jednak w takim przypadku aden uytkow-nik, przegl�daj�cy stron� za pomoc� przegl�darki, w której zosta�a wy��czonaobs�uga j�zyka JavaScript, nie by�by w stanie uzyska� dost�pu do tre�ci etykiet.Je�li informacje zamieszczone w etykietach nie s� bardzo wane i mona zaak-ceptowa� fakt, e niektórzy uytkownicy (w tym take mechanizmy wyszuki-wawcze) ich nie zobacz�, to prosz� bardzo — moesz ukry� etykiety poprzez za-stosowanie odpowiedniego stylu CSS:

.tooltip { display: none;}

2. Dodanie do elementów wyzwalaj�cych procedury obs�ugi zdarze hover.

Czynno�� ta ma kluczowe znaczenie dla dzia�ania etykiet. Kiedy uytkownikwskae mysz� element wyzwalaj�cy, musz� zosta� wykonane dwie operacje.

� Musi zosta� wy�wietlony znacznik <div> odpowiedniej etykiety.

� Znacznik ten naley umie�ci� w pobliu elementu wyzwalaj�cego. W tym celutrzeba okre�li� bie�ce po�oenie tego elementu. Dodatkowo trzeba si� upew-ni�, e etykieta nie przes�oni tego elementu oraz e nie b�dzie wystawa�poza widoczny obszar okna przegl�darki.

3. Dodanie do elementów wyzwalaj�cych procedury obs�ugi zdarze mouseover.

To bardzo proste zadanie — wystarczy ukry� znacznik <div>, kiedy uytkownikusunie wska�nik myszy z jego obszaru.

Aby przekona� si�, jak ten program dzia�a, czas przej�� do przyk�adu, w którymutworzysz swoje w�asne etykiety ekranowe.

Przyk�ad — etykiety ekranoweUtworzenie prostych etykiet ekranowych naprawd� nie jest trudnym zadaniem.W tym przyk�adzie szczegó�owo opiszemy ca�y ten proces. Do pracy nad tym przy-k�adem moesz wykorzysta� dowolny edytor HTML.

Uwaga: Informacje dotycz�ce pobierania przyk�adów do ksi��ki mo�na znale�� na stronie 43.

1. W edytorze HTML otwórz plik tooltip.html umieszczony w katalogu R10.

W tym pliku zosta� ju umieszczony wewn�trzny arkusz stylów CSS, zawiera-j�cy kilka regu� okre�laj�cych wygl�d elementów wyzwalaj�cych oraz etykiet. S�to dok�adnie te same style, które zosta�y przedstawione we wcze�niejszej cz��cirozdzia�u, na stronie 342. Jednak w kodzie strony nie ma jeszcze adnych ety-kiet — ich kod b�dziesz musia� doda�.



345

2. Odszukaj zamykaj�cy znacznik </body> umieszczony na samym kocupliku i powy�ej niego dodaj poni�szy kod HTML tworzonej etykiety:

<div class="tooltip" id="tip1"> <h2>Etykieta</h2> <p>To jest tekst etykiety. Zosta� on umieszczony wewn�trz �znacznika div, dzi�ki temu mo�na tu umie�ci prawie wszystko.</p></div>

Najwaniejszym elementem tego kodu jest zewn�trzny znacznik <div>. Uyli-�my w nim klasy tooltip, co jest niezb�dne zarówno po to, by okre�li� posta�etykiety, jak i ze wzgl�du na kod programu, który utworzysz ju niebawem.Dodatkowo w znaczniku umie�cili�my unikalny identyfikator, który pozwolizidentyfikowa� dan� etykiet� i skojarzy� j� z elementem wyzwalaj�cym, jakiutworzysz w nast�pnym kroku. Wewn�trz etykiety moesz umie�ci� dowolnykod HTML — w tym przypadku jest to nag�ówek oraz jeden akapit tekstu.

3. Odszukaj znacznik <p> umieszczony w kodzie bezpo�rednio poni�ejznacznika <h1>Etykiety ekranowe</h1>, mniej wi�cej w po�owie wielko-�ci pliku. Wybierz kilka s�ów i zapisz je pomi�dzy znacznikami <span>,co pokazano na poni�szym przyk�adzie:

<span class="trigger" data-tooltip="#tip1">accusamus et iusto</span>

Zastosowanie klasy trigger identyfikuje ten znacznik <span> jako elementwyzwalaj�cy etykiety. Jedna z regu� arkusza stylów umieszczonego w sekcji na-g�ówka strony formatuje dowolny znacznik nale�cy do tej klasy w szczególnysposób. Dodatkowo umieszczony w kodzie znacznika atrybut data-tooltipidentyfikuje etykiet�, z któr� dany element wyzwalaj�cy jest skojarzony.

W nast�pnym kroku dodasz do strony kolejn� etykiet�.

4. Tu� poni�ej znacznika <div> dodanego w kroku 2. (lecz wci�� przed zamy-kaj�cym znacznikiem </body>) dodaj kolejny <div>:

<div class="tooltip" id="tip2"> <h2>Kolejna etykieta</h2> <p><img src="../_images/small/yellow_h.jpg" alt="yellow" width="70" height="70" class="imgRight"> A oto jest kolejna etykieta. Spójrzcie, umie�cili�my w niej nawet �ma�e zdj�cie!</p></div>

Doda�e� w�a�nie drug� etykiet�. Zwró� uwag�, e uyli�my w niej tej samej na-zwy klasy, co w poprzedniej, czyli tooltip. Natomiast identyfikator tego znacz-nika jest unikalny — tip2. Dodatkowo wewn�trz etykiety umie�cili�my zdj�cie.Teraz musisz utworzy� element wyzwalaj�cy dla tej etykiety.

5. Wybierz kolejnych kilka s�ów z jakiego� akapitu tekstu i ponownie umie��je wewn�trz znacznika <span>:

<span class="trigger" data-tooltip="#tip2">At vero eos</span>

Zwró� uwag�, by poda� identyfikator drugiej etykiety — #tip2. Nic nie stoi naprzeszkodzie, aby� doda� kolejne etykiety i elementy wyzwalaj�ce; pami�taj je-dynie, eby kada z etykiet mia�a unikalny identyfikator i podaj ten identyfikatorw atrybucie data-tooltip elementu wyzwalaj�cego skojarzonego z dan� etykiet�.

Teraz nadszed� czas, by zaj�� si� pisaniem kodu JavaScript. Do strony zosta� judo��czony plik biblioteki jQuery oraz wywo�anie funkcji $(document).ready().



346

Kolejnym zadaniem b�dzie zatem ukrycie wszystkich etykiet w momencie wczy-tywania strony.

6. Kliknij pusty wiersz wewn�trz funkcji $(document).ready() i wpisz w nim:$('.tooltip').hide();

Ten wiersz kodu jest bardzo prosty. Wywo�anie funkcji hide() (opisanej nastronie 198) powoduje ukrycie wszystkich etykiet, dzi�ki czemu uytkownik niezobaczy ich zaraz po wy�wietleniu strony. Oczywi�cie, chcemy, by konkretneetykiety pojawia�y si�, kiedy uytkownik wskae mysz� odpowiednie elementywyzwalaj�ce, a zatem kolejnym krokiem b�dzie pobranie wszystkich elemen-tów wyzwalaj�cych i dodanie do nich procedury obs�ugi zdarze� mouseover.

7. Poni�ej kodu dodanego w poprzednim kroku dodaj kolejny fragment:$('.trigger').mouseover(function() {

}); // koniec funkcji mouseover

To szkielet kodu procedury obs�ugi zdarze�, podobny do tego, który zosta� opi-sany na stronie 174. W tym przypadku pobieramy wszystkie elementy nale�cedo klasy trigger i dodajemy do nich procedur� obs�ugi zdarze� mouseover.Funkcja ta stanowi kluczowy element naszego kodu obs�uguj�cego etykiety ekra-nowe, gdy to w�a�nie ona b�dzie kontrolowa� wy�wietlanie oraz odpowiednierozmieszczanie etykiet na ekranie. Precyzyjne okre�lenie miejsca, w którym mazosta� wy�wietlona etykieta, jest dosy� z�oone i b�dzie wymaga�o pobrania wielurónych informacji. Dlatego te na samym pocz�tku tej funkcji zdefiniujeszkilka zmiennych.

8. Wewn�trz funkcji anonimowej dodanej w kroku 7. wpisz poni�szy, wyró�-niony pogrubieniem fragment kodu:

1 $('.trigger').mouseover(function() {2 var ttLeft,3 ttTop,4 }); // koniec funkcji mouseover

Zaczynamy od utworzenia dwóch zmiennych — ttLeft zawiera poziom� wspó�-rz�dn� etykiety, natomiast ttTop — wspó�rz�dn� pionow�. Pocz�tkowo obie tezmienne s� puste, poniewa jeszcze nie wiemy, jakie maj� by� ich warto�ci.

Ten sposób tworzenia zmiennych moe Ci si� wydawa� nieco dziwny; gdy za-pewne jeste� przyzwyczajony do tworzenia dwóch zmiennych przy wykorzysta-niu dwóch s�ów kluczowych var, w sposób pokazany poniej:

var ttLeft;var ttTop;

Takie rozwi�zanie jest ca�kowicie prawid�owe, jednak podczas tworzenia wi�k-szej liczby zmiennych cz�sto stosuje si� technik� wykorzystuj�c� tylko jednos�owo kluczowe var, za którym s� podawane nazwy wszystkich zmiennych od-dzielone przecinkami. Dzi�ki temu moemy unikn�� konieczno�ci wielokrot-nego wpisywania s�owa var. Przecinek umieszczony na ko�cu wiersza 3. niejest adnym b��dem — ju zaraz dodasz do kodu kolejne zmienne.

9. Do kodu programu dodaj kolejn� zmian� (umieszczon� w wierszu 4.):1 $('.trigger').mouseover(function() {2 var ttLeft,



347

3 ttTop,4 $this=$(this),5 }); // koniec funkcji mouseover

W tym przypadku wyraenie $(this) odwo�uje si� do elementu wyzwalaj�cego,natomiast ca�a instrukcja przypisania $this = $(this) pozwala zapisa� od-wo�anie do tego elementu w zmiennej. Dok�adnie to samo zrobili�my w przy-k�adzie pokazuj�cym sposób tworzenia panelu kart, w jego 3. kroku (opisanymna stronie 321). Dalej w kodzie tej funkcji b�dziemy wielokrotnie odwo�ywalisi� do elementu wyzwalaj�cego i gdyby�my za kadym razem uywali wywo�a-nia $(this), zmuszaliby�my interpreter JavaScriptu przegl�darki do wielo-krotnego wykonywania kodu funkcji jQuery, co stanowi�oby due marnotraw-stwo czasu i mocy procesora. Gdy zamiast tego zapiszemy wynik wywo�ania$(this) w zmiennej, funkcja jQuery konieczna do pobrania elementu wy-zwalaj�cego zostanie wykonana tylko raz, przez co nasz program stanie si�bardziej efektywny (wi�cej informacji dotycz�cych zalet zapisywania elementówpobieranych przy uyciu jQuery w zmiennych mona znale�� na stronie422).

Kolejnym krokiem b�dzie pobranie etykiety skojarzonej z danym elementemwyzwalaj�cym.

Wskazówka: W przypadku zapisywania elementów pobieranych przy u�yciu jQuery w zmiennychcz�sto stosowan� praktyk� jest umieszczenie na pocz�tku nazwy zmiennej znaku $:

var $banner = $('#banner');

Oczywi�cie, nie jest to konieczne; zmienna var banner = $('#banner') b�dzie dzia�a� równie dobrze.Jednak znak $ przypomina o tym, �e zmienna zawiera selekcj� jQuery, a nie jakiekolwiek inne, zwyczajnewarto�ci, takie jak �acuchy znaków lub liczby.

10. Dodaj kolejn� zmienn� (umieszczon� w wierszu 5.):1 $('.trigger').mouseover(function() {2 var ttLeft,3 ttTop,4 $this=$(this),5 $tip = $($this.attr('data-tooltip')),6 }); // koniec funkcji mouseover

Zmienna $tip zawiera pobrany przy uyciu jQuery znacznik etykiety. Wywo-�anie $($this.attr('data-tooltip')) spe�nia kilka zada�, wi�c rozbijemy jena elementy i dok�adnej przeanalizujemy. Fragment umieszczony wewn�trz wy-wo�ania jQuery $() — $this.attr('data-tooltip') — korzysta z funkcjiattr(), by pobra� warto�� atrybutu data-tooltip elementu wyzwalaj�cego(pami�taj, e to w�a�nie do niego odwo�uje si� zmienna $this). Innymi s�owy,ca�e to wywo�anie odwo�uje si� do aktualnego elementu wyzwalaj�cego, odnaj-duje jego atrybut data-tooltip i pobiera jego warto��. Dla elementu wyzwala-j�cego dodanego w kroku 3. wywo�anie to zwróci �a�cuch znaków '#tip1'; na-tomiast dla elementu dodanego w kroku 5. by�aby to warto�� '#tip2'.

Po pobraniu warto�ci atrybutu data-tooltip jest ona uywana w wywo�aniufunkcji jQuery $() (zewn�trzna funkcja wywo�ania zapisanego w wierszu 5. po-wyszego kodu). Innymi s�owy, w rzeczywisto�ci kod ten sprowadza si� do wy-wo�ania o postaci $('#tip1') lub $('#tip2'). Hej, ale przecie Ty to znasz!To jest zwyczajny sposób pobierania elementów przy uyciu biblioteki jQuery!



348

Po wykonaniu 5. wiersza powyszego fragmentu kodu w zmiennej o nazwie$tip b�dzie zapisany obiekt jQuery z pobran� odpowiedni� etykiet�. Moesz gouy�, by wy�wietli�, animowa� lub okre�li� po�oenie etykiety na stronie.

Kolejnym zadaniem jest zgromadzenie wszystkich informacji niezb�dnych dookre�lenia prawid�owego po�oenia etykiety na stronie.

11. Do funkcji mouseover dodaj kod z wierszy od 6. do 12. poni�szego frag-mentu kodu:

1 $('.trigger').mouseover(function() {2 var ttLeft,3 ttTop,4 $this=$(this),5 $tip = $($this.attr('data-tooltip')),6 triggerPos = $this.offset(),7 triggerH = $this.outerHeight(),8 triggerW = $this.outerWidth(),9 tipW = $tip.outerWidth(),10 tipH = $tip.outerHeight(),11 screenW = $(window).width(),12 scrollTop = $(document).scrollTop();13 }); // koniec funkcji mouseover

Dodane wiersze kodu pobieraj� i zapisuj� w zmiennych informacje o po�oeniuoraz wymiarach kilku elementów. Schemat przedstawiony na rysunku 10.10pomoe Ci wyobrazi� sobie i zrozumie� znaczenie kadej z tych warto�ci. Wida�na nim ca�� stron� WWW (przedstawion� jako szary prostok�t), która jest wi�k-sza od okna przegl�darki (zaznaczonego jako czarna ramka). Strona zosta�a niecoprzewini�ta w dó�, zatem pewien jej fragment znalaz� si� powyej górnej kraw�-dzi okna przegl�darki. Co wi�cej, poniewa strona jest zarówno d�usza, jak i szer-sza od okna przegl�darki, zatem pewne jej fragmenty s� take ukryte poza praw�oraz doln� kraw�dzi� okna przegl�darki.

Rysunek 10.10. Ten schemat pre-zentuje stron� WWW (szary obszar),która jest zarówno wy�sza, jak i szer-sza od okna przegl�darki (oznaczo-nego jako czarny prostok�t). U�yt-kownik przegl�daj�cy t� stron�przewin�� j� nieco ku do�owi, a zatemjej górna cz�� jest niewidoczna, po-dobnie zreszt� jak fragmenty po�o-�one przy jej prawej oraz dolnej kra-w�dzi. Etykieta zosta�a przedstawionajako niewielki prostok�t po�o�onyna samym dole strony, gdy� w�a�nietam znajduje si� bezpo�rednio powczytaniu strony. Dopiero w kroku15. doko�czysz pisanie kodu odpo-wiedzialnego za okre�lenie w�a�ciwe-go po�o�enia etykiety oraz umiesz-czenie jej w tym miejscu



349

Wiersz 6. powyszego fragmentu kodu pobiera wspó�rz�dne elementu wyzwa-laj�cego (oznaczonego na rysunku 10.10 cyfr� 1). Ich znajomo�� jest niezb�dna,gdy to w�a�nie wzgl�dem tego elementu musimy okre�li� po�oenie etykiety.

W wierszach 7. i 8. wywo�ywane s� funkcje outerHeight() (patrz strona 335)oraz outerWidth() (patrz strona 335), które pozwalaj� pobra� odpowiednio wy-soko�� (cyfra 2 na rys. 10.10) oraz szeroko�� (cyfra 3) elementu wyzwalacza(uwzgl�dniaj�c przy tym wielko�ci wype�nienia i obramowania). Kolejne wiersze— 9. i 10. — pobieraj� odpowiednio szeroko�� (cyfra 4) oraz wysoko�� (cyfra 5)etykiety. Poniewa nie chcemy, by etykieta by�a wy�wietlana poza oknem prze-gl�darki, zatem musimy take zna� jego szeroko�� (pobieramy j� w wierszu 11.powyszego fragmentu kodu, a na rysunku 10.10 zosta�a ona oznaczona cyfr� 6)i wiedzie�, czy uytkownik nie przewin�� strony w dó� (a je�li przewin��, to o ile;wiersz 12., cyfra 7). Nie moesz take zapomnie� o dodaniu �rednika na ko�cuwiersza 12., gdy w�a�nie w nim ko�czy si� instrukcja var rozpocz�ta w wierszu 2.

By� moe zastanawiasz si�, do czego s� Ci potrzebne te wszystkie informacje.Czy nie by�oby �atwiej okre�li� po�oenie elementu wyzwalaj�cego, a nast�pniewy�wietli� etykiet� bezpo�rednio nad nim? W wi�kszo�ci przypadków takie roz-wi�zanie zda�oby egzamin, jednak istnieje kilka przypadków, w których niedzia�a�oby prawid�owo. I tak w przypadku zilustrowanym na rysunku 10.11element wyzwalaj�cy znajduje si� w prawym, górnym wierzcho�ku oknaprzegl�darki, a fragment strony jest przewini�ty i ukryty poza górn� kraw�dzi�okna. Gdyby�my teraz umie�cili etykiet� bezpo�rednio nad elementem wy-zwalaj�cym, jej znaczna cz�� by�aby niewidoczna. Innymi s�owy, nasz kod mu-si dzia�a� inteligentnie — powinien okre�li�, czy umieszczenie etykiety nad ele-mentem wyzwalaj�cym nie sprawi, e jej cz�� znajdzie si� poza oknemprzegl�darki. Gdyby faktycznie tak mia�o si� sta�, nasz kod musi wyznaczy�nowe po�oenie etykiety.

Trzeba zacz�� od sprawdzenia, czy etykieta umieszczona bezpo�rednio nad ele-mentem wyzwalaj�cym zmie�ci si� w górnej cz��ci okna przegl�darki.

12. Do tej samej funkcji dodaj wiersze od 13. do 17. z poni�szego fragmentu kodu:1 $('.trigger').mouseover(function() {2 var ttLeft,3 ttTop,4 $this=$(this),5 $tip = $($this.attr('data-tooltip')),6 triggerPos = $this.offset(),7 triggerH = $this.outerHeight(),8 triggerW = $this.outerWidth(),9 tipW = $tip.outerWidth(),10 tipH = $tip.outerHeight(),11 screenW = $(window).width(),12 scrollTop = $(document).scrollTop();13 if (triggerPos.top - tipH - scrollTop > 0 ) {14 ttTop = triggerPos.top - tipH - 10;15 } else {16 ttTop = triggerPos.top + triggerH +10 ;17 }18 }); // koniec funkcji mouseover



350

Rysunek 10.11. Podczasdynamicznego rozmiesz-czania elementów nastronie nale�y zachowa�du�� ostro�no��. Nigdynie b�dziemy wiedzie�,jakie b�d� wymiary oknaprzegl�darki, ani czystrona nie zosta�a w nimprzewini�ta. Je�li czynni-ki te nie zostan� wzi�tepod uwag�, bardzo �a-two mo�na umie�ci�element w taki sposób,�e cz��ciowo lub nawetw ca�o�ci znajdzie si� po-za widocznym obszaremstrony (czyli w zakresko-wanym obszarze rysunku)

W tym krótkim fragmencie kodu dzieje si� ca�kiem sporo, jednak jego analiz�warto zacz�� od przyjrzenia si�, gdzie dok�adnie chcemy umie�ci� etykiet� w sto-sunku do elementu wyzwalaj�cego. Normalnie wy�wietliliby�my etykiet� 10 pik-seli ponad elementem wyzwalaj�cym, aby go nie przes�ania�a. Aby okre�li�wspó�rz�dn� pionow� etykiety, naley zacz�� od pobrania pionowej wspó�rz�d-nej elementu wyzwalaj�cego, nast�pnie odj�� od niej wysoko�� etykiety, a wynikpomniejszy� o dodatkowe 10 pikseli. W ramach przyk�adu za�ómy, e elementwyzwalaj�cy jest umieszczony 150 pikseli pod górn� kraw�dzi� strony, a ety-kieta ma wysoko�� 100 pikseli. Chcemy umie�ci� etykiet� tak, aby nie przes�a-nia�a elementu wyzwalaj�cego, naley zatem wzi�� jego wspó�rz�dn� pionow�— 150 — odj�� 100, a od uzyskanego wyniku (50) odj�� jeszcze 10 (zostawiaj�cw ten sposób niewielki odst�p pomi�dzy etykiet� i elementem wyzwalaj�cym).W rezultacie okazuje si�, e etykieta powinna by� umieszczona 40 pikseli poniejgórnej kraw�dzi dokumentu.

A co by si� sta�o, gdyby element wyzwalaj�cy by� umieszczony 10 pikseli poniejgórnej kraw�dzi dokumentu, a etykieta mia�a wysoko�� 100 pikseli? Gdyby�mybezmy�lnie skopiowali powysze równanie, okaza�oby si�, e wspó�rz�dna pio-nowa etykiety wynosi –90 pikseli (10 – 100 = –90); innymi s�owy, znalaz�aby si�ona ponad górn� kraw�dzi� dokumentu, czyli by�aby niewidoczna!

I w�a�nie w tym miejscu do akcji wkracza warunek umieszczony w wierszu 13.Od warto�ci pionowej wspó�rz�dnej elementu wyzwalaj�cego odejmujemy wy-soko�� etykiety oraz wielko�� przewini�cia strony. Nast�pnie sprawdzamy, czyuzyskany wynik jest wi�kszy od zera (gdyby by� mniejszy, etykieta zosta�abyumieszczona poza górn� kraw�dzi� okna przegl�darki). W tych obliczeniachmusimy uwzgl�dni� take przewini�cie strony, gdy moe si� zdarzy�, e etykietazmie�ci si� na stronie powyej elementu wyzwalaj�cego, je�li jednak strona zo-



351

stanie przewini�ta, moe si� okaza�, e tak umieszczona etykieta znalaz�abysi� poza obszarem strony widocznym w przegl�darce (w�a�nie taka sytuacja zo-sta�a przedstawiona na rysunku 10.11).

Je�li ten warunek b�dzie spe�niony, etykieta zostanie umieszczona nad elemen-tem wyzwalaj�cym (a warto�� wspó�rz�dnej pionowej — ttTop — zostanie wy-liczona w wierszu 14.). Je�li jednak warunek nie zostanie spe�niony, wykonanyb�dzie wiersz 16., a etykieta pojawi si� 10 pikseli poniej dolnej kraw�dzi ele-mentu wyzwalaj�cego (jej wspó�rz�dn� pionow� wyliczamy poprzez pobraniewspó�rz�dnej pionowej lewego, górnego wierzcho�ka elementu wyzwalaj�cego— triggerPos.top — i dodanie do niej jego wysoko�ci — triggerH).

Kolejn� czynno�ci� b�dzie obliczenie poziomej wspó�rz�dnej etykiety.

Uwaga: W opisywanym tu przyk�adzie etykieta jest umieszczana ponad elementem wyzwalaj�cym, jednaknie znaczy to wcale, �e tak ma by�. Nic nie stoi na przeszkodzie, by� zmieni� kod skryptu i sprawdzi�, czypotrafisz wy�wietli� etykiet� poni�ej elementu wyzwalaj�cego b�d� z jego prawej lub lewej strony.

13. Do tej samej funkcji dodaj wiersz 18. poni�szego fragmentu:1 $('.trigger').mouseover(function() {2 var ttLeft,3 ttTop,4 $this=$(this),5 $tip = $($this.attr('data-tooltip')),6 triggerPos = $this.offset(),7 triggerH = $this.outerHeight(),8 triggerW = $this.outerWidth(),9 tipW = $tip.outerWidth(),10 tipH = $tip.outerHeight(),11 screenW = $(window).width(),12 scrollTop = $(document).scrollTop();13 if (triggerPos.top - tipH - scrollTop > 0 ) {14 ttTop = triggerPos.top - tipH - 10;15 } else {16 ttTop = triggerPos.top + triggerH +10 ;17 }18 var overFlowRight = (triggerPos.left + tipW) - screenW;19 }); // koniec funkcji mouseover

Wyliczenie wspó�rz�dnej poziomej etykiety jest nieco bardziej z�oone ni wspó�-rz�dnej pionowej. W tym przypadku nie tylko musimy wiedzie�, czy fragmentetykiety jest umieszczony poza praw� kraw�dzi� okna przegl�darki, lecz takeo ile poza ni� wystaje. Przyk�adowo za�ómy, e wspó�rz�dna pozioma elementuwyzwalaj�cego wynosi 850 pikseli (na rysunku 10.11 zosta�a oznaczona liter� A),etykieta ma 250 pikseli szeroko�ci (zosta�a oznaczona liter� B), a okno przegl�-darki ma szeroko�� 1000 pikseli (oznaczono j� liter� C). Je�li w takim przypadkuetykieta zostanie wy�wietlona w punkcie o wspó�rz�dnej poziomej 850 pikseli,jej prawa kraw�d� znajdzie si� w miejscu o wspó�rz�dnej poziomej 1100 pikseli(A + B). A to oznacza, e prawy fragment etykiety o szeroko�ci 100 pikseli nieb�dzie widoczny! By wyeliminowa� ten problem, musimy wiedzie�, jaki fragmentetykiety wystaje poza praw� kraw�d� okna przegl�darki, i odpowiednio skorygo-wa� jej wspó�rz�dn� poziom�.

Kod zapisany w wierszu 18. oblicza ca�kowit� szeroko�� fragmentu etykiety wy-staj�cego poza praw� kraw�d� okna przegl�darki (oczywi�cie, o ile w ogóle jesttaki fragment). W tym celu wyliczamy wspó�rz�dn� poziom� prawej kraw�dzi



352

etykiety, zak�adaj�c, e by�aby ona umieszczona w tym samym miejscu (w po-ziomie), co element wyzwalaj�cy — triggerPos.left + tipA (A + B, na rysunku10.11). Od uzyskanego wyniku odejmujemy nast�pnie szeroko�� okna prze-gl�darki (C). Je�li ostateczny wynik jest warto�ci� dodatni�, jaki� fragment ety-kiety znajdzie si� poza oknem przegl�darki. Je�li jednak wynik b�dzie ujemny,b�dzie to znaczy�, e w oknie przegl�darki jest na tyle duo miejsca, by etykietasi� w nim zmie�ci�a w ca�o�ci.

14. Poni�ej wiersza dodanego w poprzednim kroku (czyli 18. wiersza) dodajnast�puj�cy fragment kodu:

if (overFlowRight > 0) { ttLeft = triggerPos.left - overFlowRight - 10;} else { ttLeft = triggerPos.left;}

Najpro�ciej rzecz ujmuj�c, ten fragment kodu sprawia, e je�li warto�� zmien-nej overFlowRight jest wi�ksza od zera (czyli etykieta nie zmie�ci si� w ca�o�ciw oknie przegl�darki), wspó�rz�dna pozioma etykiety zostanie wyliczona jakowspó�rz�dna pozioma elementu wyzwalaj�cego pomniejszona o wielko��, o jak�etykieta wystaje poza praw� kraw�d� okna przegl�darki. Pomniejszenie wynikuo dodatkowe 10 pikseli sprawia, e etykieta nawet nie b�dzie dotyka� kraw�dziokna przegl�darki. Je�li jednak warto�� zmiennej overFlowRight jest mniejszaod zera, wspó�rz�dna pozioma etykiety moe by� taka sama jak wspó�rz�dnapozioma elementu wyzwalaj�cego — ttLeft = triggerPos.left;.

O rany — ca�a masa arytmetyki! Na szcz��cie, to ju koniec. Teraz, kiedy juwyliczyli�my wspó�rz�dne etykiety, moemy j� wy�wietli�. W ko�cu!

15. Do funkcji mouseover dodaj wiersze od 24. do 28. poni�szego fragmentu kodu:1 $('.trigger').mouseover(function() {2 var ttLeft,3 ttTop,4 $this=$(this),5 $tip = $($this.attr('data-tooltip')),6 triggerPos = $this.offset(),7 triggerH = $this.outerHeight(),8 triggerW = $this.outerWidth(),9 tipW = $tip.outerWidth(),10 tipH = $tip.outerHeight(),11 screenW = $(window).width(),12 scrollTop = $(document).scrollTop();13 if (triggerPos.top - tipH - scrollTop > 0 ) {14 ttTop = triggerPos.top - tipH - 10;15 } else {16 ttTop = triggerPos.top + triggerH +10 ;17 }18 var overFlowRight = (triggerPos.left + tipW) - screenW;19 if (overFlowRight > 0) {20 ttLeft = triggerPos.left - overFlowRight - 10;21 } else {22 ttLeft = triggerPos.left;23 }24 $tip.css({25 left : ttLeft ,26 top : ttTop,27 position: 'absolute'28 }).fadeIn(200);29 }); // koniec funkcji mouseover



353

W ko�cu nadszed� moment prawdy. Korzystaj�c z techniki tworzenia sekwencjiwywo�a� funkcji jQuery (patrz strona 149), najpierw wywo�ujemy funkcj� .css()(patrz strona 155) i okre�lamy w ten sposób wspó�rz�dne (w�a�ciwo�ci left oraztop) oraz sposób rozmieszczenia znacznika etykiety (w�a�ciwo�� position, któ-rej przypisujemy warto�� absolute, gdy chcemy go umiejscowi� w sposóbbezwzgl�dny), a nast�pnie funkcj� fadeIn() (patrz strona 200), która sprawi,e etykieta stopniowo pojawi si� na ekranie. Na szcz��cie, ukrycie etykiety, kie-dy wska�nik myszy zostanie usuni�ty z obszary elementu wyzwalaj�cego, jestznacznie �atwiejsze.

16. Dokocz tworzenie kodu, dodaj�c wiersze od 30. do 32.; poni�ej przedsta-wiona zosta�a pe�na, kocowa wersja kodu.

1 $('.trigger').mouseover(function() {2 var ttLeft,3 ttTop,4 $this=$(this),5 $tip = $($this.attr('data-tooltip')),6 triggerPos = $this.offset(),7 triggerH = $this.outerHeight(),8 triggerW = $this.outerWidth(),9 tipW = $tip.outerWidth(),10 tipH = $tip.outerHeight(),11 screenW = $(window).width(),12 scrollTop = $(document).scrollTop();13 if (triggerPos.top - tipH - scrollTop > 0 ) {14 ttTop = triggerPos.top - tipH - 10;15 } else {16 ttTop = triggerPos.top + triggerH +10 ;17 }18 var overFlowRight = (triggerPos.left + tipW) - screenW;19 if (overFlowRight > 0) {20 ttLeft = triggerPos.left - overFlowRight - 10;21 } else {22 ttLeft = triggerPos.left;23 }24 $tip.css({25 left : ttLeft ,26 top : ttTop,27 position: 'absolute'28 }).fadeIn(200);29 }); // koniec funkcji mouseover30 $('.trigger').mouseout(function () {31 $('.tooltip').fadeOut(200);32 }); // koniec funkcji mouseout

Procedura obs�ugi zdarze� mouseover jest bardzo prosta: w odpowiedzi na usu-ni�cie wska�nika myszy z obszaru elementu wyzwalaj�cego wystarczy zaciem-ni� wszystkie etykiety. I to wszystko. Teraz zapisz plik i wy�wietl go w przegl�-darce. Pe�n� wersj� kodu przyk�adu mona znale�� w pliku complete_tooltip.htmlumieszczonym w katalogu R10.



354

A L A R M ! W T Y C Z K A !

Etykiety ekranowe w nieco �atwiejszy sposóbPróba utworzenia w�asnego narz�dzia do obs�ugi etykietjest doskona�ym sposobem opanowania funkcji jQuerys�u��cych do okre�lania wymiarów i po�o�enia elemen-tów. Je�li jednak poszukujesz dodatkowych mo�liwo�ci,takich jak pi�knie wygl�daj�ce etykiety, komiksowe dymki,pobieranie zawarto�ci dymków przy u�yciu AJAX-a b�d�precyzyjne umieszczanie etykiet w wybranych miejscachstrony WWW, musisz wiedzie�, �e istnieje wiele wtyczekjQuery udost�pniaj�cych znacznie wi�cej mo�liwo�ci ni�prosty skrypt utworzony w tym rozdziale.

� qTip2 (http://craigsworks.com/projects/qtip2/)jest bardzo rozbudowan� wtyczk� obs�uguj�c� ety-kiety. Pozwala nie tylko na tworzenie prostych ety-kiet, takich jak przedstawione w naszym przyk�a-dzie, lecz tak�e etykiet przypominaj�cych dymkiz komiksowymi rozmowami; pozwala tak�e na �le-dzenie ruchu wska�nika myszy przesuwanego poekranie, na pobieranie zawarto�ci etykiet z serweraoraz udost�pnia wiele innych mo�liwo�ci, mi�dzyinnymi tworzenie okien dialogowych oraz rozwijal-nych menu. Jak wida�, wtyczka ta to prawdziwy,wielofunkcyjny zestaw narz�dziowy.

� jQuery Tools Tooltip (http://jquerytools.org/demos/tooltip/index.html) to kolejna doskona�a wtyczkado tworzenia etykiet. Generowane przez ni� ety-kiety s� bardzo atrakcyjne i maj� ogromne mo�liwo-�ci dostosowywania. Skoro ju� mowa o tej wtyczce,warto zajrze� tak�e na stron� kolekcji narz�dzijQuery Tools (http://jquerytools.org/tools/). Jestona reklamowana jako „zaginiona biblioteka interfej-su u�ytkownika dla stron WWW” i mimo �e sloganten jest nieco napuszony, to jednak skrypt ten za-spokaja wiele potrzeb twórców stron WWW. Udo-st�pnia mi�dzy innymi narz�dzia do tworzenia kart,nak�adek, formularzy oraz suwaków (podobnie jakwtyczka AnythingSlider opisana na stronie 325).

� Wtyczka jQuery UI Tooltip (http://wiki.jqueryui.com/w/page/12138112/Tooltip). Dowiedzia�e� si� ju�o bibliotece jQuery UI w ramce zamieszczonej nastronie 325. Zawiera ona sporo komponentów inter-fejsu u�ytkownika oraz innych narz�dzi przezna-czonych dla projektantów i twórców stron WWW.Cho� w czasie pisania tej ksi��ki twórcy tego projektujeszcze nie udost�pnili oficjalnie wtyczki do tworze-nia etykiet, jednak prace nad ni� s� ju� ca�kiem za-awansowane, a wed�ug planu ma ona zosta� udo-st�pniona w wersji 1.9 biblioteki jQuery UI. Wszystkiewtyczki wchodz�ce w sk�ad biblioteki jQuery UI s�doskona�e.

SkorowidzA

adres URL, 41AJAX, Asynchronous JavaScript

and XML, 357, 394proste operacje, 358

aktualizowanie zawarto�ci strony, 377aktywowanie pola, 282, 286, 479animacje, 205animowany pasek, 211API, Application Programming

Interface, 394, 426API key, 395apostrofy, 491argument

callback, 373data, 373url, 373

arkusz stylówanythingslider.css, 327gallery.css, 232

atrybutbgColor, 160checked, 276class, 137, 138, 140data-tooltip, 347href, 41, 250rel, 237src, 41, 159, 220target, 252

atrybutyHTML, 159znaczników, 138

automatyczna konwersja typów, 66automatyczne uzupe�nianie, 406automatyzacja tworzenia kodu, 136

Bbezwzgl�dne pozycjonowanie, 201biblioteka jQuery, 18, 128biblioteki, 46biblioteki JavaScript, 128blok deklaracji, 23blokowanie

odno�nika, 252przesy�ania danych, 284

b��d sk�adniowy, 489b��dy, 48, 380, 487

czasu wykonania, 491logiczne, 491sk�adniowe, 491typograficzne, 214

CCDN, content distribution network, 129CSS, Cascading Style Sheets, 21, 144cudzys�owy, 491czas trwania animacji, 214czas wczytywania witryny, 484

Ddane

kana�u Flickr, 398kana�u w formacie JSON, 401uwierzytelniaj�ce, 381zdj��, 398

daty, 289daty i godziny, 471

dzie� tygodnia, 472format godzin, 474miesi�c, 471obiekt Date, 471wy�wietlanie czasu, 475

S K O R O W I D Z524

debugger Firebug, 505deklaracja, 23diagnozowanie, 508diagnozowanie zaawansowane, 503d�ugo�� a�cucha, 446dodatek Firebug, 153, , 496–511dodawanie

efektu rollover, 223elementów do tablicy, 76etykietek ekranowych, 340

kod CSS, 342kod HTML, 340kod JavaScript, 343

formatu JSON, 396identyfikatorów, 396jQuery do strony, 132kalendarzy, 289kana�u Flickr, 395komunikatów o b��dach, 296map Google Maps, 404plików zewn�trznych, 46regu� walidacji, 294, 296skryptu, 40sliderów, 325tekstu, 45tre�ci, 149, 368, 423zdj��, 400

dokumentacja jQuery, 426, 430do��czanie zewn�trznych plików, 477DOM, Document Object Model, 137, 361dopasowywanie wzorców, 461dost�p do obiektu JSON

notacja tablicowa, 388sk�adnia z kropk�, 388

dynamicznedodawanie znaczników, 413modyfikowanie stron, 333rozmieszczanie elementów, 350

dzia�anie funkcji, 113

Eefekt

FancyBox, 238powi�kszania, 210rollover, 219–224stopniowego wy�wietlania, 228

efektyjQuery, 198wizualne, 197, 199

elementdata.items, 402media, 400pojemnika, 315strony, 136wyzwalaj�cy, 341, 343

elementyformularza, 273nawigacyjne mapy, 410prezentacji, 241

etykiety ekranowe, 340, 344

FFAQ, Frequently Asked Questions, 191FIFO, First In, First Out, 78filtr

checked, 274contains(), 147even, 146first, 147has(), 147hidden(), 147last, 147odd, 146not(), 147selected, 275visible, 148

filtry jQuery, 146Firebug, 153, 496–511

console.log(), 499instalowanie, 497przegl�danie b��dów, 498

Flickr, 395Flickr API, 395format

JSON, 377, 386JSONP, 386XML, 377, 381ZIP, 485

formatowaniedanych, 373komunikatów, 311

formularz logowania, 202formularze, 271formularze inteligentne, 281funkcja

$(), 422$(document).ready(), 133$.each(), 401$.getJSON(), 394–398, 401.after(), 151, 438.append(), 151, 438.before(), 151, 438.bind(), 441.children(), 434.click(), 441.clone(), 167.closest(), 435.delegate(), 442.each(), 160


.empty(), 440

.error(), 380

.find(), 425, 434

.html(), 150, 438

.next(), 436

.parent(), 434

.prepend(), 151, 438

.prev(), 436

.remove(), 152, 439

.replaceWith(), 439

.siblings(), 435, 436

.text(), 150, 423, 438

.unwrap(), 440

.wrap(), 439

.wrapInner(), 440addClass(), 154, 159, 250animate(), 205–212append(), 424attr(), 159, 221, 226bind(), 188, 189, 191buildAnswers(), 511clearMarkers(), 414click(), 233, 323clone(), 153console.log(), 499createMarker(), 413css(), 155, 156, 431, 479each(), 161, 225, 390errorResponse(), 380fadeIn(), 200, 232fadeOut(), 160, 200fadeTo(), 200fadeToggle(), 200fancybox(), 237, 261focus(), 282get(), 372, 374getJSON(), 387goMap(), 407height(), 334hide(), 143, 198hover(), 184, 223, 227html(), 377innerWidth(), 335jQuery(), 422load(), 365–372not(), 254offset(), 337openExt(), 254outerHeight(), 336outerWidht(), 335parseFloat(), 467parseInt(), 466position(), 337post(), 372, 374prepend(), 232, 384

preventDefault(), 187, 251, 370print, 113printTime(), 476printToday, 112processContacts(), 388processData(), 384processResponse(), 378prompt(), 72ready(), 182removeAttr(), 159, 160removeClass(), 154removeMarker(), 414scrollTop(), 340serialize(), 376show(), 198showHideMarker(), 414slideDown(), 202slideToggle(), 202slideUp(), 202stop(), 216submit(), 277text(), 377toggle(), 198toggleClass(), 155, 204unbind(), 187val(), 273, 275validate(), 294, 306, 308width(), 334zwrotna, callback function, 197, 209

funkcje, 111argumenty, 114przekazywanie danych, 113zwracanie warto�ci, 115

funkcjeanonimowe, 160, 176do obs�ugi odpowiedzi, 363do manipulacji kodem HTML, 438do poruszania si� po DOM, 433systemu operacyjnego, 29wbudowane, 56wykonawcze zdarze�, 174wywo�ywane zwrotnie, 373

Ggaleria fotografii, 228generowanie

liczby losowej, 470zdarzenia click, 322

Google Maps, 404gra

Pac-Man, 60pasjans, 90Pong, 336Usuwanie chwastów, 441


HHTML, Hypertext Markup Language, 19

Iidentyfikator

button, 181changeStyle, 155disable, 187headlines, 368newslinks, 368popUp, 149signup, 277username, 282

indeksowanie tablic, 75informacje o stylach, 236informacje zwrócone przez serwer, 376instrukcja

break, 483else if, 95if, 94if-else, 122, 484new Date(), 471switch, 483Switch, 482

instrukcje, 55instrukcje warunkowe, 89, 91, 99interaktywne efekty graficzne, 219interaktywny pokaz slajdów, 330interfejs programowania aplikacji, 394Internet Explorer, 44interpreter JavaScript, 38

JJavaScript, 15jednostka em, 22j�zyk

CSS, 21HTML5, 18, 289, 342JavaScript, 15, 361PHP, 16, 367

j�zykikompilowane, 39serwerowe, 367skryptowe, 39uywane po stronie serwera, 361

jQuery, 17, 128jQuery UI, 135, 325JSON, JavaScript Object Notation, 386JSONP, JSON with padding, 393

Kkana� Flickr, 395kana�y, 395kana�y RSS, 395karty, 314, 316, 318kaskadowe arkusze stylów, 144kategoria

Ajax, 428Attributes, 427Core, 426CSS, 428Data, 429Deffered objects, 429Dimenstions, 429Effects, 428Events, 428Forms, 429Internals, 430Manipulation, 428Offset, 430Selectors, 427Traversing, 428Utilities, 429

klasa, 154active, 321externalLink, 154focus, 479pq, 164pullquote, 167tooltip, 345

klauzula else, 94klikanie, 28klikni�cie obrazka, 328kod JavaScript formularza, 310kolejki FIFO, 78kolejno��

do��czania plików, 42wykonywania operacji, 65

kolor t�a, 159komentarz jednowierszowy, 85komentarze, 85komentarze wielowierszowe, 85komponenty interfejsu uytkownika, 325kompresja plików, 484komunikacja przegl�darki z serwerem,

360, 362komunikaty o b��dach, 293, 300, 302,

308, 489konfigurowanie

serwera sieciowego, 362strony z galeri�, 235

konsola b��dówChrome, 51Firebug, 500, 504, 509Firefox, 48, 488


Internet Explorer 9, 50JavaScript, 48, 49Safari, 51

kontrolki typu mapy, 410

Lliczba dopasowa�, 463liczby, 464

formatowanie, 468generowanie, 469Math.random(), 470wyszukiwanie, 467zaokr�glanie, 468

listaCzujka, 507wypunktowana, 317zagniedona, 265

litera�y obiektowe, 158, 246, 375logowanie, 381, 383losowe pobieranie, 470

��a�cuchy wywo�a� funkcji, 149�a�cuchy znaków, 445

indexOf(), 448match(), 461pobieranie fragmentów, 449prompt(), 465przeszukiwanie, 447replace(), 463slice(), 450wyszukiwanie wzorca, 450z zapytaniem, 373, 375zamiana na liczb�, 465

��czenieliczb i �a�cuchów znaków, 66�a�cuchów znaków, 65warunków, 97wywo�a� w sekwencj�, 422

Mmapa

hybrydowa, 409interaktywna, 405

menu, 29animowane, 263nawigacyjne, 263

metodabind(), 188blur(), 258close(), 257

document.getElementById(), 139document.getElementsByTagName(),

139encodeURIComponent(), 375focus(), 258GET, 363, 374getDay(), 472indexOf(), 447match(), 461, 462, 464Math.random(), 470moveBy(), 258moveTo(), 258open(), 255, 259, 363parseInt(), 157POST, 363, 374prompt(), 465replace(), 251, 463resizeBy(), 258resizeTo(), 258scrollBy(), 258scrollTo(), 258search(), 461slice(), 449

metody, 83obiektu Date, 471przesy�ania danych, 374

miniaturki zdj��, 403model obiektów dokumentu, 137modyfikowanie

dzia�ania slidera, 332opcji FancyBox, 240stron WWW, 134w�a�ciwo�ci CSS, 155wygl�du slidera, 329

Nnak�adka, overlay, 333NaN, not a number, 66narz�dzia, 24narz�dzie W3C Validator, 69nawiasy klamrowe, 95, 111nawigacja, 263nazwa zast�pcza funkcji, 422nazwy zmiennych, 60, 116negowanie warunków, 98

Oobiekt

Date, 471, 473errorPlacement, 309jQuery, 140rules, 306window, 84


obiektXMLHttpRequest, 360, 362zdarzenia, 185

obiekty, 82jQuery, 231JSON, 389zagniedone, 391

obramowanie zak�adek, 318obs�uga

b��dów, 380kana�ów Flickr, 397odpowiedzi, 363quizów, 123zaawansowana zdarze�, 441zdarze�, 174�da� ajaksowych, 365

odno�nik z tekstem, 250odno�niki, 249odwo�anie zwrotne JSONP, 397okienka informacyjne, 415okre�lanie lokalizacji, 407opcja

changeSpeed, 239cyclic, 240easingIn, 239equalTo, 300max, 300maxlength, 299min, 299minlength, 299overlayColor, 238overlayOpacity, 238, 246padding, 239range, 300rangelength, 299titlePosition, 239transitionIn, 239

opcjeformularza, 284kana�ów Flickr, 397wtyczki FancyBox, 238wtyczki GoMap, 409

operacje na miniaturkach, 432operator

!=, 92!==, 92*=, 68/=, 68+, 66++, 68+=, 68<, 92<=, 92-=, 68==, 92

===, 92>, 92>=, 92I, 97LUB, 98modulo, 474NIE, 98przypisania, 62trójargumentowy, 481typeof, 84

operatorylogiczne, 97porównywania, 92

optymalizacja selektorów, 425otwieranie

odno�ników, 253okien, 259strony na stronie, 262

Ppakiet WAMPP, 362panel

kart, 314, 320zak�adek, 324

parametry funkcji, 113, 116pary nazwa – warto��, 373, 387pasek nawigacyjny, 268p�tla

do-while, 109for, 107while, 104

p�tleautomatyczne, 148niesko�czone, 105

plikanimate.html, 213anythingslider.css, 326compete_quiz.html, 123complete_animate.html, 216complete_complex_tabs.html, 324complete_debugger.html, 508, 513complete_do-while.html, 110complete_events_intro.html, 181complete_fancybox.html, 247complete_gallery.html, 229, 233complete_in-page-links.html, 263complete_load.html, 372complete_map.html, 418complete_menu.html, 266, 270complete_slider.html, 329complete_tabs.html, 324complete_tooltip.html, 353complete_validation.html, 312conditional.html, 109


console.html, 500contacts.php, 387events_intro.html, 177example_regex.txt, 464fadeIn.html, 46fancybox.html, 244fancybox.png, 240faq.html, 192find.html, 433flickr.html, 400flickr_json.txt, 396form.css, 312form.html, 286gallery.html, 230in-page-links.html, 262jQuery, 131jquery.easing.1.3.js, 244jquery.fancybox-1.3.4.css, 236jquery.fancybox-1.3.4.js, 235jquery.js, 133, 293kompletny_login.html, 386load.html, 369login.html, 382login.php, 383map.html, 416menu.html, 268open_external.js, 254print_date.html, 112printTime.js, 476pull-quote.html, 165quiz.html, 119rollover.html, 224selectors.html, 141, 142signup.html, 203slider.html, 327tabs.html, 320time.html, 476todays_news.html, 368tooltip.html, 344validation.html, 304XML, 381

plikizewn�trzne, 477zewn�trzne JavaScript, 40

pobieranieczasu, 472elementów, 432elementów formularzy, 273elementów klasy, 143elementów strony, 175informacji, 70informacji z witryn, 393losowe, 470miesi�ca, 471odno�ników, 249odpowiedzi, 364

podwzorce, 464pojemnik, 84, 316pojemnik kart, 315, 318pokaz slajdów, 244polecenie

alert(), 56, 71, 119document.write(), 56, 106isNaN(), 56parseInt(), 103pop(), 78, 79printToday(), 112prompt(), 70push(), 77, 78shift(), 78, 79unshift(), 78

po�oenieelementu, 337, 338etykiety, 348

poruszanie si� po DOM, 433, 437pq, pull quote, 164prezentacja, 240program

Aptana Studio, 25BBEdit, 25CoffeeCup, 25CoffeeCup Free HTML Editor, 24Dreamweaver, 25Eclipse, 25EditPlus, 25Expression Web Designer, 25HTML-Kit, 24JSMin, 485MAMP, 362Notepad++, 24Packer, 485textMate, 25TextWrangler, 24YUI Compressor, 485

programykomputerowe, 38kompresuj�ce, 485

projekt jQuery UI, 325przechowywanie obrazków w pliku, 240przechwytywanie klikni��, 378przeci�ganie i upuszczanie, 90przegl�darka internetowa, 360przekazywanie

funkcji do zdarzenia, 175wyraenia regularnego, 462zdarze�, 188

przekszta�canietablicy PHP, 387listy, 268

przesy�anieformularza, 278plików z uyciem AJAX-a, 406


przetwarzanie danych, 376przewijanie strony, 339przypisanie polu klasy focus, 479przypisywanie zdarzenia, 175pseudoelement first, 323punkty wstrzymania, 503pusty znacznik <div>, 368

Rramka wewn�trzwierszowa, iframe, 259reakcje na zdarzenia, 186referencje do okien, 257regu�y walidacji, 293, 295regu�y zaawansowane, 298rodzaje b��dów, 491rozmiar

dokumentu, 334okna, 334zdj�cia, 400

Sselektor, 23

#gallery, 230, 233#navigation, 267#newsItem, 372

selektoryatrybutów, 145, 253CSS, 140do formularzy, 274dzieci, 144elementów, 141elementów potomnych, 143elementów s�siaduj�cych, 144identyfikatorów, 141, 425klas, 142proste CSS, 141zaawansowane, 143

serwer aplikacji, 361ASP.NET, 361PHP, 361

serwer bazodanowy, 361MySQL, 361SQL Server, 361

serwer CDN, 130serwer sieciowy, 361

Apache, 361IIS Microsoftu, 361

serwis Flickr, 397sie� dystrybucji tre�ci, 129silnik renderuj�cy, 38skala mapy, 409skróty klawiaturowe, 29

skrypty, 38po stronie klienta, 37po stronie serwera, 37, 367

slider AnythingSlider, 326slidery, 313, 325s�owa zarezerwowane, 61, 492s�owo kluczowe, 61

case, 483Boolean, 84function, 111if, 111number, 84return, 115String, 84this, 162var, 63, 111, 346

sprajty CSS, 240sprawdzanie danych, 90SSL, Secure Socket Layer, 485stan przycisków, 276stopniowe wzbogacanie, 369strona logowania, 382strony zewn�trzne, 252struktura

funkcji, 113galerii, 229kodu panelu kart, 319

styl #fancybox-close, 242symbol {, 386

��cieka

bezwzgl�dna, 41do obrazka, 228do zewn�trznego pliku, 494wzgl�dna, 41zapisana wzgl�dem strony, 494

�ledzenie dzia�ania skryptu, 499

Ttablica preloadImages, 222tablica, 72

dodawanie elementów, 77usuwanie elementów, 79w�a�ciwo�� length, 76zapisywanie danych, 79

tablicewielowymiarowe, 120zagniedone, 120

technologia AJAX, 394tempo animacji, easing, 207, 215testowanie wyrae� regularnych, 464


tworzenieadresu URL, 395animowanego menu, 263daty, 476egzemplarza, 84flag, 95galerii zdj��, 234, 237instancji obiektu, 84kolejek, 78komunikatów, 69liczb losowych, 469list w�a�ciwo�ci, 158litera�ów obiektowych, 298nowych okien, 255obiektów JSON, 386obiektu, 84pasków interaktywnych, 219slidera, 326, 327tablic, 74wyrae� regularnych, 450, 451wyrónianych cytatów, 163zmiennych, 59, 346

typ obiektu, 84typy danych, 56

liczby, 57�a�cuchy znaków, 57warto�ci logiczne, 58

Uukrywanie

etykiety, 344odpowiedzi, 195pól, 289rysunków, 228, 232znacznika, 414

unikanie b��dów, 497ustawianie warto�ci elementu

formularza, 275usuwanie

atrybutów HTML, 159elementów, 152elementów z tablicy, 79zdarze�, 187znaczników, 414

uywanieelementów tablicy, 75funkcji, 431instrukcji warunkowych, 101komentarzy, 86p�tli do-while, 109selektorów, 425typów danych, 63zmiennych, 62

WW3C Validator, 69W3C, World Wide Web Consortium, 138walidacja, 295

formularzy, 90, 291prosta, 303stron, 21zaawansowana, 297, 305zdalna, 301

walidator, 21, 69, 253warto��, 23

elementu formularza, 275null, 462w�a�ciwo�ci CSS, 156zmiennej, 67

wczytywanie rysunków, 221w�z�y, node, 138wielko�� liter, 446wielko�� znaków, 493w�a�ciwo�ci, 23, 83

CSS, 155, 157obiektu zdarzenia, 186okna przegl�darki, 256

w�a�ciwo��float, 168height, 256items, 399left, 256location, 257markers, 411menubar, 257scrollbars, 256status, 256toolbar, 257top, 256visibility, 147width, 256

wspó�rz�dneelementu, 338elementu wyzwalaj�cego, 349etykiety, 350, 352geograficzne, 408obrazka, 337

wst�pne pobieranie, preload, 221wtyczka

AnythingSlider, 326, 328, 330Datapicker, 289Datepicker, 135DD Mega Menu, 270easing, 208FancyBox, 234, 240, 244, 260Form, 406gmap3, 405GMAP3, 409


wtyczkaGoMap, 404, 411, 414jqDock, 270jQuery Tools Tooltip, 354jQuery UI Tooltip, 354lightBox, 236Navigation, 266Taconite, 406Tweet!, 406qTip2, 354Validation, 293, 301, 309

wtyczki do tworzenia etykiet, 354wy��czanie pól, 283, 286wyraenia regularne, 227, 450

adresy e-mail, 458adresy stron WWW, 460daty, 459kod pocztowy, 457numer telefonu, 457podgrupy, 456rozszerzenie GIF, 454testowanie, 464wielokrotne dopasowywanie, 454wybrane symbole, 452zast�powanie �a�cuchów, 463zastosowanie w kodzie, 453, 455

wyraenie $(this), 162, 321, 347, 423wyrónianie wierszy, 177wyróniany cytat, pull quote, 163wysy�anie �dania, 364wy�rodkowanie mapy, 407wy�wietlanie

czasu, 473, 475kodu HTML, 153map Google Maps, 404miniaturek zdj��, 400odno�ników, 260etykiety, 343formularza logowania, 251mapy, 415

wywo�aniewtyczki lightBox, 236funkcji, 112

Zzagniedanie

instrukcji, 100litera�ów obiektowych, 389

zak�adka aktywna, 317zak�adki, 315, 317zamiana �a�cucha znaków na liczb�, 465zapisywanie danych, 79zarz�dzanie zdarzeniami, 188zasi�g zmiennych, 496

zast�powanie tekstów, 463zawarto�� kart, 318zaznaczanie miejsc na mapie, 411zdarzenia, 169zdarzenia specyficzne, 181zdarzenie

blur, 173, 279change, 173, 280click, 170, 230, 280dblclick, 171focus, 173, 278hover, 212hover(), 183keydown, 174keypress, 174keyup, 174klikni�cia, 170load, 172, 182mousedown, 170, 171mousemove, 172mouseout, 171, 212, 222mouseover, 171mouseup, 170reset, 173resize, 172scroll, 172submit, 173, 277toggle(), 184unload, 172

zestaw AMP, 362zewn�trzne pliki JavaScript, 477zmiana w�a�ciwo�ci

CSS, 157src, 220, 227

zmienianie koloru, 479zmienna

$this, 321counter, 107evt, 186extLink, 163imgPath, 232message, 116oldSrc, 223preloadImage, 226prodID, 373sessID, 373

zmienne, 59globalne, 117lokalne, 117

znacznik<a>, 20, 237<body>, 20, 44<br>, 105<content>, 381<div>, 144, 212


<form>, 271<h1>, 21, 102<head>, 20<html>, 20<img>, 159, 233<input>, 271<label>, 273<li>, 264<p>, 20, 144<script>, 38, 70, 405<scripts>, 132<select>, 271<span>, 164, 167, 340<strong>, 20, 144<textarea>, 271<tr>, 146<ul>, 143, 264

znaczniki HTML, 20znak

$, 423cudzys�owu, 58karetki, 63kropki, 149plusa, 145przecinka, 227równo�ci, 62, 396, 493�rednika, 56, 158tabulacji, 63uko�nika, 85zapytania, 373, 395

znaki specjalne, 176

��danie

GET, 386POST, 386XMLHTTP, 397

http://program-partnerski.helion.pl

JavaScript i jQuery. Nieoficjalny podręcznik · 2020. 8. 26. · Modyfikacja dziaania slidera...

Documents

Transcript of JavaScript i jQuery. Nieoficjalny podręcznik · 2020. 8. 26. · Modyfikacja dziaania slidera...