JavaScript i jQuery Nieoficjalny podrecznik jsjqnp

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

ISBN: 978-83-246-4381-3

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 kompletne
i 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 HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: 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/jsjqnp
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

Księgarnia internetowa

•

Lubię to! » Nasza społeczność

Spis treci

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

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

Cze I. Wprowadzenie do jzyka JavaScript ..............................33

Rozdzia 1. Pierwszy program w jzyku JavaScript ........................................ 35

Wprowadzenie do programowania ............................................................. 36

Czym jest program komputerowy? ......................................................... 38

Jak doda kod JavaScript do strony? ........................................................... 38

Zewntrzne pliki JavaScript .................................................................... 40

Pierwszy program w jzyku JavaScript ....................................................... 42
Dodawanie tekstu do stron ........................................................................ 45
Doczanie zewntrznych plików JavaScript .............................................. 46
Wykrywanie bdów .................................................................................. 48

Konsola JavaScript w przegldarce Firefox ............................................... 48
Wywietlanie okna dialogowego bdów w Internet Explorerze 9 ............. 50
Konsola bdów w przegldarce Chrome ................................................. 51
Konsola bdów w przegldarce Safari ..................................................... 51

Rozdzia 2. Gramatyka jzyka JavaScript ....................................................... 55

Instrukcje ................................................................................................. 55
Wbudowane funkcje .................................................................................. 56
Typy danych ............................................................................................. 56

Liczby .................................................................................................... 57
acuchy znaków .................................................................................. 57
Wartoci logiczne ................................................................................... 58

Zmienne ................................................................................................... 59

Tworzenie zmiennych ............................................................................ 59
U ywanie zmiennych ............................................................................. 62

Kup książkę

Poleć książkę

S P I S T R E C I

U ywanie typów danych i zmiennych ........................................................63

Podstawowe operacje matematyczne ......................................................64
Kolejno wykonywania operacji .............................................................65
czenie acuchów znaków ...................................................................65
czenie liczb i acuchów znaków .........................................................66
Zmienianie wartoci zmiennych .............................................................67

Przykad — u ywanie zmiennych do tworzenia komunikatów ....................69
Przykad — pobieranie informacji ...............................................................70
Tablice ......................................................................................................72

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

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

Kiedy u ywa komentarzy? .....................................................................86
Komentarze w tej ksi ce ........................................................................87

Rozdzia 3. Dodawanie struktur logicznych i sterujcych .............................. 89

Programy reagujce inteligentnie ...............................................................89

Podstawy instrukcji warunkowych ..........................................................91
Uwzgldnianie planu awaryjnego ............................................................94
Sprawdzanie kilku warunków .................................................................94
Bardziej skomplikowane warunki ...........................................................97
Zagnie d anie instrukcji warunkowych ..................................................99
Wskazówki na temat pisania instrukcji warunkowych ..........................100

Przykad — u ywanie instrukcji warunkowych .........................................101
Obsuga powtarzajcych si zada za pomoc ptli ...................................104

Ptle while ............................................................................................104
Ptle i tablice ........................................................................................106
Ptle for ................................................................................................107
Ptle do-while .......................................................................................109

Funkcje — wielokrotne korzystanie z przydatnego kodu ...........................110

Krótki przykad .....................................................................................112
Przekazywanie danych do funkcji .........................................................113
Pobieranie informacji z funkcji .............................................................114
Unikanie konfliktów midzy nazwami zmiennych ...............................116

Przykad — prosty quiz .............................................................................118

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

Rozdzia 4. Wprowadzenie do jQuery ........................................................... 127

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

Kup książkę

Poleć książkę

S P I S T R E C I

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

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

Dodawanie treci do stron ....................................................................... 149

Zastpowanie i usuwanie wybranych elementów .................................. 152

Ustawianie i odczyt atrybutów znaczników .............................................. 154

Klasy .................................................................................................... 154
Odczyt i modyfikacja waciwoci CSS ................................................. 155
Jednoczesna zmiana wielu waciwoci CSS .......................................... 157

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

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

Automatycznie tworzone, wyró niane cytaty ........................................... 163

Opis rozwizania ................................................................................. 164
Kod rozwizania ................................................................................... 165

Rozdzia 5. Akcja i reakcja — oywianie stron za pomoc zdarze .............169

Czym s zdarzenia? ................................................................................. 169

Zdarzenia zwizane z mysz ................................................................. 171
Zdarzenia zwizane z dokumentem i oknem ........................................ 172
Zdarzenia zwizane z formularzami ..................................................... 173
Zdarzenia zwizane z klawiatur .......................................................... 174

Obsuga zdarze przy u yciu jQuery ........................................................ 174
Przykad — wyró nianie wierszy tabeli ..................................................... 177
Zdarzenia specyficzne dla biblioteki jQuery ............................................. 181

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

Zaawansowane zarzdzanie zdarzeniami ................................................. 188
Inne sposoby stosowania funkcji bind() .................................................... 189
Przykad — jednostronicowa lista FAQ .................................................... 191

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

Rozdzia 6. Animacje i efekty ......................................................................... 197

Efekty biblioteki jQuery ........................................................................... 197

Podstawowe wywietlanie i ukrywanie ................................................. 198
Wygaszanie oraz rozjanianie elementów ............................................. 200
Przesuwanie elementów ....................................................................... 202

Przykad: wysuwany formularz logowania ................................................ 202

Tworzenie kodu ................................................................................... 203

Kup książkę

Poleć książkę

S P I S T R E C I

Animacje ................................................................................................205

Tempo animacji ...................................................................................207

Wykonywanie operacji po zakoczeniu efektu ..........................................209
Przykad: animowany pasek ze zdjciami .................................................211

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

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

Rozdzia 7. Efekty zwizane z rysunkami ......................................................219

Zamiana rysunków ..................................................................................219

Zmienianie atrybutu src rysunków .......................................................220
Wstpne wczytywanie rysunków ..........................................................221
Efekt rollover z u yciem rysunków ........................................................222

Przykad — dodawanie efektu rollover z u yciem rysunków ......................223

Omówienie zadania ..............................................................................224
Tworzenie kodu ...................................................................................225

Przykad — galeria fotografii z efektami wizualnymi .................................228

Omówienie zadania ..............................................................................228
Tworzenie kodu ...................................................................................230

Wzbogacona galeria z wtyczk FancyBox biblioteki jQuery .......................234

Podstawy ..............................................................................................235
Tworzenie galerii zdj .........................................................................237
Personalizacja efektu FancyBox ............................................................238

Przykad — galeria fotografii oparta na wtyczce FancyBox .........................244

Rozdzia 8. Usprawnianie nawigacji ............................................................. 249

Podstawowe informacje o odnonikach ....................................................249

Pobieranie odnoników w kodzie JavaScript ..........................................249
Okrelanie lokalizacji docelowej ...........................................................250
Blokowanie domylnego dziaania odnoników .....................................251

Otwieranie zewntrznych odnoników w nowym oknie ...........................252
Tworzenie nowych okien .........................................................................255

Waciwoci okien ................................................................................255

Otwieranie stron w okienku na pierwotnej stronie ...................................259

Przykad — otwieranie strony na stronie ...............................................262

Animowane menu nawigacyjne ...............................................................263

Kod HTML ...........................................................................................264
Kod CSS ...............................................................................................266
Kod JavaScript ......................................................................................268
Przykad ...............................................................................................268

Rozdzia 9. Wzbogacanie formularzy ............................................................ 271

Wprowadzenie do formularzy ..................................................................271

Pobieranie elementów formularzy .........................................................273
Pobieranie i ustawianie wartoci elementów formularzy ........................275
Sprawdzanie stanu przycisków opcji i pól wyboru ..................................276
Zdarzenia zwizane z formularzami .....................................................277

Kup książkę

Poleć książkę

S P I S T R E C I

Inteligentne formularze ........................................................................... 281

Aktywowanie pierwszego pola formularza ............................................ 282
Wyczanie i wczanie pól ................................................................... 283
Ukrywanie i wywietlanie opcji formularza ........................................... 284

Przykad — proste wzbogacanie formularza .............................................. 285

Aktywowanie pola ................................................................................ 286
Wyczanie pól formularza ................................................................... 286
Ukrywanie pól formularza .................................................................... 289

Walidacja formularzy .............................................................................. 291

Wtyczka Validation .............................................................................. 293
Podstawowa walidacja .......................................................................... 294
Zaawansowana walidacja ..................................................................... 297
Okrelanie stylu komunikatów o bdach ............................................. 302

Przykad zastosowania walidacji .............................................................. 303

Prosta walidacja ................................................................................... 303
Walidacja zaawansowana ..................................................................... 305
Walidacja pól wyboru i przycisków opcji ............................................... 308
Formatowanie komunikatów o bdach ................................................ 311

Rozdzia 10. Rozbudowa interfejsu stron WWW .......................................... 313

Organizowanie informacji przy u yciu kart .............................................. 314

Kod HTML .......................................................................................... 315
Kod CSS ............................................................................................... 316
Kod JavaScript ...................................................................................... 319
Przykad — panel kart ........................................................................... 320

Dodawanie sliderów ................................................................................ 325

Stosowanie slidera AnythingSlider ....................................................... 326
Przykad — AnythingSlider ................................................................... 327
Modyfikowanie wygldu slidera ............................................................ 329
Modyfikacja dziaania slidera ............................................................... 332

Okrelanie wielkoci i poo enia elementów strony ....................................... 333

Okrelanie wysokoci i szerokoci elementów ...................................... 334
Okrelanie poo enia elementu na stronie ............................................ 337
Uwzgldnianie przewinicia strony ...................................................... 339

Dodawanie etykietek ekranowych ........................................................... 340

Kod HTML .......................................................................................... 340
Kod CSS ............................................................................................... 342
Kod JavaScript ...................................................................................... 343
Przykad — etykiety ekranowe .............................................................. 344

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

Rozdzia 11. Wprowadzenie do AJAX-a .........................................................357

Czym jest AJAX? .................................................................................... 357
AJAX — podstawy ................................................................................... 360

Elementy ukadanki ............................................................................. 360
Komunikacja z serwerem sieciowym .................................................... 362

Kup książkę

Poleć książkę

S P I S T R E C I

AJAX w bibliotece jQuery ........................................................................365

U ywanie funkcji load() ........................................................................365
Przykad — korzystanie z funkcji load() .................................................368
Funkcje get() i post() .............................................................................372
Formatowanie danych przesyanych na serwer ......................................373
Przetwarzanie danych zwróconych z serwera .........................................376
Obsuga bdów ....................................................................................380
Przykad — korzystanie z funkcji get() ...................................................380

Format JSON ..........................................................................................386

Dostp do danych z obiektów JSON ......................................................388
Zo one obiekty JSON ..........................................................................389

Rozdzia 12. Flickr oraz Google Maps ............................................................ 393

Prezentacja JSONP ..................................................................................393
Dodawanie do witryny kanau Flickr ........................................................395

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

Przykad — dodawanie zdj z Flickr na wasnej stronie ............................400
Wywietlanie na wasnej stronie map Google Maps .................................404

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

Przykad zastosowania wtyczki GoMap ....................................................415

Cze V. Rozwizywanie problemów, wskazówki i sztuczki .....419

Rozdzia 13. Wykorzystywanie wszystkich moliwoci jQuery ....................421

Przydatne informacje i sztuczki zwizane z jQuery ....................................421

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

Korzystanie z dokumentacji jQuery .........................................................426

Czytanie dokumentacji na stronie jQuery .............................................430

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

Rozdzia 14. Zaawansowane techniki jzyka JavaScript ............................. 445

Stosowanie acuchów znaków ................................................................445

Okrelanie dugoci acucha ...............................................................446
Zmiana wielkoci znaków w acuchu ..................................................446
Przeszukiwanie acuchów znaków: zastosowanie indexOf() ...................447
Pobieranie fragmentu acucha przy u yciu metody slice() ....................449

Kup książkę

Poleć książkę

S P I S T R E C I

Odnajdywanie wzorów w acuchach ...................................................... 450

Tworzenie i stosowanie podstawowych wyra e regularnych ................... 451
Tworzenie wyra e regularnych ........................................................... 451
Grupowanie fragmentów wzorców ....................................................... 456
Przydatne wyra enia regularne ............................................................. 456
Dopasowywanie wzorców ..................................................................... 461
Zastpowanie tekstów .......................................................................... 463
Testowanie wyra e regularnych .......................................................... 464

Stosowanie liczb ...................................................................................... 464

Zamiana acucha znaków na liczb ..................................................... 465
Sprawdzanie wystpowania liczb .......................................................... 467
Zaokrglanie liczb ................................................................................ 468
Formatowanie wartoci monetarnych ................................................... 468
Tworzenie liczb losowych ..................................................................... 469

Daty i godziny ......................................................................................... 471

Pobieranie miesica ............................................................................. 471
Okrelanie dnia tygodnia ...................................................................... 472
Pobieranie czasu .................................................................................. 472
Tworzenie daty innej ni bie ca .......................................................... 476

czenie ró nych elementów ................................................................... 477

U ywanie zewntrznych plików JavaScript ........................................... 477

Tworzenie bardziej wydajnego kodu JavaScript ........................................ 479

Zapisywanie ustawie w zmiennych .................................................... 479
Operator trójargumentowy ................................................................... 481
Instrukcja Switch ................................................................................. 482

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

Rozdzia 15. Diagnozowanie i rozwizywanie problemów ........................ 487

Najczstsze bdy w kodzie JavaScript ...................................................... 487

Brak symboli kocowych ...................................................................... 488
Cudzysowy i apostrofy ........................................................................ 491
U ywanie sów zarezerwowanych ......................................................... 492
Pojedynczy znak równoci w instrukcjach warunkowych ...................... 493
Wielko znaków ................................................................................. 493
Nieprawidowe cie ki do zewntrznych plików JavaScript ................... 494
Nieprawidowe cie ki w zewntrznych plikach JavaScript .................... 494
Znikajce zmienne i funkcje ................................................................. 496

Diagnozowanie przy u yciu dodatku Firebug ........................................... 496

Instalowanie i wczanie dodatku Firebug ............................................. 497
Przegldanie bdów za pomoc dodatku Firebug .................................. 498
ledzenie dziaania skryptu za pomoc funkcji console.log() .................. 499
Przykad — korzystanie z konsoli dodatku Firebug ................................ 500
Diagnozowanie zaawansowane ............................................................ 503

Przykad diagnozowania .......................................................................... 508

Dodatek A. Materiay zwizane z jzykiem JavaScript ................................ 515

róda informacji .................................................................................... 515

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

Kup książkę

Poleć książkę

S P I S T R E C I

Podstawy jzyka JavaScript ......................................................................516

Artykuy i prezentacje ...........................................................................516
Witryny ................................................................................................516
Ksi ki .................................................................................................517

jQuery .....................................................................................................517

Artykuy i prezentacje ...........................................................................517
Witryny ................................................................................................517
Ksi ki .................................................................................................518

AJAX .......................................................................................................518

Witryny ................................................................................................518
Ksi ki .................................................................................................519

Zaawansowany jzyk JavaScript ...............................................................519

Artykuy i prezentacje ...........................................................................519
Witryny ................................................................................................519
Ksi ki .................................................................................................520

CSS .........................................................................................................520

Witryny ................................................................................................521
Ksi ki .................................................................................................521

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

Kup książkę

Poleć książkę

Rozbudowa interfejsu
stron WWW

ywa, e strony WWW przypominaj dugie, jednostronicowe broszury. Od-
wiedzajce je osoby mog si czu przytoczone przez wiele tekstu i znaczn
liczb obrazków, które musz dugo przewija, zwaszcza gdy nie s w stanie

szybko znale poszukiwanych informacji. To naszym zadaniem, zadaniem twór-
ców stron jest zapewnienie u ytkownikom narzdzi, które uatwi im znalezienie
tego, czego szukaj. Przy u yciu JavaScriptu oraz biblioteki jQuery mo na uspraw-
nia tworzone strony i uatwia u ytkownikom korzystanie z nich — na przykad
poprzez ukrywanie zawartoci, a do momentu gdy bdzie potrzebna, oraz zapew-
nianie atwiejszego dostpu do informacji.

W tym rozdziale poznasz techniki su ce do poprawiania czytelnoci i atwoci ko-
rzystania ze stron WWW. Karty pozwalaj na umieszczanie znacznych iloci in-
formacji na stosunkowo niewielkim obszarze i zapewniaj mo liwo kliknicia wy-
branej karty w celu uzyskania dostpu do mniejszej porcji danych. Etykietki ekranowe
— niewielkie, wyskakujce okienka pokazywane po wskazaniu jakiego elementu
strony wskanikiem myszy — umo liwiaj wywietlanie dodatkowych informacji.
Coraz bardziej popularn form kontroli zawartoci strony s tak zwane slidery
(od angielskiego sowa slide — przesuwa) — mo na by je porówna do okna, które-
go zawarto da si przesuwa, by ukry jedne, a wywietli inne elementy tej e
strony. Slidery pozwalaj na prezentowanie znacznych iloci informacji i s bardzo
czsto stosowane na stronach gównych witryn.

W tym rozdziale poznasz tak e kilka przydatnych technik pozwalajcych na tworze-
nie wasnych komponentów interfejsu u ytkownika, takich jak okrelanie wymiarów
okna przegldarki, konkretnego elementu strony oraz poo enia elementu na stronie.

ROZDZIA

Kup książkę

Poleć książkę

C Z I 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 informacji
przy uyciu kart

314

Organizowanie informacji przy uyciu kart

Umieszczenie na stronie zbyt wielu informacji mo e przytoczy u ytkownika i spra-
wi, e strona bdzie wygldaa na przepenion. Jzyk JavaScript zapewnia wiele mo -
liwoci prezentowania znacznych iloci informacji na niewielkim obszarze. Jedn
z technik jest stosowanie kart. Panel kart skada si z rzdu zakadek wywietlonych
u góry oraz jednej, widocznej karty. Kiedy u ytkownik kliknie zakadk, aktualnie
prezentowana karta znika, a na jej miejscu pojawia si inna (patrz rysunek 10.1).

Rysunek 10.1.

Panele kart s czsto stosowane na witrynach zajmujcych si handlem elektronicznym, na

których informacje s prezentowane na osobnych kartach. W przedstawionym tu przykadzie (bdcym jedy-
nie fragmentem caej strony) przedstawiono karty zawierajce opis produktu, jego specyfikacj oraz informa-
cje o sposobie dostawy; przy takim rozwizaniu uytkownik moe klikn kart, by wywietli te informacje,
które go interesuj

Panele kart, tak jak wszystkie komponenty interfejsu u ytkownika stron WWW, s
tworzone przy u yciu kodów napisanych w jzykach HTML, JavaScript oraz za
pomoc CSS. Ka dy z tych elementów paneli kart mo na pisa na wiele sposobów,
poni ej przedstawione zostao bardzo proste rozwizanie.

Kup książkę

Poleć książkę

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

Organizowanie informacji
przy uyciu kart

315

Kod HTML

Panel kart skada si z dwóch podstawowych elementów: zakadek (czyli przycisków
umieszczonych jeden obok drugiego w wierszu wywietlonym na górze lub na dole
komponentu) oraz kart (bdcych znacznikami

<div>

zawierajcymi informacje,

które chcemy prezentowa). Dodatkowo komponent mo e zawiera kilka innych
znaczników su cych do zapewnienia waciwej jego organizacji oraz majcych na
celu uatwienie kodu JavaScript, który go obsuguje. Oto one.

Element pojemnika. Cho waciwie nie jest to niezbdne, jednak zastosowa-
nie dodatkowego znacznika

<div>

, w którym bd umieszczone wszystkie za-

kadki i karty, mo e w wyrany sposób oznaczy pocztek i koniec komponentu
oraz uatwi tworzenie kodu JavaScript zwaszcza wtedy, kiedy na jednej stronie
ma znale si wicej takich paneli karty. Oto podstawowy kod HTML takiego
elementu:

</div>

Dodanie do tego znacznika atrybutu

class

identyfikuje go i uatwia tworzenie

stylów okrelajcych posta elementów wewntrz panelu oraz tworzenie selek-
torów jQuery odwoujcych si do poszczególnych zakadek i kart. Jeli na naszej
stronie ma si znajdowa tylko jeden panel kart, zamiast klasy mo na by okre-
li identyfikator tego znacznika.

Zakadki. Zazwyczaj tworzy si je w postaci listy wypunktowanej, zawierajcej
odnoniki:

<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>

Odnoniki umieszczone w poszczególnych punktach listy odwouj si do iden-
tyfikatorów przypisanych poszczególnym kartom (opisanym poni ej). Utworze-
nie odnonika od karty sprawia, e u ytkownicy, którzy wyczyli w swoich
przegldarkach obsug jzyka JavaScript, bd mogli przeskoczy prosto od wy-
branego fragmentu treci — kliknicie takiego odnonika powoduje przewinicie
strony do okrelonego miejsca.

Uwaga:

Jeli nie wiesz, jak tworzy si takie odnoniki, krótkie wyjanienie moesz znale na stronie

http://www.yourhtmlsource.com/text/internallinks.html.

Pojemnik kart. Znacznik

<div>

zawierajcy wszystkie karty mo e przyda si

do okrelania ich postaci w stylach CSS oraz odwoywania do nich przy u yciu
jQuery:

</div>

Kup książkę

Poleć książkę

C Z I 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 informacji
przy uyciu kart

316

Karty. To wanie w nich umieszczane s waciwe informacje. Ka da karta jest
reprezentowana przez znacznik

<div>

i mo e zawiera dowolne treci: nagówki,

akapity, obrazki oraz inne znaczniki

<div>

. Ka dy z tych znaczników powinien

mie unikalny identyfikator, odpowiadajcy identyfikatorowi podanemu w atry-
bucie

HREF

odnoników tworzcych zakadki (patrz drugi punkt listy):

Dodanie do ka dego z tych znaczników jakiej klasy — na przykad

class=

´"panel"

— tak e jest dobrym pomysem, gdy zapewnia dodatkowy sposób

okrelania ich wygldu i pobierania przy u yciu jQuery.

Wszystkie znaczniki

<div>

poszczególnych kart s umieszczane wewntrz nad-

rzdnego znacznika

<div>

penicego rol pojemnika. Kompletna struktura kodu

HTML panelu kart ma zatem nastpujc 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 CSS

Arkusz stylów pozwoli nada nagówkom kart wygld zakadek (przycisków umiesz-
czonych tu obok siebie), a tak e sprawi, e same karty bd wyglday jako spójna
cao, w której tre bdzie si czy z zakadk.

Pojemnik. Nie musimy w aden sposób okrela wygldu znacznika

<div>

wewntrz którego s umieszczone wszystkie karty (w rzeczywistoci ten znacz-
nik w ogóle nie jest potrzebny). Jednak mo e si przyda, gdybymy chcieli ogra-
niczy szeroko caego panelu na przykad po to, by umieci go obok jakiego
innego elementu strony bd umiejscowi obok siebie dwa takie panele. W ta-
kim przypadku w stylu odnoszcym si do tego znacznika moglibymy okreli
jego szeroko w nastpujcy sposób:

Kup książkę

Poleć książkę

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

Organizowanie informacji
przy uyciu kart

317

.tabbedPanels {
width: 50%
}

Lista wypunktowana oraz jej elementy. Poniewa listy wypunktowane s za-
zwyczaj nieco wcite, zatem musimy z niej usun wszelkie wypenienia zarów-
no z lewej, jak i z prawej strony. Co wicej, aby zakadki byy rozmieszczone bok
siebie, a nie jedna nad drug, w elementach listy musimy zastosowa waci-
wo

float

. I w kocu nie mo emy zapomnie o usuniciu punktorów, które s

standardowo wywietlane z lewej strony ka dego punktu listy. Wszystkie te za-
dania realizuj dwa poni sze 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 rozdziau. Innymi

sowy, regua

.tabs

odwouje si do listy wypunktowanej —

— natomiast regua

.tabs li

— do znaczników

<li>

umieszczonych wewntrz tej listy.

Same zakadki s reprezentowane przez znaczniki

<a>

umieszczone wewntrz

punktów listy, czyli znaczników

<li>

. W stylu okrelajcym ich posta na pewno

trzeba bdzie odpowiednio ustawi kilka waciwoci. Przede wszystkich chce-
my usun podkrelenie, którym zazwyczaj s oznaczane wszystkie odnoniki,
oprócz tego ich waciwoci

display

przypiszemy warto

block

, by mo na byo

okrela ich marginesy i wypenienia. Oto styl okrelajcy posta zakadek:

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

Oczywicie, mo na przypuszcza, e bdziesz chcia uzupeni t regu stylu
o dodatkowe waciwoci, by zakadki wyglday naprawd wspaniale. Mógby
na przykad o ywi je, okrelajc kolor ta, zmieni czcionk, jej kolor i wielko,
by tekst zakadek wyró nia si wród pozostaej treci kart.

Aktywna zakadka. Bardzo dobrym pomysem jest wyró nienie zakadki skoja-
rzonej z aktualnie widoczn kart. To rodzaj sygnau „jeste tutaj”, który wizu-
alnie identyfikuje informacje prezentowane na karcie. Popularnym rozwiza-
niem stosowanym w tym celu jest utworzenie stylu, który przy u yciu jQuery
zostanie dodany do zakadki po jej klikniciu. Nie ma adnych obowizkowych
waciwoci, które musielibymy umieszcza w tym stylu, jednak warto nada
zakadce taki sam kolor ta, który ma powizana z ni karta (a jednoczenie za-
pewni, by pozostae zakadki miay inny kolor ta), gdy dziki temu zakadka
oraz karta bd tworzyy wizualn cao:

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

Kup książkę

Poleć książkę

C Z I 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 informacji
przy uyciu kart

318

Wskazówka:

Czsto stosowanym rozwizaniem jest dodawanie obramowa wokó zakadek i kart.

Po klikniciu zakadki ukrywamy jej dolne obramowanie, co sprawia wraenie, jakby zakadka zostaa

zespolona z kart (patrz rysunek 10.1). Aby powstao takie rozwizanie, na pocztek w regule

.tabs

naley doda waciwo

border

oraz przypisa dolnemu marginesowi (

margin-bottom

) warto

-1px

. Zastosowanie wartoci ujemnej spowoduje przesunicie zakadki o jeden piksel w dó, co sprawi,

e bdzie ona zachodzi na kart. Dodatkowo w regule

.tabs a.active

naley nada dolnej krawdzi

obramowania kolor odpowiadajcy kolorowi ta kart. W ten sposób, cho krawd obramowania wci

bdzie wywietlana, ze wzgldu na to, e bdzie ono mie ten sam kolor, co to karty, a dodatkowo

bdzie zachodzi na jej obramowanie, bdzie si wydawao, e zakadka i karta stanowi jedno. (Aby

takie rozwizanie dziaao w przegldarce Internet Explorer 8 oraz jej wczeniejszych wersjach, ko-

nieczne jest take dodanie do reguy stylu waciwoci

position:relative

). W ko cu, moemy take

doda obramowanie do pojemnika zawierajcego karty — powinno ono mie taki sam styl, grubo

i kolor, co obramowanie uyte w stylu .tabs a. Ostateczny efekt zastosowania takich stylów mona

zobaczy w przykadzie zamieszczonym na stronie 320.

Pojemnik kart. Bardzo wa ny jest styl okrelajcy posta znacznika

<div>

, we-

wntrz którego s umieszczone poszczególne karty i ich zawarto. Poniewa
w stylu dla zakadek u ylimy waciwoci

float:left

(aby przegldarka wy-

wietlia je jedn obok drugiej), zatem musimy zadba, by dalsza zawarto na-
szego komponentu bya prawidowo wywietlana poni ej zakadek. W przeciw-
nym razie przegldarka spróbuje wywietli j z ich prawej strony.

.panelContainer {
clear: left;
}

Dodatkowo tego stylu mo na u y w celu okrelenia postaci kart. Poniewa
pojemnik ten tworzy prostokt wokó wszystkich kart, mo na w nim okreli
kolor ta, obramowanie, wypenienie i tak dalej.

Karty. Zgodnie z informacjami podanymi w poprzednim punkcie listy, do okre-
lenia podstawowych aspektów wygldu kart, takich jak obramowanie, kolor ta
i podobne, mo na u y reguy stylów odnoszcej si do pojemnika, w którym s
one umieszczone. Gdy jednak bdziemy chcieli, mo emy tak e okreli regu
stylów odnoszc si do poszczególnych znaczników

<div>

tworzcych karty.

Wystarczy w tym celu zdefiniowa regu stylu z selektorem

.panel

Zawarto kart. Do okrelenia postaci zawartoci umieszczonej na kartach mo -
na zastosowa selektory elementów potomnych, które pozwol odwoywa si
do znaczników wewntrz elementów

<div>

tworzcych karty. Aby na przykad

okreli posta znaczników

<h2>

umieszczonych wewntrz kart i wywietli ich

zawarto czcionk Arial, w kolorze pomaraczowym, moglibymy u y nast-
pujcego stylu:

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

Podobnie, by okreli posta akapitów na kartach, nale aoby u y selektora w po-
staci

.panel p

Kup książkę

Poleć książkę

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

Organizowanie informacji
przy uyciu kart

319

Kod JavaScript

Przygotowalimy ju kod HTML oraz arkusz stylów CSS i mo emy zobaczy zakadki
wywietlone w rzdzie u góry komponentu oraz trzy znaczniki

<div>

(karty), umiesz-

czone poni ej, jeden nad drugim (patrz rysunek 10.2). Podstawowy wygld kompo-
nentu jest zatem zgodny z naszymi zamierzeniami. Musimy jeszcze napisa kod
JavaScript, który bdzie obsugiwa otwieranie i zamykanie kart, zmienia klasy oraz
pozwala na wyró nianie aktywnej zakadki i przywracanie pozostaych do standar-
dowej postaci. Oto czynnoci, jakie trzeba wykona.

Rysunek 10.2.

Struktura kodu

HTML panelu kart jest stosunko-
wo prosta; skada si ze znaczni-
ka <div>, listy wypunktowanej,
kilku odnoników oraz kilku kolej-
nych znaczników <div>

Doda obsug zdarze

click

do odnoników w zakadkach.

Panele kart s nierozerwalnie zwizane z iteracj u ytkownika z zakadkami
— kliknicie pierwszej zakadki powoduje wywietlenie pierwszej karty, klik-
nicie innej — wywietlenie odpowiadajcej jej karty.

Doda funkcj anonimow obsugujc zdarzenia

click

, która:

(a)

Ukryje aktualnie widoczn kart,

(b)

Usunie klas

active

z wybranej wczeniej zakadki,

(c)

Doda klas

active

do kliknitej zakadki,

(d)

Wywietli kart skojarzon z kliknit zakadk.

Kup książkę

Poleć książkę

C Z I 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 informacji
przy uyciu kart

320

Zgosi zdarzenie

click

dla pierwszej zakadki.

Ten krok jest konieczny, gdy w momencie wywietlania strony widoczne s
wszystkie karty, a adna zakadka nie jest wyró niona. Oczywicie, mo na na-
pisa kod, który wyró ni pierwsz zakadk oraz ukryje wszystkie karty z wyjt-
kiem pierwszej, jednak takie rozwizanie nie jest konieczne — mamy do dyspo-
zycji funkcj anonimow obsugujc zdarzenia

click

(patrz krok 2.), która zrobi

to za nas. Mo emy si zatem ograniczy do programowego „kliknicia” pierw-
szej zakadki, co spowoduje wykonanie tej funkcji.

Tak ogólnie wyglda kod, który musimy napisa. Napiszesz go krok po kroku w ra-
mach przykadu, przedstawionego w nastpnym punkcie rozdziau.

Przykad — panel kart

Skoro ju rozumiesz podstawowe zao enia zwizane z tworzeniem panelu kart,
tu znajdziesz opis czynnoci, jakie musisz wykona, by go ostatecznie uruchomi.
W tym przykadzie dodasz kody CSS oraz JavaScript, które przeksztac prost list
odnoników przedstawion na stronie 316 w interaktywny pasek nawigacyjny.

Uwaga:

Informacje dotyczce pobierania przykadów do ksiki mona znale na stronie 43.

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

Plik tabs.html zawiera kod HTML opisany na stronie 315: nadrzdny znacznik

<div>

caego panelu karty, wypunktowan list odnoników penicych role

zakadek, kolejny znacznik

<div>

zawierajcy karty oraz po jednym znaczniku

<div>

dla ka dej karty. Znajdziesz w nim tak e podstawowe style CSS. Jeli wy-

wietlisz ten plik w przegldarce, zobaczysz trzy zakadki i zawarto trzech kart
(wszystkie te karty s rozmieszczone w pionie, jedna nad drug).

Uwaga:

Starajc si w moliwie jak najwikszym stopniu poprawi przejrzysto przykadu, uywany

kod CSS umiecilimy bezporednio w kodzie HTML strony, w formie arkusza wpisanego. Jeli masz

zamiar wielokrotnie korzysta z niego podczas tworzenia wasnych paneli kart, umie go w ze-

wntrznym pliku CSS.

Plik biblioteki jQuery zosta ju doczony do strony, a w sekcji nagówka znaj-
duje si wywoanie funkcji

$(document).ready()

. Kolejnym krokiem, jaki wy-

konasz, bdzie ukrycie kart.

Kliknij puste miejsce wewntrz funkcji

$(document).ready()

i wewntrz

niej dodaj poniszy kod wyróniony pogrubieniem:

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

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

Wywoanie

$('.tabs a')

pobiera wszystkie znaczniki

<a>

umieszczone we-

wntrz elementu klasy

tabs

(czyli naszej wypunktowanej listy). (Funkcja

click()

Kup książkę

Poleć książkę

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

Organizowanie informacji
przy uyciu kart

321

zostaa opisana na stronie 175). Aktualnie dysponujesz pust funkcj anoni-
mow, musisz zatem uzupeni jej kod. Zaczniesz od prostej instrukcji, która
pozwoli poprawi wydajno dziaania kodu.

Wewntrz funkcji anonimowej wpisz poniszy, pogrubiony kod:

$('.tabs a').click(function() {
$this = $(this);
}); // koniec funkcji click

Zgodnie z informacjami podanymi na stronie 162, wyra enie

$(this)

stosowane

wewntrz funkcji anonimowej obsugujcej zdarzenia pozwala odwoa si do
elementu, do którego zdarzenie zostao skierowane — w naszym przypadku
odwouje si ono do zakadki kliknitej przez u ytkownika. Za ka dym razem,
gdy u ywamy wyra enia

$()

do pobrania elementu, wywoujemy funkcj jQuery,

zmuszajc tym samym przegldark do wykonania wielu wierszy kodu JavaScript.
Jeli wewntrz jakiej funkcji bdziemy wielokrotnie u ywali jakiego selektora
jQuery, doskonaym pomysem bdzie zapisanie go w zmiennej. W powy szym
przykadzie

$this

jest zwyczajn zmienn zdefiniowan przez programist (czyli

przez Ciebie).

Zapisanie wartoci wyra enia

$(this)

w zmiennej oznacza, e gdy tylko b-

dziesz chcia odwoa si do odnonika, wystarczy skorzysta ze zmiennej

$this

— nie bdziesz musia ponownie pobiera go przy u yciu selektora jQuery. In-
nymi sowy, jeli w kodzie funkcji dwukrotnie pojawi si wywoanie

$(this)

bdzie to oznacza, e przegldarka musi dwukrotnie wykona funkcj jQuery
w celu pobrania tego samego elementu. Jeli za pierwszym razem zapiszesz war-
to

$(this)

w zmiennej —

$this

— bdziesz móg z niej wielokrotnie korzy-

sta bez zmuszania przegldarki do wykonywania jakichkolwiek dodatkowych
czynnoci (bardziej szczegóowe informacje o zaletach, jakie daje zapisywanie
selektorów jQuery w zmiennych, mo na znale na stronie 422).

Teraz zajmiesz si ukryciem kart i aktywacj kliknitej zakadki.

Wpisz kod z wierszy 3. i 4. poniszego 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 ka da z nich jest znacz-
nikiem

<div>

nale cym do klasy

panel

, selektor

$('.panel')

pobiera je wszyst-

kie, a wywoanie funkcji

.hide()

(patrz strona 198) powoduje ich ukrycie. Mu-

sisz to zrobi, gdy w przeciwnym razie po otworzeniu jednej karty poprzednia
pozostaaby widoczna.

Wiersz 4. usuwa klas

active

ze wszystkich zakadek — odnoników umiesz-

czonych w elemencie nale cym do klasy

tabs

. Na stronie 317 wyjanilimy,

e utworzenie klasy

active

pozwoli zmieni wygld zakadki kliknitej przez

u ytkownika (by wygldaa jak wizualny sygna „jeste tutaj”). Oczywicie, kiedy
u ytkownik kliknie zakadk, by j uaktywni, trzeba usun klas

active

z za-

kadki, która do tej pory bya aktywna. I wanie to robi kod z wiersza 4., u ywa-
jc przy tym funkcji

removeClass()

(opisanej na stronie 155). Teraz zajmiesz

si wyró nieniem kliknitej zakadki.

Kup książkę

Poleć książkę

C Z I 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 informacji
przy uyciu kart

322

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

Pamitasz zapewne, e

$this

jest zmienn, utworzon w wierszu 2., która za-

wiera odwoanie do kliknitego odnonika. A zatem wywoanie

$this.addClass

´('active')

dodaje do tego odnonika klas

active

— przegldarka u yje jej do

okrelenia postaci kliknitej zakadki. Umieszczone na kocu wiersza wywo-
anie funkcji

.blur()

korzysta z techniki tworzenia sekwencji wywoa, jak

daje biblioteka jQuery (która zostaa opisana na stronie 149). To zwyczajna
funkcja wywoywana po wykonaniu funkcji

addClass()

. Funkcja ta usuwa

ognisko wprowadzania z wybranego elementu (odnonika lub pola formularza).
W naszym przypadku jej wywoanie sprawi, e przegldarka nie bdzie wywie-
tla wokó tekstu kliknitego odnonika cienkiej, przerywanej linii. Gdybymy
jej nie wywoali, zakadka nie wygldaaby równie dobrze.

I to ju prawie wszystko... jeszcze tylko musisz wywietli kart.

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

Ka da zakadka jest w rzeczywistoci odnonikiem wskazujcym powizan z ni
kart. Pamitasz zapewne, e kod HTML karty wyglda w nastpujcy sposób:

; natomiast kod HTML odpowiadajcej

mu zakadki to:

. Zwró uwag, e zawarto atrybutu

href

odnonika wyglda dokadnie 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 u y jej do pobrania karty, któr

chcemy wywietli. W wierszu 6. tworzymy now zmienn —

panel

— w której

zapisujemy warto atrybutu

href

odnonika (u ywana przy tym funkcja

attr()

jQuery zostaa opisana na stronie 159).

W wierszu 7. korzystamy z odczytanej wczeniej wartoci do pobrania karty
i stopniowego jej wywietlenia (u ywamy przy tym funkcji

fadeIn()

opisanej

na stronie 200). Moglibymy j zastpi jakkolwiek inn funkcj jQuery gene-
rujc efekty wizualne, tak jak

show()

slideDown()

animate()

Teraz, gdy ju prawie cay kod jest gotowy, musimy programowo wygenerowa
zdarzenie

click

podczas wczytywania strony, spowoduje to wywoanie funkcji,

ukrycie kart, wyró nienie pierwszej zakadki i wywietlenie skojarzonej z ni
karty. Na szczcie, jQuery pozwala w bardzo prosty sposób symulowa zgo-
szenie zdarzenia.

Kup książkę

Poleć książkę

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

Organizowanie informacji
przy uyciu kart

323

Poniej funkcji

click()

dodaj jeszcze jeden wiersz, powodujcy zgosze-

nie zdarzenia

click

dla pierwszej zakadki.

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
9 $('.tabs li:first a').click();

Jak wida, w wyró nionym wierszu zastosowalimy zo ony selektor —

.tabs

li:first a

— który su y do pobrania pierwszej zakadki. Selektor ten (podob-

nie jak wszystkie inne selektory elementów potomnych) nale y analizowa od
strony prawej do lewej. Litera

umieszczona z prawej strony selektora oznacza,

e chodzi o pobranie znacznika

<a>

. Umieszczony w rodkowej czci acuch

li:first

korzysta z pseudoelementu

first

pobierajcego pierwszy element

potomny. W naszym przypadku cay ten fragment selektora pozwala pobra
znacznik

<li>

bdcy pierwszym dzieckiem innego elementu. Poniewa za-

kadki zostay utworzone przy u yciu listy, zatem

li:first

odpowiada pierw-

szemu elementowi tej listy (czyli pierwszej zakadce). I w kocu fragment

.tabs

pozwoli mie pewno, e pobierzemy odnonik umieszczony na licie bdcej
czci naszego panelu kart. Zabezpiecza on przed przypadkowym pobraniem
odnonika zapisanego na innej licie wypunktowanej (na przykad penicej rol
paska nawigacyjnego), umieszczonej w innym miejscu strony.

Po pobraniu interesujcego nas elementu wywoujemy funkcj

click()

; jednak

w tym przypadku nie su y ona do okrelenia funkcji anonimowej obsugujcej
zdarzenia

click

, lecz do jego zgoszenia. Innymi sowy, wywoanie umieszczone

w wierszu 9. oznacza: „hej, przegldarko — kliknij pierwsz zakadk”. Zgosze-
nie tego zdarzenia powoduje ca sekwencj czynnoci: ukrycie kart, wyró nie-
nie zakadki i stopniowe wywietlenie odpowiedniej karty. O rany! To ju prawie
wszystko. Gdyby jednak stron w tej postaci wywietli w przegldarce, zauwa-
yby pewnie jeden, niewielki problem. Poniewa zakadki s odnonikami, gdy
zatem okno przegldarki bdzie niewielkie, mo na zaobserwowa, e po klik-
niciu zakadki przegldarka nie tylko wywietli odpowiedni kart, lecz tak e
do niej przeskoczy. Musisz zatem poinstruowa przegldark, by nie przechodzia
do miejsca docelowego odnonika.

Na ko cu anonimowej funkcji obsugujcej zdarzenia

click

(patrz wiersz 9.)

dodaj instrukcj

return false;

. A tak powinna wyglda ostateczna wersja

kodu:

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 click
11 $('.tabs li:first a').click();
12 }); // koniec funkcji ready

Kup książkę

Poleć książkę

C Z I 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 informacji
przy uyciu kart

324

Zapisz plik i wywietl stron w przegldarce.

Dokoczona przykadowa strona powinna wyglda tak, jak przedstawiona na
rysunku 10.3. Mo na j poszerzy o wicej zakadek i kart, dodajc do listy ko-
lejne punkty z odnonikami wskazujcymi kolejne znaczniki

<div>

reprezen-

tujce nowe karty.

Rysunek 10.3.

Panele zakadek stanowi elegancki sposób zapewnienia uytkownikom atwego dostpu do

wielu informacji przy jednoczesnym oszczdzaniu miejsca na stronie

Uwaga:

Pen wersj tego przykadu — complete_tabs.html — mona znale w katalogu R10. Dodat-

kowo umiecilimy tam take bardziej zoon wersj tego samego przykadu, pozwalajc na

umieszczanie na jednej stronie kilku paneli kart. Znajdziesz j w pliku complete_complex_tabs.html.

Zostay w niej zastosowane zaawansowane funkcje jQuery suce do poruszania si po drzewie

DOM strony, opisane w dalszej czci ksiki, na stronie 432.

Kup książkę

Poleć książkę

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

Dodawanie sliderów

325

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

Projekt jQuery UI

Bardziej zaawansowan wersj panelu kart mona zna-

le w projekcie jQuery UI. Jest to oficjalny projekt ze-

spou jQuery, którego celem jest pisanie wtyczek roz-

wizujcych popularne zadania zwizane z tworzeniem

interfejsu uytkownika; s to „akordeony” (ang. accor-

dion), karty, okna dialogowe, kalendarze oraz elemen-

ty stron, które mona przeciga. Uczestnicy projektu

d do opracowania jednej wtyczki, która zapewnia-

by moliwo rozwizania wikszoci problemów napoty-

kanych podczas tworzenia interfejsu uytkownika apli-

kacji internetowych. Projekt ten ma swoj wasn witryn

WWW (http://jqueryui.com/), na której mona znale

najnowsz wersj kodu, przykady oraz odnonik do do-

kumentacji umieszczonej na gównej witrynie jQuery.

Projekt jQuery UI udostpnia wiele narzdzi dla projek-

tantów stron, a nawet obsuguje tematy CSS — pozwa-

lajce na zapewnienie wspólnego, spójnego wygldu

wszystkich elementów jQuery UI. Projekt ten jest sto-

sunkowo zoony i w jego skad wchodzi wiele rónych

elementów. Pliki projektu mona take modyfikowa

i dostosowywa do wasnych potrzeb — usuwa z nich

komponenty, których nie bdziemy potrzebowa, ogra-

niczajc tym samym wielko pliku i skracajc czas je-

go pobierania. Mona nawet tworzy wasne tematy

CSS dopasowujce wygld komponentów jQuery UI do

wygldu naszej witryny. Cay ten proces uatwia specjal-

ne narzdzie suce do przygotowywania pliku jQuery UI,

dostpne na stronie http://jqueryui.com/donwload.

W poprzednim wydaniu tej ksiki wtyczka jQuery UI bya

uywana w kilku rozdziaach, jednak w midzyczasie ze-

spó jej twórców zdecydowa si na cakowite przepisa-

nie jej kodu i dodanie wielu nowych, fascynujcych kom-

ponentów oraz moliwoci. Niestety, w czasie pisania tej

ksiki najnowsza wersja wtyczki jQuery UI (numer 1.9)

nie bya jeszcze dostpna, dlatego te nie warto traci

czasu na poznawanie grupy komponentów, które i tak

niebawem zostan zastpione. Dlatego w tym wydaniu

ksiki jQuery UI i jej komponenty nie zostay 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 zostaa ju

opublikowana; jeli tak, sprawd j koniecznie.

Dodawanie sliderów

Kolejnym narzdziem u ywanym przez projektantów stron do walki ze zbyt wielk
liczb prezentowanych informacji s slidery (ang. content slider) — proste kompo-
nenty interfejsu u ytkownika, prezentujce jedno wybrane zdjcie lub fragment treci,
wybrane z wikszej grupy. Wiele witryn zawierajcych bardzo du e iloci informacji,
takich jak witryna firmy Microsoft, korzysta ze sliderów w celu prezentowania zdj,
tekstów oraz odnoników w niewielkich fragmentach, które s przesuwane po ekra-
nie i zastpowane 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 ich
pojawianie si i znikanie jest zazwyczaj obsugiwane przy u yciu liczników czasu.
S one powszechnie stosowane na stronach gównych, gdy maj bardzo atrakcyjn
posta, a jednoczenie pozwalaj na zachowanie prostoty strony. Czsto u ywa si
ich tak e jako zwiastunów reklamujcych treci lub produkty opisane na innych
stronach witryny. Kliknicie karty takiego slidera zazwyczaj powoduje przejcie na
inn stron.

Kup książkę

Poleć książkę

C Z I 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

Dodawanie sliderów

326

Rysunek 10.4.

Aby zminimalizowa natok informacji na ekranie, witryny, takie jak Microsoft.com, korzystaj

ze sliderów (na rysunku jeden zosta zaznaczony czarn ramk), wewntrz których prezentowane s obrazki
lub fragmenty treci, po jednym w danej chwili. W przedstawionym przykadzie zaznaczony obrazek moe zo-
sta wysunity na bok, odsoni si wtedy inny obrazek z kolejnymi informacjami

Utworzenie slidera wymaga opanowania kilku mo liwoci jzyka JavaScript i biblio-
teki jQuery, a konkretnie tworzenia animacji, korzystania z liczników czasu oraz
manipulacji kodem HTML i CSS. Cho — oczywicie — mo na utworzy swój
wasny slider, jednak istnieje sporo wtyczek jQuery udostpniajcych wiele przydat-
nych mo liwoci. Jedn z najbardziej wszechstronnych wtyczek tego typu jest Any-
thingSlider (kod mo na pobra ze strony https://github.com/ProLoser/AnythingSlider/).

Stosowanie slidera AnythingSlider

Do dziaania wtyczki AnythingSlider potrzebujemy kilku plików; s to jQuery
(co chyba oczywiste), zewntrzny plik JavaScript z kodem obsugujcym slider,
plik CSS ze stylami okrelajcymi podstawowy wygld slidera i stosowanych w nim
efektów oraz obrazek z kontrolkami slidera (przyciskami nastpny i poprzedni).
Pliki te mo na pobra ze strony https://github.com/ProLoser/AnythingSlider/. (Doda-
limy je tak e do przykadów doczonych do tej ksi ki i umiecilimy w katalogu
z przykadami do tego rozdziau). Aby skorzysta z tej wtyczki, nale y wykona na-
stpujce, bardzo proste czynnoci.

Doczy do strony plik CSS anythingslider.css.

Ten zewntrzny arkusz stylów CSS okrela sposób formatowania przycisków
nawigacyjnych slidera, jak równie ukryte style su ce do waciwego rozmiesz-
czania poszczególnych kart. Istnieje mo liwo okrelania postaci podstawo-
wych elementów slidera poprzez modyfikowanie regu CSS umieszczonych
w tym pliku.

Kup książkę

Poleć książkę

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

Dodawanie sliderów

327

Doczy do strony plik biblioteki jQuery.

Biblioteka jQuery udostpnia wszystkie podstawowe narzdzia niezbdne do
utworzenia i obsugi slidera AnythingSlider. Podobnie jak podczas korzystania
ze wszystkich innych wtyczek jQuery, tak e i teraz na pocztek nale y wczyta
sam plik biblioteki. Jeli wtyczka zostanie wczytana przed bibliotek jQuery,
slider nie bdzie dziaa.

Doczy plik JavaScript z kodem wtyczki AnythingSlider.

Ten plik zawiera cay kod odpowiadajcy za przeksztacenie kodu HTML w in-
teraktywny slider.

Doda kod HTML.

AnythingSlider nie wymaga adnego skomplikowanego kodu HTML. Nale y
tylko okreli pojemnik — znacznik

<div>

z identyfikatorem slidera:

<div id=

´"slider">

— a wewntrz niego umieci po jednym znaczniku

<div>

dla ka -

dej z kart. Jak wida, rozwizanie to w znacznym stopniu przypomina panel
kart (opisany na stronie 315).

Doda znacznik

<script>

, a wewntrz niego umieci wywoanie funkcji

$(document).ready()

, w której z kolei wywoana 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-
ni ej odwoania dodanego w kroku 3. poni szego fragmentu kodu:

Istnieje wiele ró nych sposobów okrelania postaci slidera AnythingSlider, o czym
przekonasz si dalej w tym rozdziale. Jednak najpierw sprawd, jak taki slider dziaa.

Przykad — AnythingSlider

Utworzenie prostego slidera jest bardzo proste. Przekonasz si o tym, wykonujc
przedstawiony tu przykad. Mo esz w tym celu wykorzysta dowolny edytor HTML.

Uwaga:

Informacje dotyczce pobierania przykadów doczonych do tej ksiki mona znale na

stronie 43.

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

Pierwszym krokiem bdzie dodanie do strony pliku CSS wtyczki.

Kliknij pusty wiersz umieszczony poniej wiersza

<link href="../_css/

´site.css" rel="stylesheet">

i wpisz w nim:

Ten wiersz kodu wczytuje arkusz stylów anythingslider.css, zawierajcy style
okrelajce posta slidera. Zawartoci tego pliku przyjrzymy si dokadniej nieco
póniej, kiedy bdziemy zajmowali si aktualizacj wygldu naszego komponen-
tu. Kolejnym krokiem bdzie dodanie do strony niezbdnych plików JavaScript.

Kup książkę

Poleć książkę

C Z I 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

Dodawanie sliderów

328

W kolejnych dwóch wierszach wpisz poniszy kod:

Pierwszy z powy szych znaczników

powoduje wczytanie pliku biblio-

teki jQuery, natomiast drugi wczytuje plik wtyczki AnythingSlider. Kolejnym
krokiem bdzie dodanie do strony kodu HTML.

Wskazówka:

W tym przykadzie zakadamy, e pliki JavaScript oraz CSS wtyczki s umieszczone

w odrbnym katalogu anythingSlider, umieszczonym wewntrz katalogu z przykadami do rozdziau

— R10. Umieszczenie wszystkich plików wymaganych do prawidowego dziaania wtyczki w osob-

nym katalogu jest doskonaym sposobem zagwarantowania, e wszystkie bd si znajdoway tam,

gdzie powinny; takie rozwizanie uatwia take wykorzystanie wtyczki na innych witrynach. Jeli

podobaj Ci si efekty dziaania wtyczki AnythingSlider, wystarczy, e skopiujesz katalog anythingSlider

na swoj witryn (umie go w katalogu gównym bd wewntrz katalogu, gdzie przechowywane s

pliki JavaScript).

W kodzie strony odszukaj znacznik nagówka poziomu pierwszego —

<h1>Anything Slider</h1>

— i w wierszu poniej niego wpisz:

</div>

Jak wida, u ylimy tu znacznika

<div>

(czyli znacznika HTML su cego do

definiowania regionów stron WWW). Ten konkretny znacznik bdzie reprezen-
towa sam komponent slidera. Wewntrz niego umiecisz kolejne znaczniki

<div>

— po jednym dla ka dej z kart slidera.

Wewntrz elementu

<div>

slidera (czyli pomidzy otwierajcym znacz-

nikiem

<div>

i zamykajcym znacznikiem

</div>

) wpisz:

Ten drugi znacznik

<div>

zawiera odnonik i obrazek. Kliknicie obrazka spo-

woduje przejcie na inn stron: takie rozwizanie jest powszechnie stosowane
w sliderach, które bardzo czsto speniaj rol animowanych reklam na stronie.
Ka da karta slidera jest swoistym zwiastunem reklamujcym inne treci, a za-
tem u ytkownicy mog j klikn, by przej do artykuu lub innego fragmentu
witryny.

Gdy wykorzystamy slider AnythingSlider, w kartach bdziemy mogli umiesz-
cza dowolny kod HTML — nasze mo liwoci nie s ograniczone do jednego
du ego zdjcia. Mo na w nich umieszcza tekst, obrazki oraz inne znaczniki

<div>

— niemal wszystko, co tylko zechcemy.

Wewntrz elementu

<div>

slidera dodaj kolejne dwa znaczniki

<div>

Kup książkę

Poleć książkę

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

Dodawanie sliderów

329

<a href="page3.html"><img src="images/various.jpg" width="700"

´height="390"
alt="Rozmaitoci"></a>
</div>

Te dwa zagnie d one znaczniki

<div>

reprezentuj kolejne karty. Mo esz ich

doda tyle, ile zechcesz. Teraz nadszed czas, by zabra si za pisanie kodu
JavaScript.

W górnej czci pliku, poniej drugiego znacznika

<script>

, lecz przed za-

mykajcym znacznikiem

</head>

, dodaj pusty wiersz i wpisz w nim:

Mo esz w to uwierzy lub nie, jednak wszystko, co musisz zrobi, to pobranie
znacznika

<div>

slidera —

$('#slider')

— i wywoanie funkcji

anything

´Slider()

. Ca reszt zajmie si ju sama wtyczka.

Zapisz plik i wywietl stron w przegldarce.

Strona powinna wyglda tak, jak przedstawiona na rysunku 10.5. (Jeli jednak
tak nie wyglda, powiniene ponownie sprawdzi jej kod. Mo esz go porówna
z plikiem complete_slider.html, zawierajcym kocow, pen wersj kodu przy-
kadu). Wypróbuj dziaanie elementów sterujcych: strzaka w prawo powoduje
wywietlenie nastpnej karty, a strzaka w lewo — karty poprzedniej, przyciski
z cyframi pozwalaj przej do konkretniej karty, a przycisk Start uruchamia
automatyczny pokaz slajdów.

Modyfikowanie wygldu slidera

Jak wida, stosowanie wtyczki AnythingSlider jest bardzo proste. Oczywicie, do-
mylny wygld slidera nie musi wcale pasowa do projektu naszej witryny i mo e
si zdarzy, e nie bdziemy chcieli bd potrzebowali wszystkich jego mo liwoci
(takich jak automatyczny pokaz slajdów lub przyciski pozwalajce przechodzi do
nastpnej lub poprzedniej karty). Wygld slidera AnythingSlider mo na zmienia
na kilka sposobów: modyfikujc pliki graficzne, wprowadzajc zmiany w arkuszach
stylów oraz ustalajc opcje wtyczki (ten sposób zosta opisany w nastpnym punk-
cie rozdziau).

Dziki zastosowaniu techniki „sprajtów CSS” jeden plik graficzny spenia wiele za-
da — okrela normalny i „wyró niony” stan strzaek do przodu i do tyu, zawiera
to przycisków z numerami kart oraz ustala posta przycisku Start (wicej informacji
na temat tej techniki mo na znale na stronie http://css-tricks.com/css-sprites/).
Mo esz otworzy ten plik w dowolnym programie graficznym i zmodyfikowa
wygld przycisków strzaek, ka dy z nich ma wymiary 45×140 pikseli.

Mo na tak e modyfikowa arkusz stylów i w ten sposób wypywa na posta po-
kazu slajdów. Poni ej zamieszczono list najczciej stosowanych zmian, z których,
by mo e, bdziesz chcia skorzysta.

Kup książkę

Poleć książkę

C Z I 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

Dodawanie sliderów

330

Rysunek 10.5.

Przy uyciu wtyczki AnythingSlider mona szybko utworzy interaktywny pokaz slajdów, by zwróci

uwag uytkownika na wybrane strony witryny lub prezentowane na niej produkty

Wysoko oraz szeroko slidera. Pierwsza regua stylu zapisana w pliku
anythingslider.css —

#slider

— okrela ogóln szeroko i wysoko kom-

ponentu. Szeroko (

width

) mo na zmienia, by tworzy szersze bd w sze

prezentacje; a wysoko (

height

) regulowa, jeli prezentowana zawarto

ma inn wysoko ni domylne 390 pikseli.

Kolor przycisków nawigacyjnych. Przyciski z cyframi wywietlane u dou slide-
ra s zazwyczaj zielone. Jeli jednak nie podoba Ci si ten kolor, mo esz zmo-
dyfikowa regu stylu z bardzo zo onym selektorem

div .anythingSlider.

´activeSlider .anythingControls ul a.cur, div.anythingSlider.active
´Slider .anythingControls ul a

. Zmie podany w niej kolor o wartoci

#7C9127

na dowolny inny, lepiej odpowiadajcy projektowi Twojej witryny. Jeli

chciaby tak e okreli kolor czcionki, dodaj do reguy waciwo

color

, na

przykad:

color: #F44439;

Kolor przycisków wskazanych mysz. Mo esz tak e zmieni kolor ta przy-
cisków nawigacyjnych, u ywan w nich czcionk oraz dowolne inne aspekty
ich wygldu; wystarczy w tym celu zmodyfikowa regu stylu z selektorem

div

.anythingSlider .anythingControls ul a:hover

. W domylnej postaci

usuwa ona z przycisku obraz ta (cie).

Kup książkę

Poleć książkę

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

Dodawanie sliderów

331

Aktualnie wybrany przycisk nawigacyjny. Aby okreli styl wyró niajcy
przycisk skojarzony z aktualnie wybran kart, nale y doda do arkusza regu
z selektorem

div.anythingSlider .activeSlider .anythingControls ul

a.cur

i okreli w nim kolor ta, czcionk i tak dalej. Wa ne jest, by regua ta

bya umieszczona w arkuszu stylów poni ej reguy opisanej w punkcie „Kolor
przycisków nawigacyjnych”; alternatywnie mo esz tak e zmodyfikowa opisan
tam regu stylu, usuwajc z niej selektor

div.anythingSlider .activeSlider

.anythingControls ul a.cur

. Poniewa w stylu podanym wczeniej jest ju

okrelony kolor ta, zatem przesoni on kolor podany w tej regule, chyba e zo-
stanie ona umieszczona bli ej koca arkusza stylów.

Kolory przycisków rozpoczynajcych i zatrzymujcych prezentacj. Posta
przycisków su cych do rozpoczynania i zatrzymywania automatycznej pre-
zentacji kart jest kontrolowana przy u yciu dwóch stylów. Aby zmieni zielone
to oraz czcionk przycisku rozpoczynajcego prezentacj, nale y zmodyfikowa
regu stylu z selektorem

div.anythingSlider .start-stop

. Z kolei modyfi-

kujc regu z selektorem

div .anythingSlider .start-stop.playing

, mo na

zmieni czerwony kolor przycisku przerywajcego automatyczn prezentacj.

Usunicie cieni oraz inne zmiany wygldu przycisków nawigacyjnych. Jeli
nie podobaj Ci si cienie widoczne przy przyciskach nawigacyjnych oraz ob-
sugujcych automatyczn prezentacj, powiniene zmodyfikowa reguy sty-
lów z selektorami

div.anythingSlider .anythingControls ul a

oraz

div

.anythingSlider .start-stop

. Konkretnie rzecz biorc, musisz usun z nich

waciwo

border-image

. Mo esz tak e zmodyfikowa waciwoci

border-

´radius

-moz-border-radius

oraz

–webkit-border-radius

, by cakowicie

usun lub zmieni promie okrgych wierzchoków tych przycisków. Ogólnie
mówic, style te okrelaj podstawowe aspekty wygldu przycisków slidera, za-
tem warto z nimi poeksperymentowa, by przekona si, jakie efekty mo na za
ich pomoc uzyska.

Zielone obramowania powyej i poniej prezentacji. Powy ej oraz poni ej
slidera wywietlane jest zielone obramowanie o szerokoci trzech pikseli.
Aby je zmieni, nale y zmodyfikowa styl z selektorem

div.anythingSlider

.anythingWindow

. Jeli chcesz cakowicie usun obramowanie, usu wa-

ciwoci

border-top

oraz

border-bottom

; ewentualnie zmodyfikuj podane

w nich wartoci, by zmieni kolor bd szeroko obramowania.

Pooenie przycisków strzaek. Poo enie przycisków pozwalajcych na przej-
cie do poprzedniej i nastpnej karty mo na kontrolowa, modyfikujc odpo-
wiednio regu stylu z selektorem

div.anythingSlider .back

(strzaka w lewo)

oraz

div.anythingSlider .right

(strzaka w prawo). Oprócz tego, regua z se-

lektorem

div.anythingSlider .arrow

okrela pewne wspólne aspekty wygldu

obu tych przycisków, w tym ich poo enie porodku obszaru slidera. Gdyby na
przykad chcia wywietli te przyciski bli ej górnej krawdzi slidera, wystarczy,
e zmodyfikujesz styl

div.anythingSlider .arrow

, zmieniajc waciwo

top: 50%

top: 20%

bd nawet na warto bezwzgldn wyra on w pikselach

—

top: 45px

Kup książkę

Poleć książkę

C Z I 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

Dodawanie sliderów

332

Modyfikacja dziaania slidera

Ju sama modyfikacja arkusza stylów CSS pozwala na wprowadzenie wielu zmian
w wygldzie slidera. By jednak wprowadzi fundamentalne zmiany w sposobie
dziaania tej wtyczki, konieczne jest okrelenie wartoci kilku jej waciwoci. W tym
celu trzeba przekaza do niej odpowiedni litera obiektowy (patrz strona 158):

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

W tym przykadzie

buildArrows

jest waciwoci wtyczki, natomiast

false

—

przypisywan jej wartoci. Zastosowanie tej konkretnej wartoci sprawi, e
wtyczka nie wywietli w sliderze strzaek do przechodzenia pomidzy kolejnymi
kartami. Za ka d par nazwa-warto, z wyjtkiem ostatniej, nale y umieci prze-
cinek (zwró uwag, e nie ma go za par

stopText : "Zatrzymaj prezentacj"

Ten litera obiektowy nale y nastpnie przekaza w wywoaniu funkcji

anything

´Slider()

. Oto przykad:

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

Poni ej przedstawiono kilka najbardziej przydatnych opcji.

Ukrycie przycisków nawigacyjnych. Aby ukry przyciski ze strzakami,
nale y przypisa warto

false

waciwoci

buildArrows

buildArrows : false

Zmiana etykiet przycisków. Aby zmieni teksty wywietlane po wskazaniu przy-
cisków rozpoczynajcego i przerywajcego automatyczn prezentacj, nale y
je poda we waciwociach

startText

oraz

stopText

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

Wyczenie automatycznego odtwarzania. By mo e nie bdziesz chcia wy-
wietla przycisków do rozpoczynania i przerywania automatycznej prezentacji,
bo preferujesz zapewnienie u ytkownikowi mo liwoci samodzielnego wyboru
karty, która ma by widoczna. W takim przypadku powiniene przypisa war-
to

false

waciwoci

buildStartStop

buildStartStop : false

Animacja w pionie. Aby karty w sliderze byy przesuwane w kierunku piono-
wym, a nie w poziomie, przypisz warto

true

waciwoci

vertical

vertical : true

Automatyczne odtwarzanie. Jeli chcesz, by w momencie wywietlenia strony
rozpoczynaa si automatyczna prezentacja kart slidera, przypisz warto

true

waciwoci

autoPlay

autoPlay : true

Kup książkę

Poleć książkę

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

Okrelanie wielkoci
i pooenia elementów

333

Automatyczne rozpoczynanie prezentacji jest bardzo popularnym rozwiza-
niem, czsto wykorzystywanym na witrynach ze sliderami — pozwala wywie-
tli wicej treci bez koniecznoci zmuszania u ytkownika do klikania przy-
cisku „rozpocznij pokaz”.

Karty o rónej wielkoci. Jeli zawartoci poszczególnych kart s ró nej wiel-
koci, mo esz za da, by okno slidera zmieniao wielko i dostosowywao si
do wymiarów zawartoci aktualnie prezentowanej karty. Zaó my na przykad,
e pierwsza karta zawiera znacznik

<div>

, wewntrz którego zosta umieszczony

pojedynczy akapit tekstu; natomiast na drugiej karcie mamy znacznik

<div>

zawierajcy nagówek, dwa du e zdjcia oraz trzy akapity tekstu. Jeli w takim
przypadku waciwoci

resizeContents

przypiszesz warto

true

, slider bdzie

automatycznie zmienia swoj wielko, dostosowujc si do wielkoci zawarto-
ci prezentowanej karty. W naszym przypadku w sliderze prezentowana jest po-
cztkowo karta z jednym akapitem, a zatem jego wysoko bdzie niewielka.
Jednak po klikniciu przycisku i przejciu do nastpnej karty — o znacznie wik-
szej zawartoci — wysoko slidera zostanie powikszona. Aby zapewni takie
dziaanie komponentu, umie w literale obiektowym nastpujc waciwo:

resizeContents : true

Aby przekona si, jakie efekty daje zastosowanie niektórych sporód tych wa-
ciwoci, wywietl w przegldarce przykadow stron complete_slider2.html.

Jak moge si przekona, zarówno umieszczanie komponentu AnythingSlider na
stronie, jak i dostosowywanie jego wygldu i dziaania do wasnych potrzeb jest ca-
kiem proste. Przedstawilimy tu jednie drobny uamek wszystkich mo liwoci tej
wtyczki. Pozwala ona tak e na prezentowanie klipów wideo, dodawanie efektów
specjalnych oraz stosowanie wasnego kodu JavaScript, który zapewni, e prezen-
towany slider bdzie dziaa dokadnie tak, jak chcemy. Wicej informacji na ten temat
mo na znale w Wiki wtyczki AnythingSlider, dostpnej na stronie https://github.
com/ProLoser/AnythingSlider/wiki.

Okrelanie wielkoci i pooenia elementów strony

Okrelanie wielkoci
i pooenia elementów

Podczas dynamicznego modyfikowania zawartoci stron lub dodawania do nich no-
wych treci z wykorzystaniem jzyka JavaScript i biblioteki jQuery czsto bardzo
przydatna mo e si okaza znajomo rozmiaru oraz poo enia elementów strony.
Przykadowo mo e si zdarzy, e bdziesz chcia wywietli nad zawartoci strony
dodatkow warstw, tak zwan nakadk (ang. overlay; tworzy ona efekt, w którym
zawarto strony zostaje „wyszarzona”, podobny do tego, jaki daje wtyczka FancyBox
opisana na stronie 244). W tym celu konieczne jest dodanie do strony bezwzgldnie
umieszczonego znacznika

<div>

, który przykryje ca zawarto okna przegldarki.

Aby to zrobi, trzeba mie pewno, e znacznik ten bdzie mia dokadnie takie same
wymiary jak okno programu, a to oznacza, e trzeba bdzie w jaki sposób je okreli.

Gdybymy chcieli utworzy etykietki ekranowe — niewielkie okienka wywietlane,
gdy u ytkownik umieci wskanik myszy w obszarze jakiego elementu — koniecz-
ne bdzie okrelenie wspórzdnych wskanika myszy, co pozwoli umieci etykietk
w odpowiednim miejscu.

Kup książkę

Poleć książkę

C Z I 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

Okrelanie wielkoci
i pooenia elementów

334

Okrelanie wysokoci i szerokoci elementów

Biblioteka jQuery udostpnia funkcje

.height()

oraz

.width()

, które zwracaj od-

powiednio wysoko i szeroko wybranego elementu strony. Podajc odpowiedni
selektor, mo na okreli wymiary dowolnego znacznika wchodzcego w skad strony,
a nawet caego okna przegldarki lub caej zawartoci dokumentu.

Wysoko i szeroko okna przegldarki. Jeli chcesz pozna wysoko i sze-
roko okna przegldarki, musisz u y selektora

$(window)

, a nastpnie wy-

woa funkcj

height()

lub

width()

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

Powy szy fragment kodu pobiera wysoko oraz szeroko okna przegldarki
i zapisuje je w dwóch zmiennych. Pobieranie wymiarów okna przegldarki jest
przydatne, 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-
gldarki, i w wikszoci przypadków ma zupenie inne wymiary. Dokument re-
prezentuje nasz stron WWW; jeli umiecimy na niej tylko niewielki fragment
tekstu — na przykad jeden akapit — dokument bdzie mia wysoko tego aka-
pitu (powikszon dodatkowo o marginesy górny i dolny). Na du ym monitorze
wysoko takiego dokumentu bdzie mniejsza od wysokoci okna przegldarki.

W odwrotnej sytuacji — gdy zawarto strony jest bardzo obszerna i u ytkow-
nik musi j przewija, by dotrze do jej koca — wysoko dokumentu bdzie
wiksza od wysokoci okna. Podobnie, gdyby zmodyfikowa styl okrelajcy po-
sta znacznika

<div>

, wewntrz którego umieszczona jest caa zawarto strony,

i nada mu szeroko 1500 pikseli, okazaoby si, e szeroko dokumentu jest
wiksza od szerokoci okna przegldarki. Aby okreli wysoko i szeroko do-
kumentu, wywoania metod

height()

width()

nale y poprzedzi selektorem

$(document)

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

Funkcji

heigth()

oraz

width()

mo na tak e u ywa do okrelania wymiarów

zwyczajnych elementów HTML, takich jak akapity, sekcje (znaczniki

<div>

) czy

te obrazki, jednak w takich przypadkach nie zawsze bd one zwraca te infor-
macje, których poszukujemy. Funkcje te zwracaj wartoci waciwoci

height

oraz

width

CSS, a te nie zawsze s takie same jak faktyczne wymiary elementów

strony. Waciwoci te okrelaj wymiary przydzielane zawartoci znacznika, czyli
na przykad tekstowi umieszczonemu wewntrz akapitu. Kiedy jednak dodamy
do elementu marginesy, wypenienie oraz obramowanie, cakowity obszar, jaki
zajmuje na stronie, bdzie wikszy od tego, co wskazuj waciwoci

height

width

Aby zrozumie, jak to dziaa, przeanalizujmy poni szy, przykadowy kod CSS
okrelajcy posta znacznika

<div>

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

Kup książkę

Poleć książkę

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

Okrelanie wielkoci
i pooenia elementów

335

Schemat tego elementu zosta przedstawiony na rysunku 10.6. Rzeczywista wyso-
ko i szeroko tego elementu na stronie bdzie wynosi 360 pikseli, gdy stanowi
sum wysokoci (lub szerokoci) wypenienia oraz obramowania. A zatem, faktyczna
szeroko elementu jest sum gruboci jego lewego obramowania, szerokoci lewego
wypenienia, szerokoci okrelonej w stylu CSS, szerokoci prawego wypenienia
oraz gruboci prawego obramowania; analogicznie, faktyczna wysoko jest sum
gruboci górnego obramowania, wysokoci górnego wypenienia, wysokoci okrelonej
w stylu CSS, wysokoci dolnego wypenienia oraz gruboci dolnego obramowania.

Rysunek 10.6.

Podczas stosowania stylów CSS wysoko i sze-

roko s prostymi zagadnieniami. Waciwoci width i height
CSS okrelaj wtedy wycznie wymiary zawartoci elementu.
Jednak faktyczna szeroko i wysoko obszaru, jaki element
zajmuje na stronie, wyliczana jest poprzez dodanie do wymia-
rów zawartoci elementu take wielkoci jego wypenienia
i obramowania

Ze wzgldu na te wszystkie wymiary jQuery udostpnia trzy zestawy funkcji su -
cych do okrelania ró nych szerokoci i wysokoci elementów strony. Oto one.

width()

height()

— funkcje te zwracaj szeroko i wysoko podane w stylu

CSS. Zaó my na przykad, e strona zawiera znacznik

<div>

, którego posta

okrela przestawiona powy ej regua CSS.

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

Po wykonaniu powy szego fragmentu kodu zmiennym

divW

oraz

divH

zostanie

przypisana warto

300

— czyli szeroko i wysoko okrelone w stylu CSS.

Funkcja

innerWidth()

zwraca szeroko elementu podan w stylu CSS powik-

szon o szeroko prawego i lewego wypenienia, a funkcja

innerHeight()

—

wysoko elementu podan w stylu CSS powikszon o wysoko górnego i dol-
nego wypenienia:

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

W tym przypadku zmienne

divW

oraz

divH

przyjm warto

340

, odpowiadajc

szerokoci (i wysokoci) podanej w regule stylu, powikszonej o wymiary wy-
peniania z obu stron elementu.

Funkcja

outerWidht()

zwraca szeroko podan w stylu CSS, powikszon

o szeroko prawego i lewego wypenienia oraz grubo prawego i lewego obra-
mowania; analogicznie, funkcja

outerHeight()

zwraca wysoko elementu

podan w stylu CSS, powikszon o wysoko górnego i dolnego wypenienia oraz
grubo górnego i dolnego obramowania.

Kup książkę

Poleć książkę

C Z I 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

Okrelanie wielkoci
i pooenia elementów

336

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

Po wykonaniu powy szego fragmentu kodu w zmiennych

divW

oraz

divH

zosta-

nie zapisana warto

360

, czyli szeroko (i wysoko) podana w regule CSS, po-

wikszona o wielko wypenienia i grubo obramowania z obu stron elementu.

Funkcje

outerWidht()

oraz

outerHeight()

pobieraj tak e jeden dodatkowy

argument — warto

true

, której przekazanie sprawi, e funkcje te bd uwzgld-

niay w obliczeniach tak e wielko marginesów elementu. Przykadowo zaó my,
e posta znacznika

<div>

jest okrelana przy u yciu nastpujcej reguy CSS:

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

Warto zwróci uwag na waciwo

margin: 20px

. Jeli chcesz, by w wyliczanej

szerokoci i wysokoci elementu zostay uwzgldnione te marginesy, musisz
wywoa funkcje

outerWidth()

oraz

outerHeight()

w nastpujcy sposób:

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

To, których funkcji nale y u y, zale y od tego, co chcemy osign. Zaó my, e
chcemy zasoni czarnym prostoktem pewien tekst wywietlony na stronie — na
przykad odpowied na pytanie quizowe — a póniej go wywietli. Jednym z poten-
cjalnych rozwiza bdzie zasonicie odpowiedzi prostoktem z czarnym tem.
W takim przypadku mo emy u y funkcji

width()

oraz

height()

, by okreli wy-

miary samego tekstu (z pominiciem wypenie i obramowa), i na podstawie po-
branych wartoci okreli wymiary prostokta, który nastpnie wywietlimy nad
tekstem.

A teraz dla odmiany zaó my, e tworzymy wasn wersj znanej gry Pong, w której
niewielka pieczka odbija si od krawdzi pola gry. Oczywicie, bdziemy chcieli, by
pieczka cay czas pozostawaa wewntrz wyznaczonego obszaru (znacznika

<div>

który najprawdopodobniej bdzie mia wywietlone obramowanie). W tym przypad-
ku potrzebna jest znajomo wymiarów caego obszaru wewntrz obramowa, co
pozwoli upewni si, e animowana pieczka nie „wyleci” poza element oraz jego
krawdzie. W takim przypadku powinnimy skorzysta z funkcji

innerHeight()

oraz

innerWidth()

, gdy pieczka mo e si znale w dowolnym miejscu wewntrz

pudeka elementu, nawet jeli bdzie on mia wypenienie.

Uwaga:

Funkcji

innerHeight()

innerWidth()

outerHeight()

oraz

outerWidth()

nie naley

stosowa podczas okrelania wymiarów okna przegldarki (z selektorem

$(window)

) czy dokumentu

(z selektorem

$(document)

). W tych dwóch przypadkach mona korzysta wycznie z funkcji

height()

width()

Kup książkę

Poleć książkę

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

Okrelanie wielkoci
i pooenia elementów

337

Okrelanie pooenia elementu na stronie

Znajomo poo enia elementu na stronie przydaje si bardzo czsto, na przykad
chcemy wywietli nad obrazkiem etykiet ekranow, kiedy u ytkownik wska e go
mysz. Poo enie tej etykiety powinno by zale ne od poo enia obrazka na stronie
— oznacza to, e musimy najpierw okreli poo enie obrazka, a dopiero potem na
jego podstawie wyliczy wspórzdne miejsca, gdzie ma si pojawi etykieta. Biblio-
teka jQuery udostpnia kilka funkcji uatwiajcych okrelanie poo enia elementów
na stronie. Oto one.

Funkcja

offset()

. Jej wywoanie zwraca obiekt zawierajcy waciwoci

top

left

, okrelajce odpowiednio poo enie lewego, górnego wierzchoka elementu

od górnej oraz lewej krawdzi dokumentu. Przykadowo zaó my, e kiedy u yt-
kownik wska e mysz obrazek, chcemy wzdu jego górnej krawdzi wywietli
opis. W takim przypadku musimy zna poo enie obrazka. Zaó my dodatkowo,
e obrazek ten ma identyfikator

captionImage

. Wspórzdne okrelajce jego

poo enie mo na pobra przy u yciu nastpujcego wywoania:

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

W efekcie, w zmiennej

imagePosition

zostan zapisane wspórzdne obrazka.

S one zapisane w obiekcie JavaScript, z którego mo na je odczyta, stosujc za-
pis z kropk, opisany na stronie 82. Wspórzdna pozioma jest zapisana we
waciwoci

left

, natomiast wspórzdna pionowa — we waciwoci

top

imagePosition.top // liczba pikseli od górnej krawdzi dokumentu
imagePosition.left // liczba pikseli od lewej krawdzi dokumentu

Zaó my teraz, e chcemy u y tych informacji, by wywietli na stronie znacz-
nik

<div>

o identyfikatorze

caption

. Mo emy u y funkcji

.css()

jQuery

(patrz strona 155), by okreli jego waciwoci CSS

top

left

oraz

position

i tym samym wywietli go w odpowiednim miejscu strony:

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

Uwaga:

Funkcje

offset()

oraz

position()

zwracaj wspórzdne wyraone w pikselach nawet

wtedy, kiedy pooenie elementu na stronie zostanie okrelone przy uyciu takich jednostek jak em lub

wartoci procentowe.

Funkcja

position()

. Wywoanie tej funkcji zwraca obiekt zawierajcy wspó-

rzdne elementu liczone wzgldem jego pierwszego przodka, w którego stylach
CSS zostaa okrelona warto waciwoci

display

. Zrozumienie tego wcale

nie jest atwe, posu ymy si zatem przykadem dwóch elementów

div

przed-

stawionych na rysunku 10.7. Oba te elementy zostay umiejscowione w sposób
bezwzgldny; poo enie elementu

outerBox

jest okrelone wzgldem dokumentu,

natomiast poo enie elementu

innerBox

, którego kod HTML jest umieszczony

wewntrz elementu

outerBox

, wzgldem zewntrznego znacznika

<div>

. Po-

o enie elementu zewntrznego jest okrelane wzgldem dokumentu, gdy nie
jest on umieszczony wewntrz adnego innego znacznika HTML, w którym

Kup książkę

Poleć książkę

C Z I 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

Okrelanie wielkoci
i pooenia elementów

338

Rysunek 10.7.

Biblioteka jQuery udostpnia dwie

funkcje pozwalajce na okrelanie wspórzdnych
elementu na stronie. Gdy na stronie jeden element
umiejscowiony bezwzgldnie (#innerBox) zostanie
umieszczony wewntrz innego elementu umiejsco-
wionego bezwzgldnie (#outerBox), funkcje te zwró-
c róne wyniki

waciwoci CSS

display

zostaa przypisana warto

absolute

relative

fixed

. W przypadku tego elementu funkcja

position()

zwróci dokad-

nie takie same wyniki, co funkcja

offset()

, a zatem wywoanie:

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

zwróci obiekt, którego waciwo

left

bdzie miaa warto

100

, a waci-

top

warto

300

. Takie wartoci zostay podane w regule stylów dla tego

elementu.

Jednak w przypadku wewntrznego znacznika

<div>

— o identyfikatorze

inner

´Box

— którego poo enie jest okrelane wzgldem elementu zewntrznego,

wywoania funkcji

offset()

position()

zwróc inne wyniki:

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

Teraz funkcja

offset()

zwróci wspórzdne liczone wzgldem caego doku-

mentu, czyli 300 pikseli na prawo od lewej krawdzi dokumentu i 550 pikseli
poni ej jego górnej krawdzi. Natomiast funkcja

position()

zwróci wartoci

podane w regule stylów CSS dla tego elementu.

Zazwyczaj bardziej przydatna z tych dwóch funkcji jest

offset()

, gdy pozwala okre-

li poo enie elementu w odniesieniu do caej strony i dostarcza informacje potrzebne
do wyznaczenia wspórzdnych elementu wzgldem innego elementu strony.

Wskazówka:

Funkcji

offset()

mona take uywa do ustawiania pooenia elementu na stronie.

Wystarczy w tym celu przekaza w jej wywoaniu obiekt, co pokazano na poniszym przykadzie:

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

W tym przypadku wspórzdne musz by okrelane w pikselach — nie mona stosowa innych

jednostek, takich jak

(na przykad

20em

) lub wartoci procentowe (na przykad 20%).

Kup książkę

Poleć książkę

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

Okrelanie wielkoci
i pooenia elementów

339

Uwzgldnianie przewinicia strony

Strony WWW bardzo czsto s wiksze od okna przegldarki, w którym s prezen-
towane: dokumenty HTML zawierajce bardzo obszern zawarto niejednokrot-
nie s wy sze, a zdarza si tak e, e i szersze od okna przegldarki. Aby wtedy przej-
rze ca zawarto strony, u ytkownik musi j przewija (patrz rysunek 10.8). Kiedy
u ytkownik przewija stron, cz jej treci przestaje by widoczna. Przykadowo stro-
na przedstawiona na rysunku 10.8 zostaa przewinita nieco w dó i w prawo, co spra-
wia, e jej fragmenty przy górnej i lewej krawdzi nie s widoczne. Oznacza to, e
górny, lewy wierzchoek okna przegldarki nie bdzie si pokrywa z górnym, lewym
wierzchokiem dokumentu. Jeli w takim przypadku spróbujemy wywietli jaki
element, na przykad animowany pasek reklamowy, u góry ekranu, po przypisaniu
waciwociom

top

left

wartoci

pojawi si problemy. Bd one spowodowane

tym, e element zosta umieszczony w lewym, górnym wierzchoku dokumentu, lecz
poza fragmentem strony, który jest aktualnie widoczny w oknie przegldarki.

Rysunek 10.8.

Czsto

zdarza si, e wielko
strony wykracza poza
wymiary okna prze-
gldarki. W takich
przypadkach uytkow-
nik musi j przewija,
by wywietli poczt-
kowo niewidoczne
fragmenty. Niemniej
jednak, cho w danej
chwili wida tylko
cz dokumentu,
przegldarka zawsze
dysponuje ca jego
zawartoci

Na szczcie, biblioteka jQuery udostpnia dwie funkcje pozwalajce na okrele-
nie, o jaki dystans strona zostaa przewinita w pionie oraz w poziomie (inaczej
mówic, zwracaj one liczby okrelajce w pikselach, jaki fragment dokumentu
znajduje si powy ej górnej krawdzi okna przegldarki oraz poza jego lew kraw-
dzi). Poni szy fragment kodu pozwala okreli wysoko fragmentu dokumentu
umieszczonego nad górn krawdzi okna przegldarki:

$(document).scrollTop()

Kup książkę

Poleć książkę

C Z I 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

Dodawanie etykietek
ekranowych

340

By natomiast okreli szeroko obszaru dokumentu umieszczonego poza lew
krawdzi okna, mo na u y nastpujcego wywoania:

$(document).scrollLeft()

Obie te funkcje zwracaj wielkoci liczbowe wyra one w pikselach, z których
mo na skorzysta podczas wyliczania wspórzdnych elementów na stronie. Jeli
na przykad chcemy wywietli okienko na rodku strony, nawet jeli zostaa ona
nieco przewinita w pionie, trzeba bdzie okreli, o jaki dystans zostaa przewi-
nita, i przesun wywietlane okienko o odpowiedni odcinek w dó strony. Du
ostro no nale y tak e zachowa w przypadku wywietlania etykietek ekranowych
na przewinitych stronach — bardzo atwo doprowadzi do sytuacji, w której ety-
kietka bdzie wywietlana w obszarze strony, lecz poza jej fragmentem, który w da-
nej chwili jest widoczny w oknie przegldarki. Dlatego te w 12. kroku opisu kolej-
nego przykadu, zamieszczonym na stronie 349, zobaczysz, jak skorzysta z funkcji

scrollTop()

, by chroni si przed wywietlaniem etykietek nad górn krawdzi

prezentowanego w przegldarce obszaru strony.

Dodawanie etykietek ekranowych

Etykietki s czsto stosowanym sposobem prezentowania informacji uzupe-
niajcych. S to niewielkie, wyskakujce okienka, wywietlane po wskazaniu
mysz wybranego elementu strony — odnonika, sowa, obrazka i tym podobnych.
Czsto s one stosowane do wywietlania definicji sowa, podpisu pod zdjciem,
a nawet bardziej szczegóowych informacji, takich jak czas, koszt oraz lokalizacja
jakiego zdarzenia.

Podstawowa zasada dziaania etykietek ekranowych jest bardzo prosta: wskazu-
jemy wybrany element mysz i wywietlamy inny element (zazwyczaj bdzie nim
znacznik

<div>

) w pobli u wskazanego; po usuniciu wskanika myszy z obszaru

elementu etykietka znika. Poznae ju sposoby tworzenia kodu JavaScript nie-
zbdnego do zaimplementowania takiego rozwizania, zatem bez przeszkód mo emy
opisa cay 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 posu y do zdefinio-
wania zarówno elementu wyzwalajcego wywietlenie etykiety (czyli tego, który na-
le y wskaza mysz), jak i samej etykiety. Podstawowe aspekty wygldu etykiety
ustalimy przy u yciu arkusza stylów CSS, natomiast kod JavaScript pozwoli ukry
etykiet w momencie wczytywania strony. Dodatkowo okrelimy tak e procedur
obsugi zdarze

hover

i dodamy j do wszystkich elementów strony, dla których

chcemy wywietla etykiety.

Kod HTML

Etykieta ekranowa skada si z dwóch elementów: samej etykiety, czyli elementu
wywietlanego na stronie, gdy u ytkownik wska e mysz element wyzwalajcy, oraz
tego elementu wyzwalajcego, którym mo e by dowolny inny element strony, taki
jak obrazek, odnonik, nagówek bd znacznik

<span>

Kup książkę

Poleć książkę

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

Dodawanie etykietek
ekranowych

341

Rysunek 10.9.

Etykiety ekranowe s niewielkimi okienkami zawierajcymi dodatkowe informacje. S one wy-

wietlane, kiedy uytkownik wskae mysz okrelony element strony, tak zwany element wyzwalajcy (zosta
zakrelony na rysunku), oraz ukrywane, gdy wska nik myszy zostanie usunity z obszaru tego elementu

Etykieta jest znacznikiem

<div>

nale cym do klasy

tooltip

i posiadajcym unikalny

identyfikator. Wewntrz tego znacznika mo na umieci dodatkowy kod HTML,
chocia by nagówki, akapity tekstu i obrazki. Nie nale y jednak umieszcza w nich
odnoników, gdy nie bd dziaay prawidowo — przesunicie wskanika myszy
do obszaru etykiety w celu kliknicia odnonika spowoduje usunicie go z obszaru
elementu wyzwalajcego, co sprawi, e etykieta zniknie.

Oto bardzo prosty kod etykiety ekranowej:

<div class="tooltip" id="aardvarkTooltip">
<h2>Mrówkojad</h2>
<p>redniej wielkoci ssak ryjcy, prowadzcy nocny tryb ycia;
wystpuje
gównie w Afryce.</p>
</div>

Cho znaczniki

<div>

etykiet mo na umieci w dowolnym miejscu kodu HTML

strony (w kocu przez znaczn wikszo czasu i tak s one niewidoczne), jednak
najlepszym rozwizaniem jest umieszczenie ich tu przed zamykajcym znacz-
nikiem

</body>

. To optymalne miejsce, gdy pozwala unikn wszelkich dziwnych

problemów zwizanych ze sposobem prezentacji treci, które mogyby powsta po
umieszczeniu etykiet wewntrz innego elementu, pozycjonowanego wzgldnie lub
bezwzgldnie.

Elementem wyzwalajcym mo e by dowolny element strony — znacznik

<h1>

<div>

lub

<img>

. Jeli chcemy, by elementem wyzwalajcym byo sowo lub grupa

sów, trzeba je umieci wewntrz znacznika

<span>

. Do prawidowego dziaania

elementu wyzwalajcego niezbdne s dwie informacje.

Kup książkę

Poleć książkę

C Z I 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

Dodawanie etykietek
ekranowych

342

Nazwa klasy. Wszystkie elementy wyzwalajce musz nale e do tej samej klasy,
na przykad

trigger

. Nazwa klasy jest niezbdna, by kod JavaScript móg od-

szuka wszystkie te elementy i doda do nich procedury obsugi zdarze od-
powiadajce za wywietlanie i ukrywanie etykiet.

Dane identyfikujce etykiet. Ka dy element wyzwalajcy jest skojarzony z jedn
etykiet. Etykieta ta jest znacznikiem

<div>

, który zazwyczaj jest niewidoczny,

lecz mo na go wywietli, gdy u ytkownik umieci wskanik myszy na odpo-
wiednim elemencie wyzwalajcym. Ka da etykieta musi posiada unikalny iden-
tyfikator, a my musimy dysponowa jakim sposobem skojarzenia elementu
wyzwalajcego z odpowiednim znacznikiem

<div>

etykiety, dziki któremu

bdziemy wiedzieli, jaki znacznik

<div>

wywietli, kiedy u ytkownik wska e

mysz element wyzwalajcy. Prostym rozwizaniem jest umieszczenie identy-
fikatora etykiety w jakim atrybucie znacznika elementu wyzwalajcego (warto
doda przed nim znak

, dziki czemu pobranie etykiety przy u yciu jQuery bdzie

naprawd bardzo proste). Jzyk HTML5 pozwala na dodawanie danych do
znaczników HTML, jeli nazwa atrybutu rozpoczyna si od cigu znaków

data-

Przykadowo zaó my, e elementem wyzwalajcym dla naszej etykiety jest sowo
mrówkojad. Wskazanie go mysz powinno spowodowa wywietlenie etykiety
(czyli, w rzeczywistoci, znacznika

<div>

o identyfikatorze

aardvarkTooltip

Element wyzwalajcy mo emy utworzy, umieszczajc wybrane sowo wewntrz
znacznika

<span>

, co pokazano na poni szym przykadzie:

<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 mo na pobiera przy u yciu kodu JavaScript. Szczegóowy opis
tych atrybutów mo na znale na stronie http://html5doctor.com/html5-custom-
-data-attributes/.

Jeli korzystasz z jzyków XHTML 1 bd HTML 4.01 i obawiasz si proble-
mów zgodnoci ze standardami, nie bdziesz móg u ywa takich atrybutów
danych. Zamiast tego mo esz wykorzysta jeden z prawidowych atrybutów j-
zyka HTML 4, na przykad

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 rozwiza-
nia. Najprociej bdzie skorzysta z jzyka HTML5 i u y atrybutów danych.

Na jednej stronie mo na umieci dowoln liczb elementów wyzwalajcych
oraz skojarzonych z nimi etykiet.

Kod CSS

Ka dy znacznik

<div>

etykiety nale y do klasy

tooltip

, a zatem dodanie do u y-

wanego na stronie arkusza stylów reguy z selektorem

.tooltip

pozwoli okreli ich

ogólny wygld (na przykad kolor ta, obramowanie, szeroko i tak dalej). Oto wer-
sja tej reguy umieszczona w przykadowym pliku doczonym do ksi ki:

Kup książkę

Poleć książkę

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

Dodawanie etykietek
ekranowych

343

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

Bez zastosowania dodatkowych stylów u ytkownicy nie bd w stanie okreli,
e elementy wyzwalajce peni szczególn rol. Ma to szczególne znaczenie w przy-
padkach, gdy bdziemy dodawa etykiet ekranow do wybranego sowa nale cego
do wikszego akapitu tekstu. Mo na utworzy specjalny styl CSS, który wyró ni
elementy wyzwalajce — doda do nich obramowanie, kolor ta i tym podobne.
Poni sza, prosta regua dodaje doln krawd do wszystkich elementów nale cych
do klasy

trigger

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

Szczególnie u yteczna jest waciwo CSS

cursor

— kontroluje ona posta wska-

nika myszy, w czasie gdy bdzie si znajdowa w obszarze elementu. Kiedy wska-
nik myszy zostanie umieszczony w obszarze tekstu, wyglda jak kursor do zazna-
czania, jednak t posta wskanika mo na zmieni — u ycie wartoci

help

sprawi,

e bdzie wyglda jak znak zapytania (co jest dobrym rozwizaniem, gdy etykieta
zawiera definicj jakiego terminu), a wartoci

pointer

— e bdzie wyglda jak do

z wyprostowanym palcem wskazujcym, czyli w sposób standardowy dla wskanika
umieszczonego na odnoniku. Informacje o pozostaych dostpnych ksztatach
wskanika myszy mo na znale na stronie www.w3schools.com/cssref/pr_class_
cursor.asp.

Oprócz tego, do arkusza stylów mo na doda regu z pseudoelementem

:hover

okrelajc posta elementu wyzwalajcego w przypadku umieszczenia w jego ob-
szarze wskanika myszy; oto przykad takiej reguy:

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

Kod JavaScript

Najprociej rzecz ujmujc, etykieta ekranowa powinna zosta wywietlona, gdy u yt-
kownik umieci wskanik myszy w obszarze elementu wyzwalajcego, i ma znik-
n, kiedy wskanik zostanie z tego elementu usunity. Ju wczeniej, w rozdziale 6.,
dowiedziae si, jak mo na wywietla i ukrywa elementy. Jednak w tym przyka-
dzie zwyczajne wywietlenie i ukrycie elementu to za mao. Kluczow czynnoci
zwizan z wywietleniem ka dej etykiety jest umieszczenie jej w pobli u elementu
wyzwalajcego. To z kolei wi e si z koniecznoci u ycia funkcji jQuery w celu
okrelenia szerokoci, wysokoci oraz wymiarów tego elementu. I to jest najtrud-
niejsze zadanie. Aby nieco lepiej wyjani wykonywane czynnoci, w tym przyka-
dzie zdecydowalimy si podzieli opis tworzonego kodu na trzy czci.

Kup książkę

Poleć książkę

C Z I 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

Dodawanie etykietek
ekranowych

344

Ukrycie etykiet.

W momencie wczytywania strony wszystkie znajdujce si na niej etykiety
(czyli znaczniki

<div>

umieszczone na samym kocu jej treci) powinny by

ukryte. Oczywicie, mo na by to zrobi przy u yciu odpowiedniego stylu CSS
jeszcze przed wczytaniem strony, jednak w takim przypadku aden u ytkow-
nik, przegldajcy stron za pomoc przegldarki, w której zostaa wyczona
obsuga jzyka JavaScript, nie byby w stanie uzyska dostpu do treci etykiet.
Jeli informacje zamieszczone w etykietach nie s bardzo wa ne i mo na zaak-
ceptowa fakt, e niektórzy u ytkownicy (w tym tak e mechanizmy wyszuki-
wawcze) ich nie zobacz, to prosz bardzo — mo esz ukry etykiety poprzez za-
stosowanie odpowiedniego stylu CSS:

.tooltip {
display: none;
}

Dodanie do elementów wyzwalajcych procedury obsugi zdarze

hover

Czynno ta ma kluczowe znaczenie dla dziaania etykiet. Kiedy u ytkownik
wska e mysz element wyzwalajcy, musz zosta wykonane dwie operacje.

Musi zosta wywietlony znacznik

<div>

odpowiedniej etykiety.

Znacznik ten nale y umieci w pobli u elementu wyzwalajcego. W tym celu
trzeba okreli bie ce poo enie tego elementu. Dodatkowo trzeba si upew-
ni, e etykieta nie przesoni tego elementu oraz e nie bdzie wystawa
poza widoczny obszar okna przegldarki.

Dodanie do elementów wyzwalajcych procedury obsugi zdarze

mouseover

To bardzo proste zadanie — wystarczy ukry znacznik

<div>

, kiedy u ytkownik

usunie wskanik myszy z jego obszaru.

Aby przekona si, jak ten program dziaa, czas przej do przykadu, w którym
utworzysz swoje wasne etykiety ekranowe.

Przykad — etykiety ekranowe

Utworzenie prostych etykiet ekranowych naprawd nie jest trudnym zadaniem.
W tym przykadzie szczegóowo opiszemy cay ten proces. Do pracy nad tym przy-
kadem mo esz wykorzysta dowolny edytor HTML.

Uwaga:

Informacje dotyczce pobierania przykadów do ksiki mona znale na stronie 43.

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

W tym pliku zosta ju umieszczony wewntrzny arkusz stylów CSS, zawiera-
jcy kilka regu okrelajcych wygld elementów wyzwalajcych oraz etykiet. S
to dokadnie te same style, które zostay przedstawione we wczeniejszej czci
rozdziau, na stronie 342. Jednak w kodzie strony nie ma jeszcze adnych ety-
kiet — ich kod bdziesz musia doda.

Kup książkę

Poleć książkę

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

Dodawanie etykietek
ekranowych

345

Odszukaj zamykajcy znacznik

</body>

umieszczony na samym ko cu

pliku i powyej niego dodaj poniszy kod HTML tworzonej etykiety:

<div class="tooltip" id="tip1">
<h2>Etykieta</h2>
<p>To jest tekst etykiety. Zosta on umieszczony wewntrz

´znacznika div,

dziki temu mona tu umieci prawie wszystko.</p>
</div>

Najwa niejszym elementem tego kodu jest zewntrzny znacznik

<div>

. U yli-

my w nim klasy

tooltip

, co jest niezbdne zarówno po to, by okreli posta

etykiety, jak i ze wzgldu na kod programu, który utworzysz ju niebawem.
Dodatkowo w znaczniku umiecilimy unikalny identyfikator, który pozwoli
zidentyfikowa dan etykiet i skojarzy j z elementem wyzwalajcym, jaki
utworzysz w nastpnym kroku. Wewntrz etykiety mo esz umieci dowolny
kod HTML — w tym przypadku jest to nagówek oraz jeden akapit tekstu.

Odszukaj znacznik

<p>

umieszczony w kodzie bezporednio poniej

znacznika

<h1>Etykiety

ekranowe</h1>

, mniej wicej w poowie wielko-

ci pliku. Wybierz kilka sów i zapisz je pomidzy znacznikami

<span>

co pokazano na poniszym przykadzie:

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

Zastosowanie klasy

trigger

identyfikuje ten znacznik

<span>

jako element

wyzwalajcy etykiety. Jedna z regu arkusza stylów umieszczonego w sekcji na-
gówka strony formatuje dowolny znacznik nale cy do tej klasy w szczególny
sposób. Dodatkowo umieszczony w kodzie znacznika atrybut

data-tooltip

identyfikuje etykiet, z któr dany element wyzwalajcy jest skojarzony.

W nastpnym kroku dodasz do strony kolejn etykiet.

Tu poniej znacznika

<div>

dodanego w kroku 2. (lecz wci przed zamy-

kajcym 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, umiecilimy w niej nawet

´mae zdjcie!</p>

</div>

Dodae wanie drug etykiet. Zwró uwag, e u ylimy w niej tej samej na-
zwy klasy, co w poprzedniej, czyli

tooltip

. Natomiast identyfikator tego znacz-

nika jest unikalny —

tip2

. Dodatkowo wewntrz etykiety umiecilimy zdjcie.

Teraz musisz utworzy element wyzwalajcy dla tej etykiety.

Wybierz kolejnych kilka sów z jakiego akapitu tekstu i ponownie umie

je wewntrz znacznika

<span>

Zwró uwag, by poda identyfikator drugiej etykiety —

#tip2

. Nic nie stoi na

przeszkodzie, aby doda kolejne etykiety i elementy wyzwalajce; pamitaj je-
dynie, eby ka da z etykiet miaa unikalny identyfikator i podaj ten identyfikator
w atrybucie

data-tooltip

elementu wyzwalajcego skojarzonego z dan etykiet.

Teraz nadszed czas, by zaj si pisaniem kodu JavaScript. Do strony zosta ju
doczony plik biblioteki jQuery oraz wywoanie funkcji

$(document).ready()

Kup książkę

Poleć książkę

C Z I 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

Dodawanie etykietek
ekranowych

346

Kolejnym zadaniem bdzie zatem ukrycie wszystkich etykiet w momencie wczy-
tywania strony.

Kliknij pusty wiersz wewntrz funkcji

$(document).ready()

i wpisz w nim:

$('.tooltip').hide();

Ten wiersz kodu jest bardzo prosty. Wywoanie funkcji

hide()

(opisanej na

stronie 198) powoduje ukrycie wszystkich etykiet, dziki czemu u ytkownik nie
zobaczy ich zaraz po wywietleniu strony. Oczywicie, chcemy, by konkretne
etykiety pojawiay si, kiedy u ytkownik wska e mysz odpowiednie elementy
wyzwalajce, a zatem kolejnym krokiem bdzie pobranie wszystkich elemen-
tów wyzwalajcych i dodanie do nich procedury obsugi zdarze

mouseover

Poniej kodu dodanego w poprzednim kroku dodaj kolejny fragment:

$('.trigger').mouseover(function() {

}); // koniec funkcji mouseover

To szkielet kodu procedury obsugi zdarze, podobny do tego, który zosta opi-
sany na stronie 174. W tym przypadku pobieramy wszystkie elementy nale ce
do klasy

trigger

i dodajemy do nich procedur obsugi zdarze

mouseover

Funkcja ta stanowi kluczowy element naszego kodu obsugujcego etykiety ekra-
nowe, gdy to wanie ona bdzie kontrolowa wywietlanie oraz odpowiednie
rozmieszczanie etykiet na ekranie. Precyzyjne okrelenie miejsca, w którym ma
zosta wywietlona etykieta, jest dosy zo one i bdzie wymagao pobrania wielu
ró nych informacji. Dlatego te na samym pocztku tej funkcji zdefiniujesz
kilka zmiennych.

Wewntrz funkcji anonimowej dodanej w kroku 7. wpisz poniszy, 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ó-

rzdn etykiety, natomiast

ttTop

— wspórzdn pionow. Pocztkowo obie te

zmienne s puste, poniewa jeszcze nie wiemy, jakie maj by ich wartoci.

Ten sposób tworzenia zmiennych mo e 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 poni ej:

var ttLeft;
var ttTop;

Takie rozwizanie jest cakowicie prawidowe, jednak podczas tworzenia wik-
szej liczby zmiennych czsto stosuje si technik wykorzystujc tylko jedno
sowo kluczowe

var

, za którym s podawane nazwy wszystkich zmiennych od-

dzielone przecinkami. Dziki temu mo emy unikn koniecznoci wielokrot-
nego wpisywania sowa

var

. Przecinek umieszczony na kocu wiersza 3. nie

jest adnym bdem — ju zaraz dodasz do kodu kolejne zmienne.

Do kodu programu dodaj kolejn zmian (umieszczon w wierszu 4.):

1 $('.trigger').mouseover(function() {
2 var ttLeft,

Kup książkę

Poleć książkę

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

Dodawanie etykietek
ekranowych

347

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

W tym przypadku wyra enie

$(this)

odwouje si do elementu wyzwalajcego,

natomiast caa instrukcja przypisania

$this = $(this)

pozwala zapisa od-

woanie do tego elementu w zmiennej. Dokadnie to samo zrobilimy w przy-
kadzie pokazujcym sposób tworzenia panelu kart, w jego 3. kroku (opisanym
na stronie 321). Dalej w kodzie tej funkcji bdziemy wielokrotnie odwoywali
si do elementu wyzwalajcego i gdybymy za ka dym razem u ywali wywoa-
nia

$(this)

, zmuszalibymy interpreter JavaScriptu przegldarki do wielo-

krotnego wykonywania kodu funkcji jQuery, co stanowioby du e marnotraw-
stwo czasu i mocy procesora. Gdy zamiast tego zapiszemy wynik wywoania

$(this)

w zmiennej, funkcja jQuery konieczna do pobrania elementu wy-

zwalajcego zostanie wykonana tylko raz, przez co nasz program stanie si
bardziej efektywny (wicej informacji dotyczcych zalet zapisywania elementów
pobieranych przy u yciu jQuery w zmiennych mo na znale na stronie
422).

Kolejnym krokiem bdzie pobranie etykiety skojarzonej z danym elementem
wyzwalajcym.

Wskazówka:

W przypadku zapisywania elementów pobieranych przy uyciu jQuery w zmiennych

czsto stosowan praktyk jest umieszczenie na pocztku nazwy zmiennej znaku

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

Oczywicie, nie jest to konieczne; zmienna

var banner = $('#banner')

bdzie dziaa równie dobrze.

Jednak znak

przypomina o tym, e zmienna zawiera selekcj jQuery, a nie jakiekolwiek inne, zwyczajne

wartoci, takie jak a cuchy 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 u yciu jQuery znacznik etykiety. Wywo-

anie

$($this.attr('data-tooltip'))

spenia kilka zada, wic rozbijemy je

na elementy i dokadnej przeanalizujemy. Fragment umieszczony wewntrz wy-
woania jQuery

$()

—

$this.attr('data-tooltip')

— korzysta z funkcji

attr()

, by pobra warto atrybutu

data-tooltip

elementu wyzwalajcego

(pamitaj, e to wanie do niego odwouje si zmienna

$this

). Innymi sowy,

cae to wywoanie odwouje si do aktualnego elementu wyzwalajcego, odnaj-
duje jego atrybut

data-tooltip

i pobiera jego warto. Dla elementu wyzwala-

jcego dodanego w kroku 3. wywoanie to zwróci acuch znaków

'#tip1'

; na-

tomiast dla elementu dodanego w kroku 5. byaby to warto

'#tip2'

Po pobraniu wartoci atrybutu

data-tooltip

jest ona u ywana w wywoaniu

funkcji jQuery

$()

(zewntrzna funkcja wywoania zapisanego w wierszu 5. po-

wy szego kodu). Innymi sowy, w rzeczywistoci kod ten sprowadza si do wy-
woania o postaci

$('#tip1')

lub

$('#tip2')

. Hej, ale przecie Ty to znasz!

To jest zwyczajny sposób pobierania elementów przy u yciu biblioteki jQuery!

Kup książkę

Poleć książkę

C Z I 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

Dodawanie etykietek
ekranowych

348

Po wykonaniu 5. wiersza powy szego fragmentu kodu w zmiennej o nazwie

$tip

bdzie zapisany obiekt jQuery z pobran odpowiedni etykiet. Mo esz go

u y, by wywietli, animowa lub okreli poo enie etykiety na stronie.

Kolejnym zadaniem jest zgromadzenie wszystkich informacji niezbdnych do
okrelenia prawidowego poo enia etykiety na stronie.

11.

Do funkcji mouseover dodaj kod z wierszy od 6. do 12. poniszego frag-

mentu kodu:

Dodane wiersze kodu pobieraj i zapisuj w zmiennych informacje o poo eniu
oraz wymiarach kilku elementów. Schemat przedstawiony na rysunku 10.10
pomo e Ci wyobrazi sobie i zrozumie znaczenie ka dej z tych wartoci. Wida
na nim ca stron WWW (przedstawion jako szary prostokt), która jest wik-
sza od okna przegldarki (zaznaczonego jako czarna ramka). Strona zostaa nieco
przewinita w dó, zatem pewien jej fragment znalaz si powy ej górnej kraw-
dzi okna przegldarki. Co wicej, poniewa strona jest zarówno du sza, jak i szer-
sza od okna przegldarki, zatem pewne jej fragmenty s tak e ukryte poza praw
oraz doln krawdzi okna przegldarki.

Rysunek 10.10.

Ten schemat pre-

zentuje stron WWW (szary obszar),
która jest zarówno wysza, jak i szer-
sza od okna przegldarki (oznaczo-
nego jako czarny prostokt). Uyt-
kownik przegldajcy t stron
przewin j nieco ku doowi, a zatem
jej górna cz jest niewidoczna, po-
dobnie zreszt jak fragmenty poo-
one przy jej prawej oraz dolnej kra-
wdzi. Etykieta zostaa przedstawiona
jako niewielki prostokt pooony
na samym dole strony, gdy wanie
tam znajduje si bezporednio po
wczytaniu strony. Dopiero w kroku
15. dokoczysz pisanie kodu odpo-
wiedzialnego za okrelenie waciwe-
go pooenia etykiety oraz umiesz-
czenie jej w tym miejscu

Kup książkę

Poleć książkę

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

Dodawanie etykietek
ekranowych

349

Wiersz 6. powy szego fragmentu kodu pobiera wspórzdne elementu wyzwa-
lajcego (oznaczonego na rysunku 10.10 cyfr 1). Ich znajomo jest niezbdna,
gdy to wanie wzgldem tego elementu musimy okreli poo enie etykiety.

W wierszach 7. i 8. wywoywane 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
(uwzgldniajc przy tym wielkoci wypenienia i obramowania). Kolejne wiersze
— 9. i 10. — pobieraj odpowiednio szeroko (cyfra 4) oraz wysoko (cyfra 5)
etykiety. Poniewa nie chcemy, by etykieta bya wywietlana poza oknem prze-
gldarki, zatem musimy tak e zna jego szeroko (pobieramy j w wierszu 11.
powy szego fragmentu kodu, a na rysunku 10.10 zostaa ona oznaczona cyfr 6)
i wiedzie, czy u ytkownik nie przewin strony w dó (a jeli przewin, to o ile;
wiersz 12., cyfra 7). Nie mo esz tak e zapomnie o dodaniu rednika na kocu
wiersza 12., gdy wanie w nim koczy si instrukcja

var

rozpoczta w wierszu 2.

By mo e zastanawiasz si, do czego s Ci potrzebne te wszystkie informacje.
Czy nie byoby atwiej okreli poo enie elementu wyzwalajcego, a nastpnie
wywietli etykiet bezporednio nad nim? W wikszoci przypadków takie roz-
wizanie zdaoby egzamin, jednak istnieje kilka przypadków, w których nie
dziaaoby prawidowo. I tak w przypadku zilustrowanym na rysunku 10.11
element wyzwalajcy znajduje si w prawym, górnym wierzchoku okna
przegldarki, a fragment strony jest przewinity i ukryty poza górn krawdzi
okna. Gdybymy teraz umiecili etykiet bezporednio nad elementem wy-
zwalajcym, jej znaczna cz byaby niewidoczna. Innymi sowy, nasz kod mu-
si dziaa inteligentnie — powinien okreli, czy umieszczenie etykiety nad ele-
mentem wyzwalajcym nie sprawi, e jej cz znajdzie si poza oknem
przegldarki. Gdyby faktycznie tak miao si sta, nasz kod musi wyznaczy
nowe poo enie etykiety.

Trzeba zacz od sprawdzenia, czy etykieta umieszczona bezporednio nad ele-
mentem wyzwalajcym zmieci si w górnej czci okna przegldarki.

12.

Do tej samej funkcji dodaj wiersze od 13. do 17. z poniszego fragmentu kodu:

Kup książkę

Poleć książkę

C Z I 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

Dodawanie etykietek
ekranowych

350

Rysunek 10.11.

Podczas

dynamicznego rozmiesz-
czania elementów na
stronie naley zachowa
du ostrono. Nigdy
nie bdziemy wiedzie,
jakie bd wymiary okna
przegldarki, ani czy
strona nie zostaa w nim
przewinita. Jeli czynni-
ki te nie zostan wzite
pod uwag, bardzo a-
two mona umieci
element w taki sposób,
e czciowo lub nawet
w caoci znajdzie si po-
za widocznym obszarem
strony (czyli w zakresko-
wanym obszarze rysunku)

W tym krótkim fragmencie kodu dzieje si cakiem sporo, jednak jego analiz
warto zacz od przyjrzenia si, gdzie dokadnie chcemy umieci etykiet w sto-
sunku do elementu wyzwalajcego. Normalnie wywietlilibymy etykiet 10 pik-
seli ponad elementem wyzwalajcym, aby go nie przesaniaa. Aby okreli
wspórzdn pionow etykiety, nale y zacz od pobrania pionowej wspórzd-
nej elementu wyzwalajcego, nastpnie odj od niej wysoko etykiety, a wynik
pomniejszy o dodatkowe 10 pikseli. W ramach przykadu zaó my, e element
wyzwalajcy jest umieszczony 150 pikseli pod górn krawdzi strony, a ety-
kieta ma wysoko 100 pikseli. Chcemy umieci etykiet tak, aby nie przesa-
niaa elementu wyzwalajcego, nale y zatem wzi jego wspórzdn pionow
— 150 — odj 100, a od uzyskanego wyniku (50) odj jeszcze 10 (zostawiajc
w ten sposób niewielki odstp pomidzy etykiet i elementem wyzwalajcym).
W rezultacie okazuje si, e etykieta powinna by umieszczona 40 pikseli poni ej
górnej krawdzi dokumentu.

A co by si stao, gdyby element wyzwalajcy by umieszczony 10 pikseli poni ej
górnej krawdzi dokumentu, a etykieta miaa wysoko 100 pikseli? Gdybymy
bezmylnie skopiowali powy sze równanie, okazaoby si, e wspórzdna pio-
nowa etykiety wynosi –90 pikseli (10 – 100 = –90); innymi sowy, znalazaby si
ona ponad górn krawdzi dokumentu, czyli byaby niewidoczna!

I wanie w tym miejscu do akcji wkracza warunek umieszczony w wierszu 13.
Od wartoci pionowej wspórzdnej elementu wyzwalajcego odejmujemy wy-
soko etykiety oraz wielko przewinicia strony. Nastpnie sprawdzamy, czy
uzyskany wynik jest wikszy od zera (gdyby by mniejszy, etykieta zostaaby
umieszczona poza górn krawdzi okna przegldarki). W tych obliczeniach
musimy uwzgldni tak e przewinicie strony, gdy mo e si zdarzy, e etykieta
zmieci si na stronie powy ej elementu wyzwalajcego, jeli jednak strona zo-

Kup książkę

Poleć książkę

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

Dodawanie etykietek
ekranowych

351

stanie przewinita, mo e si okaza, e tak umieszczona etykieta znalazaby
si poza obszarem strony widocznym w przegldarce (wanie taka sytuacja zo-
staa przedstawiona na rysunku 10.11).

Jeli ten warunek bdzie speniony, etykieta zostanie umieszczona nad elemen-
tem wyzwalajcym (a warto wspórzdnej pionowej —

ttTop

— zostanie wy-

liczona w wierszu 14.). Jeli jednak warunek nie zostanie speniony, wykonany
bdzie wiersz 16., a etykieta pojawi si 10 pikseli poni ej dolnej krawdzi ele-
mentu wyzwalajcego (jej wspórzdn pionow wyliczamy poprzez pobranie
wspórzdnej pionowej lewego, górnego wierzchoka elementu wyzwalajcego
—

triggerPos.top

— i dodanie do niej jego wysokoci —

triggerH

Kolejn czynnoci bdzie obliczenie poziomej wspórzdnej etykiety.

Uwaga:

W opisywanym tu przykadzie etykieta jest umieszczana ponad elementem wyzwalajcym, jednak

nie znaczy to wcale, e tak ma by. Nic nie stoi na przeszkodzie, by zmieni kod skryptu i sprawdzi, czy

potrafisz wywietli etykiet poniej elementu wyzwalajcego bd z jego prawej lub lewej strony.

13.

Do tej samej funkcji dodaj wiersz 18. poniszego fragmentu:

Wyliczenie wspórzdnej poziomej etykiety jest nieco bardziej zo one ni wspó-
rzdnej pionowej. W tym przypadku nie tylko musimy wiedzie, czy fragment
etykiety jest umieszczony poza praw krawdzi okna przegldarki, lecz tak e
o ile poza ni wystaje. Przykadowo zaó my, e wspórzdna pozioma elementu
wyzwalajcego wynosi 850 pikseli (na rysunku 10.11 zostaa oznaczona liter A),
etykieta ma 250 pikseli szerokoci (zostaa oznaczona liter B), a okno przegl-
darki ma szeroko 1000 pikseli (oznaczono j liter C). Jeli w takim przypadku
etykieta zostanie wywietlona w punkcie o wspórzdnej poziomej 850 pikseli,
jej prawa krawd znajdzie si w miejscu o wspórzdnej poziomej 1100 pikseli
(A + B). A to oznacza, e prawy fragment etykiety o szerokoci 100 pikseli nie
bdzie widoczny! By wyeliminowa ten problem, musimy wiedzie, jaki fragment
etykiety wystaje poza praw krawd okna przegldarki, i odpowiednio skorygo-
wa jej wspórzdn poziom.

Kod zapisany w wierszu 18. oblicza cakowit szeroko fragmentu etykiety wy-
stajcego poza praw krawd okna przegldarki (oczywicie, o ile w ogóle jest
taki fragment). W tym celu wyliczamy wspórzdn poziom prawej krawdzi

Kup książkę

Poleć książkę

C Z I 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

Dodawanie etykietek
ekranowych

352

etykiety, zakadajc, e byaby ona umieszczona w tym samym miejscu (w po-
ziomie), co element wyzwalajcy —

triggerPos.left + tipA

(A + B, na rysunku

10.11). Od uzyskanego wyniku odejmujemy nastpnie szeroko okna prze-
gldarki (C). Jeli ostateczny wynik jest wartoci dodatni, jaki fragment ety-
kiety znajdzie si poza oknem przegldarki. Jeli jednak wynik bdzie ujemny,
bdzie to znaczy, e w oknie przegldarki jest na tyle du o miejsca, by etykieta
si w nim zmiecia w caoci.

14.

Poniej wiersza dodanego w poprzednim kroku (czyli 18. wiersza) dodaj

nastpujcy fragment kodu:

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

Najprociej rzecz ujmujc, ten fragment kodu sprawia, e jeli warto zmien-
nej

overFlowRight

jest wiksza od zera (czyli etykieta nie zmieci si w caoci

w oknie przegldarki), wspórzdna pozioma etykiety zostanie wyliczona jako
wspórzdna pozioma elementu wyzwalajcego pomniejszona o wielko, o jak
etykieta wystaje poza praw krawd okna przegldarki. Pomniejszenie wyniku
o dodatkowe 10 pikseli sprawia, e etykieta nawet nie bdzie dotyka krawdzi
okna przegldarki. Jeli jednak warto zmiennej

overFlowRight

jest mniejsza

od zera, wspórzdna pozioma etykiety mo e by taka sama jak wspórzdna
pozioma elementu wyzwalajcego —

ttLeft = triggerPos.left;

O rany — caa masa arytmetyki! Na szczcie, to ju koniec. Teraz, kiedy ju
wyliczylimy wspórzdne etykiety, mo emy j wywietli. W kocu!

15.

Do funkcji mouseover dodaj wiersze od 24. do 28. poniszego 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

Kup książkę

Poleć książkę

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

Dodawanie etykietek
ekranowych

353

W kocu nadszed moment prawdy. Korzystajc z techniki tworzenia sekwencji
wywoa funkcji jQuery (patrz strona 149), najpierw wywoujemy funkcj

.css()

(patrz strona 155) i okrelamy w ten sposób wspórzdne (waciwoci

left

oraz

top

) oraz sposób rozmieszczenia znacznika etykiety (waciwo

position

, któ-

rej przypisujemy warto

absolute

, gdy chcemy go umiejscowi w sposób

bezwzgldny), a nastpnie funkcj

fadeIn()

(patrz strona 200), która sprawi,

e etykieta stopniowo pojawi si na ekranie. Na szczcie, ukrycie etykiety, kie-
dy wskanik myszy zostanie usunity z obszary elementu wyzwalajcego, jest
znacznie atwiejsze.

16.

Doko cz tworzenie kodu, dodajc wiersze od 30. do 32.; poniej przedsta-

wiona zostaa pena, ko cowa 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 mouseover
30 $('.trigger').mouseout(function () {
31 $('.tooltip').fadeOut(200);
32 }); // koniec funkcji mouseout

Procedura obsugi zdarze

mouseover

jest bardzo prosta: w odpowiedzi na usu-

nicie wskanika myszy z obszaru elementu wyzwalajcego wystarczy zaciem-
ni wszystkie etykiety. I to wszystko. Teraz zapisz plik i wywietl go w przegl-
darce. Pen wersj kodu przykadu mo na znale w pliku complete_tooltip.html
umieszczonym w katalogu R10.

Kup książkę

Poleć książkę

C Z I 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

Dodawanie etykietek
ekranowych

354

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

Etykiety ekranowe w nieco atwiejszy sposób

Próba utworzenia wasnego narzdzia do obsugi etykiet

jest doskonaym sposobem opanowania funkcji jQuery

sucych do okrelania wymiarów i pooenia elemen-

tów. Jeli jednak poszukujesz dodatkowych moliwoci,

takich jak piknie wygldajce etykiety, komiksowe dymki,

pobieranie zawartoci dymków przy uyciu AJAX-a bd

precyzyjne umieszczanie etykiet w wybranych miejscach

strony WWW, musisz wiedzie, e istnieje wiele wtyczek

jQuery udostpniajcych znacznie wicej moliwoci ni

prosty skrypt utworzony w tym rozdziale.

qTip2 (http://craigsworks.com/projects/qtip2/)

jest bardzo rozbudowan wtyczk obsugujc ety-

kiety. Pozwala nie tylko na tworzenie prostych ety-

kiet, takich jak przedstawione w naszym przyka-

dzie, lecz take etykiet przypominajcych dymki

z komiksowymi rozmowami; pozwala take na le-

dzenie ruchu wskanika myszy przesuwanego po

ekranie, na pobieranie zawartoci etykiet z serwera

oraz udostpnia wiele innych moliwoci, midzy

innymi tworzenie okien dialogowych oraz rozwijal-

nych menu. Jak wida, wtyczka ta to prawdziwy,

wielofunkcyjny zestaw narzdziowy.

jQuery Tools Tooltip (http://jquerytools.org/demos/

tooltip/index.html) to kolejna doskonaa wtyczka

do tworzenia etykiet. Generowane przez ni ety-

kiety s bardzo atrakcyjne i maj ogromne moliwo-

ci dostosowywania. Skoro ju mowa o tej wtyczce,

warto zajrze take na stron kolekcji narzdzi

jQuery Tools (http://jquerytools.org/tools/). Jest

ona reklamowana jako „zaginiona biblioteka interfej-

su uytkownika dla stron WWW” i mimo e slogan

ten jest nieco napuszony, to jednak skrypt ten za-

spokaja wiele potrzeb twórców stron WWW. Udo-

stpnia midzy innymi narzdzia do tworzenia kart,

nakadek, formularzy oraz suwaków (podobnie jak

wtyczka AnythingSlider opisana na stronie 325).

Wtyczka jQuery UI Tooltip (http://wiki.jqueryui.com/

w/page/12138112/Tooltip). Dowiedziae si ju

o bibliotece jQuery UI w ramce zamieszczonej na

stronie 325. Zawiera ona sporo komponentów inter-

fejsu uytkownika oraz innych narzdzi przezna-

czonych dla projektantów i twórców stron WWW.

Cho w czasie pisania tej ksiki twórcy tego projektu

jeszcze nie udostpnili oficjalnie wtyczki do tworze-

nia etykiet, jednak prace nad ni s ju cakiem za-

awansowane, a wedug planu ma ona zosta udo-

stpniona w wersji 1.9 biblioteki jQuery UI. Wszystkie

wtyczki wchodzce w skad biblioteki jQuery UI s

doskonae.

Kup książkę

Poleć książkę

Skorowidz

adres URL, 41
AJAX, Asynchronous JavaScript

and XML, 357, 394
proste operacje, 358

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

Interface, 394, 426

API key, 395
apostrofy, 491
argument

callback, 373
data, 373
url, 373

arkusz stylów

anythingslider.css, 327
gallery.css, 232

atrybut

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

atrybuty

HTML, 159
znaczników, 138

automatyczna konwersja typów, 66
automatyczne uzupenianie, 406
automatyzacja tworzenia kodu, 136

bezwzgldne pozycjonowanie, 201
biblioteka jQuery, 18, 128
biblioteki, 46
biblioteki JavaScript, 128
blok deklaracji, 23
blokowanie

odnonika, 252
przesyania danych, 284

bd skadniowy, 489
bdy, 48, 380, 487

czasu wykonania, 491
logiczne, 491
skadniowe, 491
typograficzne, 214

CDN, content distribution network, 129
CSS, Cascading Style Sheets, 21, 144
cudzysowy, 491
czas trwania animacji, 214
czas wczytywania witryny, 484

dane

kanau Flickr, 398
kanau w formacie JSON, 401
uwierzytelniajce, 381
zdj, 398

daty, 289
daty i godziny, 471

dzie tygodnia, 472
format godzin, 474
miesic, 471
obiekt Date, 471
wywietlanie czasu, 475

Kup książkę

Poleć książkę

S K O R O W I D Z

524

debugger Firebug, 505
deklaracja, 23
diagnozowanie, 508
diagnozowanie zaawansowane, 503
dugo acucha, 446
dodatek Firebug, 153, , 496–511
dodawanie

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

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

formatu JSON, 396
identyfikatorów, 396
jQuery do strony, 132
kalendarzy, 289
kanau Flickr, 395
komunikatów o bdach, 296
map Google Maps, 404
plików zewntrznych, 46
regu walidacji, 294, 296
skryptu, 40
sliderów, 325
tekstu, 45
treci, 149, 368, 423
zdj, 400

dokumentacja jQuery, 426, 430
doczanie zewntrznych plików, 477
DOM, Document Object Model, 137, 361
dopasowywanie wzorców, 461
dostp do obiektu JSON

notacja tablicowa, 388
skadnia z kropk, 388

dynamiczne

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

dziaanie funkcji, 113

efekt

FancyBox, 238
powikszania, 210
rollover, 219–224
stopniowego wywietlania, 228

efekty

jQuery, 198
wizualne, 197, 199

element

data.items, 402
media, 400
pojemnika, 315
strony, 136
wyzwalajcy, 341, 343

elementy

formularza, 273
nawigacyjne mapy, 410
prezentacji, 241

etykiety ekranowe, 340, 344

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

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

filtry jQuery, 146
Firebug, 153, 496–511

console.log(), 499
instalowanie, 497
przegldanie bdów, 498

Flickr, 395
Flickr API, 395
format

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

formatowanie

danych, 373
komunikatów, 311

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

$(), 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

Kup książkę

Poleć książkę

S K O R O W I D Z

525

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

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

funkcje, 111

argumenty, 114
przekazywanie danych, 113
zwracanie wartoci, 115

funkcje

anonimowe, 160, 176
do obsugi odpowiedzi, 363
do manipulacji kodem HTML, 438
do poruszania si po DOM, 433
systemu operacyjnego, 29
wbudowane, 56
wykonawcze zdarze, 174
wywoywane zwrotnie, 373

galeria fotografii, 228
generowanie

liczby losowej, 470
zdarzenia click, 322

Google Maps, 404
gra

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

Kup książkę

Poleć książkę

S K O R O W I D Z

526

HTML, Hypertext Markup Language, 19

identyfikator

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

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

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

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

JavaScript, 15
jednostka em, 22
jzyk

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

jzyki

kompilowane, 39
serwerowe, 367
skryptowe, 39
u ywane po stronie serwera, 361

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

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

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

klasa, 154

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

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

doczania plików, 42
wykonywania operacji, 65

kolor ta, 159
komentarz jednowierszowy, 85
komentarze, 85
komentarze wielowierszowe, 85
komponenty interfejsu u ytkownika, 325
kompresja plików, 484
komunikacja przegldarki z serwerem,

360, 362

komunikaty o bdach, 293, 300, 302,

308, 489

konfigurowanie

serwera sieciowego, 362
strony z galeri, 235

konsola bdów

Chrome, 51
Firebug, 500, 504, 509
Firefox, 48, 488

Kup książkę

Poleć książkę

S K O R O W I D Z

527

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

kontrolki typu mapy, 410

liczba dopasowa, 463
liczby, 464

formatowanie, 468
generowanie, 469
Math.random(), 470
wyszukiwanie, 467
zaokrglanie, 468

lista

Czujka, 507
wypunktowana, 317
zagnie d ona, 265

literay obiektowe, 158, 246, 375
logowanie, 381, 383
losowe pobieranie, 470

acuchy wywoa funkcji, 149
acuchy znaków, 445

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

czenie

liczb i acuchów znaków, 66
acuchów znaków, 65
warunków, 97
wywoa w sekwencj, 422

mapa

hybrydowa, 409
interaktywna, 405

menu, 29

animowane, 263
nawigacyjne, 263

metoda

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

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

139

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

metody, 83

obiektu Date, 471
przesyania danych, 374

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

dziaania slidera, 332
opcji FancyBox, 240
stron WWW, 134
waciwoci CSS, 155
wygldu slidera, 329

nakadka, overlay, 333
NaN, not a number, 66
narzdzia, 24
narzdzie W3C Validator, 69
nawiasy klamrowe, 95, 111
nawigacja, 263
nazwa zastpcza funkcji, 422
nazwy zmiennych, 60, 116
negowanie warunków, 98

obiekt

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

Kup książkę

Poleć książkę

S K O R O W I D Z

528

obiekt

XMLHttpRequest, 360, 362
zdarzenia, 185

obiekty, 82

jQuery, 231
JSON, 389
zagnie d one, 391

obramowanie zakadek, 318
obsuga

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

odnonik z tekstem, 250
odnoniki, 249
odwoanie zwrotne JSONP, 397
okienka informacyjne, 415
okrelanie lokalizacji, 407
opcja

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

opcje

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

operacje na miniaturkach, 432
operator

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

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

operatory

logiczne, 97
porównywania, 92

optymalizacja selektorów, 425
otwieranie

odnoników, 253
okien, 259
strony na stronie, 262

pakiet WAMPP, 362
panel

kart, 314, 320
zakadek, 324

parametry funkcji, 113, 116
pary nazwa – warto, 373, 387
pasek nawigacyjny, 268
ptla

do-while, 109
for, 107
while, 104

ptle

automatyczne, 148
nieskoczone, 105

plik

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

Kup książkę

Poleć książkę

S K O R O W I D Z

529

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

pliki

zewntrzne, 477
zewntrzne JavaScript, 40

pobieranie

czasu, 472
elementów, 432
elementów formularzy, 273
elementów klasy, 143
elementów strony, 175
informacji, 70
informacji z witryn, 393
losowe, 470
miesica, 471
odnoników, 249
odpowiedzi, 364

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

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

poo enie

elementu, 337, 338
etykiety, 348

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

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

programy

komputerowe, 38
kompresujce, 485

projekt jQuery UI, 325
przechowywanie obrazków w pliku, 240
przechwytywanie klikni, 378
przeciganie i upuszczanie, 90
przegldarka internetowa, 360
przekazywanie

funkcji do zdarzenia, 175
wyra enia regularnego, 462
zdarze, 188

przeksztacanie

tablicy PHP, 387
listy, 268

przesyanie

formularza, 278
plików z u yciem AJAX-a, 406

Kup książkę

Poleć książkę

S K O R O W I D Z

530

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

ramka wewntrzwierszowa, iframe, 259
reakcje na zdarzenia, 186
referencje do okien, 257
reguy walidacji, 293, 295
reguy zaawansowane, 298
rodzaje bdów, 491
rozmiar

dokumentu, 334
okna, 334
zdjcia, 400

selektor, 23

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

selektory

atrybutów, 145, 253
CSS, 140
do formularzy, 274
dzieci, 144
elementów, 141
elementów potomnych, 143
elementów ssiadujcych, 144
identyfikatorów, 141, 425
klas, 142
proste CSS, 141
zaawansowane, 143

serwer aplikacji, 361

ASP.NET, 361
PHP, 361

serwer bazodanowy, 361

MySQL, 361
SQL Server, 361

serwer CDN, 130
serwer sieciowy, 361

Apache, 361
IIS Microsoftu, 361

serwis Flickr, 397
sie dystrybucji treci, 129
silnik renderujcy, 38
skala mapy, 409
skróty klawiaturowe, 29

skrypty, 38

po stronie klienta, 37
po stronie serwera, 37, 367

slider AnythingSlider, 326
slidery, 313, 325
sowa zarezerwowane, 61, 492
sowo kluczowe, 61

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

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

funkcji, 113
galerii, 229
kodu panelu kart, 319

styl #fancybox-close, 242
symbol {, 386

cie ka

bezwzgldna, 41
do obrazka, 228
do zewntrznego pliku, 494
wzgldna, 41
zapisana wzgldem strony, 494

ledzenie dziaania skryptu, 499

tablica preloadImages, 222
tablica, 72

dodawanie elementów, 77
usuwanie elementów, 79
waciwo length, 76
zapisywanie danych, 79

tablice

wielowymiarowe, 120
zagnie d one, 120

technologia AJAX, 394
tempo animacji, easing, 207, 215
testowanie wyra e regularnych, 464

Kup książkę

Poleć książkę

S K O R O W I D Z

531

tworzenie

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

typ obiektu, 84
typy danych, 56

liczby, 57
acuchy znaków, 57
wartoci logiczne, 58

ukrywanie

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

unikanie bdów, 497
ustawianie wartoci elementu

formularza, 275

usuwanie

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

u ywanie

elementów tablicy, 75
funkcji, 431
instrukcji warunkowych, 101
komentarzy, 86
ptli do-while, 109
selektorów, 425
typów danych, 63
zmiennych, 62

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

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

walidator, 21, 69, 253
warto, 23

elementu formularza, 275
null, 462
waciwoci CSS, 156
zmiennej, 67

wczytywanie rysunków, 221
wzy, node, 138
wielko liter, 446
wielko znaków, 493
waciwoci, 23, 83

CSS, 155, 157
obiektu zdarzenia, 186
okna przegldarki, 256

waciwo

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

wspórzdne

elementu, 338
elementu wyzwalajcego, 349
etykiety, 350, 352
geograficzne, 408
obrazka, 337

wstpne pobieranie, preload, 221
wtyczka

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

Kup książkę

Poleć książkę

S K O R O W I D Z

532

wtyczka

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

wtyczki do tworzenia etykiet, 354
wyczanie pól, 283, 286
wyra enia regularne, 227, 450

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

wyra enie $(this), 162, 321, 347, 423
wyró nianie wierszy, 177
wyró niany cytat, pull quote, 163
wysyanie dania, 364
wyrodkowanie mapy, 407
wywietlanie

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

wywoanie

wtyczki lightBox, 236
funkcji, 112

zagnie d anie

instrukcji, 100
literaów obiektowych, 389

zakadka aktywna, 317
zakadki, 315, 317
zamiana acucha znaków na liczb, 465
zapisywanie danych, 79
zarzdzanie zdarzeniami, 188
zasig zmiennych, 496

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

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

zestaw AMP, 362
zewntrzne pliki JavaScript, 477
zmiana waciwoci

CSS, 157
src, 220, 227

zmienianie koloru, 479
zmienna

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

zmienne, 59

globalne, 117
lokalne, 117

znacznik

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

Kup książkę

Poleć książkę

S K O R O W I D Z

533

<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, 20
znak

$, 423
cudzysowu, 58
karetki, 63
kropki, 149
plusa, 145
przecinka, 227
równoci, 62, 396, 493
rednika, 56, 158
tabulacji, 63
ukonika, 85
zapytania, 373, 395

znaki specjalne, 176

danie

GET, 386
POST, 386
XMLHTTP, 397

Kup książkę

Poleć książkę

S K O R O W I D Z

534

Kup książkę

Poleć książkę

Wyszukiwarka

Podobne podstrony:
JavaScript Nieoficjalny podrecznik
Excel Nieoficjalny podrecznik excnop
Fotografia cyfrowa Nieoficjalny podręcznik Aparat cyfrowy(1)
Mozg Nieoficjalny podrecznik mozgnp
PowerPoint 2007 PL Nieoficjalny podrecznik pp27np
CSS Nieoficjalny podrecznik cssnp
informatyka powerpoint 2007 pl nieoficjalny podrecznik e a vander veer ebook
Excel Nieoficjalny podrecznik excnop

więcej podobnych podstron