Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00038 004773 14835528 na godz. na dobę w sumie
JavaScript i jQuery. Nieoficjalny podręcznik - książka
JavaScript i jQuery. Nieoficjalny podręcznik - książka
Autor: Liczba stron: 536
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4381-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> jquery - programowanie
Porównaj ceny (książka, ebook, audiobook).

Buduj zaawansowane i interaktywne strony WWW!

JavaScript ma za sobą długą historię, w której bywały okresy lepsze i gorsze. Czasem język ten był wręcz masowo blokowany w przeglądarkach. Jednak te czasy minęły. W tej chwili nie obejdzie się bez niego żadna poważna aplikacja internetowa lub choć trochę bardziej zaawansowana strona WWW. Użytkownicy serwisów internetowych wymuszają na projektantach coraz nowsze i lepsze rozwiązania. Dlatego na rynku wciąż pojawiają się dodatkowe narzędzia dla języka JavaScript, które ułatwiają wykorzystanie jego potencjału.

Najpopularniejszym dodatkiem tego typu jest biblioteka jQuery. Genialna w swojej prostocie, z ogromnymi możliwościami, zdobyła uznanie wszystkich programistów JavaScriptu. Nie potrafią sobie oni wyobrazić programowania bez jej wykorzystania. W tej książce znajdziesz najlepsze techniki, jakie oferuje JavaScript. Nauczysz się nawigować po drzewie DOM, modyfikować zachowanie elementów oraz obsługiwać zdarzenia. Poznasz również narzędzia, które ułatwią Ci pracę oraz debugowanie kodu. Jest to obowiązkowa pozycja dla każdego projektanta stron internetowych. Musisz ją mieć!

Dzięki tej książce:

Twórz atrakcyjne strony WWW. Wzbogać kod HTML o animacje, interaktywność i dynamiczne efekty wizualne!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: JavaScript jQuery: The Missing Manual Tłumaczenie: Piotr Rajca ISBN: 978-83-246-4381-3 © 2012 Helion S.A. Authorized Polish translation of the English edition of JavaScript jQuery: The Missing Manual, 2nd Edition ISBN 9781449399023 © 2012 David Sawyer McFarland. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były 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. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treŁci Nieoficjalna czoęówka ...................................................................................... 11 Wprowadzenie ..................................................................................................15 Czeļë I. Wprowadzenie do jýzyka JavaScript ..............................33 Rozdziaę 1. Pierwszy program w jñzyku JavaScript ........................................ 35 Wprowadzenie do programowania ............................................................. 36 Czym jest program komputerowy? ......................................................... 38 Jak dodað kod JavaScript do strony? ........................................................... 38 ZewnĂtrzne pliki JavaScript .................................................................... 40 Pierwszy program w jĂzyku JavaScript ....................................................... 42 Dodawanie tekstu do stron ........................................................................ 45 DoĪîczanie zewnĂtrznych plików JavaScript .............................................. 46 Wykrywanie bĪĂdów .................................................................................. 48 Konsola JavaScript w przeglîdarce Firefox ............................................... 48 WyŁwietlanie okna dialogowego bĪĂdów w Internet Explorerze 9 ............. 50 Konsola bĪĂdów w przeglîdarce Chrome ................................................. 51 Konsola bĪĂdów w przeglîdarce Safari ..................................................... 51 Rozdziaę 2. Gramatyka jñzyka JavaScript ....................................................... 55 Instrukcje ................................................................................................. 55 Wbudowane funkcje .................................................................................. 56 Typy danych ............................................................................................. 56 Liczby .................................................................................................... 57 ĩaĬcuchy znaków .................................................................................. 57 WartoŁci logiczne ................................................................................... 58 Zmienne ................................................................................................... 59 Tworzenie zmiennych ............................................................................ 59 Ušywanie zmiennych ............................................................................. 62 Ušywanie typów danych i zmiennych ........................................................63 Podstawowe operacje matematyczne ......................................................64 KolejnoŁð wykonywania operacji .............................................................65 ĩîczenie ĪaĬcuchów znaków ...................................................................65 ĩîczenie liczb i ĪaĬcuchów znaków .........................................................66 Zmienianie wartoŁci zmiennych .............................................................67 PrzykĪad — ušywanie zmiennych do tworzenia komunikatów ....................69 PrzykĪad — 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 PrzykĪad — 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 sterujÝcych .............................. 89 Programy reagujîce inteligentnie ...............................................................89 Podstawy instrukcji warunkowych ..........................................................91 UwzglĂdnianie 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 PrzykĪad — ušywanie instrukcji warunkowych .........................................101 ObsĪuga powtarzajîcych siĂ zadaĬ za pomocî pĂtli ...................................104 PĂtle while ............................................................................................104 PĂtle i tablice ........................................................................................106 PĂtle for ................................................................................................107 PĂtle do-while .......................................................................................109 Funkcje — wielokrotne korzystanie z przydatnego kodu ...........................110 Krótki przykĪad .....................................................................................112 Przekazywanie danych do funkcji .........................................................113 Pobieranie informacji z funkcji .............................................................114 Unikanie konfliktów miĂdzy nazwami zmiennych ...............................116 PrzykĪad — 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 S P I S T R E ĝ C I 4 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 treŁci do stron ....................................................................... 149 ZastĂpowanie i usuwanie wybranych elementów .................................. 152 Ustawianie i odczyt atrybutów znaczników .............................................. 154 Klasy .................................................................................................... 154 Odczyt i modyfikacja wĪaŁciwoŁci CSS ................................................. 155 Jednoczesna zmiana wielu wĪaŁciwoŁci 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 rozwiîzania ................................................................................. 164 Kod rozwiîzania ................................................................................... 165 Rozdziaę 5. Akcja i reakcja — oœywianie stron za pomocÝ zdarzeě .............169 Czym sî zdarzenia? ................................................................................. 169 Zdarzenia zwiîzane z myszî ................................................................. 171 Zdarzenia zwiîzane z dokumentem i oknem ........................................ 172 Zdarzenia zwiîzane z formularzami ..................................................... 173 Zdarzenia zwiîzane z klawiaturî .......................................................... 174 ObsĪuga zdarzeĬ przy ušyciu jQuery ........................................................ 174 PrzykĪad — wyróšnianie wierszy tabeli ..................................................... 177 Zdarzenia specyficzne dla biblioteki jQuery ............................................. 181 Oczekiwanie na wczytanie kodu HTML ............................................... 182 Zdarzenia biblioteki jQuery .................................................................. 183 Obiekt reprezentujîcy zdarzenie ........................................................... 185 Blokowanie standardowych reakcji na zdarzenia ................................... 186 Usuwanie zdarzeĬ ................................................................................ 187 Zaawansowane zarzîdzanie zdarzeniami ................................................. 188 Inne sposoby stosowania funkcji bind() .................................................... 189 PrzykĪad — jednostronicowa lista FAQ .................................................... 191 Omówienie zadania ............................................................................. 191 Tworzenie kodu ................................................................................... 192 Rozdziaę 6. Animacje i efekty ......................................................................... 197 Efekty biblioteki jQuery ........................................................................... 197 Podstawowe wyŁwietlanie i ukrywanie ................................................. 198 Wygaszanie oraz rozjaŁnianie elementów ............................................. 200 Przesuwanie elementów ....................................................................... 202 PrzykĪad: wysuwany formularz logowania ................................................ 202 Tworzenie kodu ................................................................................... 203 S P I S T R E ĝ C I 5 Animacje ................................................................................................205 Tempo animacji ...................................................................................207 Wykonywanie operacji po zakoĬczeniu efektu ..........................................209 PrzykĪad: animowany pasek ze zdjĂciami .................................................211 Tworzenie kodu ...................................................................................213 Czeļë III. Dodawanie mechanizmów do stron WWW ................217 Rozdziaę 7. Efekty zwiÝzane z rysunkami ......................................................219 Zamiana rysunków ..................................................................................219 Zmienianie atrybutu src rysunków .......................................................220 WstĂpne wczytywanie rysunków ..........................................................221 Efekt rollover z ušyciem rysunków ........................................................222 PrzykĪad — dodawanie efektu rollover z ušyciem rysunków ......................223 Omówienie zadania ..............................................................................224 Tworzenie kodu ...................................................................................225 PrzykĪad — 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 PrzykĪad — galeria fotografii oparta na wtyczce FancyBox .........................244 Rozdziaę 8. Usprawnianie nawigacji ............................................................. 249 Podstawowe informacje o odnoŁnikach ....................................................249 Pobieranie odnoŁników w kodzie JavaScript ..........................................249 OkreŁlanie lokalizacji docelowej ...........................................................250 Blokowanie domyŁlnego dziaĪania odnoŁników .....................................251 Otwieranie zewnĂtrznych odnoŁników w nowym oknie ...........................252 Tworzenie nowych okien .........................................................................255 WĪaŁciwoŁci okien ................................................................................255 Otwieranie stron w okienku na pierwotnej stronie ...................................259 PrzykĪad — otwieranie strony na stronie ...............................................262 Animowane menu nawigacyjne ...............................................................263 Kod HTML ...........................................................................................264 Kod CSS ...............................................................................................266 Kod JavaScript ......................................................................................268 PrzykĪad ...............................................................................................268 Rozdziaę 9. Wzbogacanie formularzy ............................................................271 Wprowadzenie do formularzy ..................................................................271 Pobieranie elementów formularzy .........................................................273 Pobieranie i ustawianie wartoŁci elementów formularzy ........................275 Sprawdzanie stanu przycisków opcji i pól wyboru ..................................276 Zdarzenia zwiîzane z formularzami .....................................................277 6 S P I S T R E ĝ C I Inteligentne formularze ........................................................................... 281 Aktywowanie pierwszego pola formularza ............................................ 282 WyĪîczanie i wĪîczanie pól ................................................................... 283 Ukrywanie i wyŁwietlanie opcji formularza ........................................... 284 PrzykĪad — proste wzbogacanie formularza .............................................. 285 Aktywowanie pola ................................................................................ 286 WyĪîczanie pól formularza ................................................................... 286 Ukrywanie pól formularza .................................................................... 289 Walidacja formularzy .............................................................................. 291 Wtyczka Validation .............................................................................. 293 Podstawowa walidacja .......................................................................... 294 Zaawansowana walidacja ..................................................................... 297 OkreŁlanie stylu komunikatów o bĪĂdach ............................................. 302 PrzykĪad zastosowania walidacji .............................................................. 303 Prosta walidacja ................................................................................... 303 Walidacja zaawansowana ..................................................................... 305 Walidacja pól wyboru i przycisków opcji ............................................... 308 Formatowanie komunikatów o bĪĂdach ................................................ 311 Rozdziaę 10. Rozbudowa interfejsu stron WWW ..........................................313 Organizowanie informacji przy ušyciu kart .............................................. 314 Kod HTML .......................................................................................... 315 Kod CSS ............................................................................................... 316 Kod JavaScript ...................................................................................... 319 PrzykĪad — panel kart ........................................................................... 320 Dodawanie sliderów ................................................................................ 325 Stosowanie slidera AnythingSlider ....................................................... 326 PrzykĪad — AnythingSlider ................................................................... 327 Modyfikowanie wyglîdu slidera ............................................................ 329 Modyfikacja dziaĪania slidera ............................................................... 332 OkreŁlanie wielkoŁci i poĪošenia elementów strony ....................................... 333 OkreŁlanie wysokoŁci i szerokoŁci elementów ...................................... 334 OkreŁlanie poĪošenia elementu na stronie ............................................ 337 UwzglĂdnianie przewiniĂcia strony ...................................................... 339 Dodawanie etykietek ekranowych ........................................................... 340 Kod HTML .......................................................................................... 340 Kod CSS ............................................................................................... 342 Kod JavaScript ...................................................................................... 343 PrzykĪad — 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 ukĪadanki ............................................................................. 360 Komunikacja z serwerem sieciowym .................................................... 362 S P I S T R E ĝ C I 7 AJAX w bibliotece jQuery ........................................................................365 Ušywanie funkcji load() ........................................................................365 PrzykĪad — korzystanie z funkcji load() .................................................368 Funkcje get() i post() .............................................................................372 Formatowanie danych przesyĪanych na serwer ......................................373 Przetwarzanie danych zwróconych z serwera .........................................376 ObsĪuga bĪĂdów ....................................................................................380 PrzykĪad — korzystanie z funkcji get() ...................................................380 Format JSON ..........................................................................................386 DostĂp do danych z obiektów JSON ......................................................388 ZĪošone obiekty JSON ..........................................................................389 Rozdziaę 12. Flickr oraz Google Maps ............................................................ 393 Prezentacja JSONP ..................................................................................393 Dodawanie do witryny kanaĪu Flickr ........................................................395 Tworzenie adresu URL .........................................................................395 Stosowanie funkcji $.getJSON() ............................................................398 Prezentacja danych kanaĪu Flickr w formacie JSON ..............................398 PrzykĪad — dodawanie zdjĂð z Flickr na wĪasnej stronie ............................400 WyŁwietlanie na wĪasnej stronie map Google Maps .................................404 OkreŁlanie lokalizacji na mapie ............................................................407 Inne opcje wtyczki GoMap ...................................................................409 Dodawanie znaczników ........................................................................411 Dodawanie okienek informacyjnych do znaczników .............................415 PrzykĪad zastosowania wtyczki GoMap ....................................................415 Czeļë V. Rozwiézywanie problemów, wskazówki i sztuczki .....419 Rozdziaę 13. Wykorzystywanie wszystkich moœliwoIJci jQuery ....................421 Przydatne informacje i sztuczki zwiîzane z jQuery ....................................421 $() to to samo, co jQuery() .....................................................................421 Zapisywanie pobranych elementów w zmiennych .................................422 Jak najrzadsze dodawanie treŁci ............................................................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 obsĪuga zdarzeĬ ..............................................................441 Rozdziaę 14. Zaawansowane techniki jñzyka JavaScript .............................445 Stosowanie ĪaĬcuchów znaków ................................................................445 OkreŁlanie dĪugoŁci ĪaĬcucha ...............................................................446 Zmiana wielkoŁci znaków w ĪaĬcuchu ..................................................446 Przeszukiwanie ĪaĬcuchów znaków: zastosowanie indexOf() ...................447 Pobieranie fragmentu ĪaĬcucha przy ušyciu metody slice() ....................449 8 S P I S T R E ĝ C I Odnajdywanie wzorów w ĪaĬcuchach ...................................................... 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 ZastĂpowanie tekstów .......................................................................... 463 Testowanie wyrašeĬ regularnych .......................................................... 464 Stosowanie liczb ...................................................................................... 464 Zamiana ĪaĬcucha znaków na liczbĂ ..................................................... 465 Sprawdzanie wystĂpowania liczb .......................................................... 467 Zaokrîglanie liczb ................................................................................ 468 Formatowanie wartoŁci monetarnych ................................................... 468 Tworzenie liczb losowych ..................................................................... 469 Daty i godziny ......................................................................................... 471 Pobieranie miesiîca ............................................................................. 471 OkreŁlanie dnia tygodnia ...................................................................... 472 Pobieranie czasu .................................................................................. 472 Tworzenie daty innej niš biešîca .......................................................... 476 ĩîczenie róšnych elementów ................................................................... 477 Ušywanie zewnĂtrznych 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 rozwiÝzywanie problemów ........................ 487 NajczĂstsze bĪĂdy w kodzie JavaScript ...................................................... 487 Brak symboli koĬcowych ...................................................................... 488 CudzysĪowy i apostrofy ........................................................................ 491 Ušywanie sĪów zarezerwowanych ......................................................... 492 Pojedynczy znak równoŁci w instrukcjach warunkowych ...................... 493 WielkoŁð znaków ................................................................................. 493 NieprawidĪowe Łcieški do zewnĂtrznych plików JavaScript ................... 494 NieprawidĪowe Łcieški w zewnĂtrznych plikach JavaScript .................... 494 Znikajîce zmienne i funkcje ................................................................. 496 Diagnozowanie przy ušyciu dodatku Firebug ........................................... 496 Instalowanie i wĪîczanie dodatku Firebug ............................................. 497 Przeglîdanie bĪĂdów za pomocî dodatku Firebug .................................. 498 ŀledzenie dziaĪania skryptu za pomocî funkcji console.log() .................. 499 PrzykĪad — korzystanie z konsoli dodatku Firebug ................................ 500 Diagnozowanie zaawansowane ............................................................ 503 PrzykĪad diagnozowania .......................................................................... 508 Dodatek A. Materiaęy zwiÝzane z jñzykiem JavaScript ................................515 ŞródĪa informacji .................................................................................... 515 Witryny ............................................................................................... 515 Ksiîški ................................................................................................. 516 S P I S T R E ĝ C I 9 Podstawy jĂzyka JavaScript ......................................................................516 ArtykuĪy i prezentacje ...........................................................................516 Witryny ................................................................................................516 Ksiîški .................................................................................................517 jQuery .....................................................................................................517 ArtykuĪy i prezentacje ...........................................................................517 Witryny ................................................................................................517 Ksiîški .................................................................................................518 AJAX .......................................................................................................518 Witryny ................................................................................................518 Ksiîški .................................................................................................519 Zaawansowany jĂzyk JavaScript ...............................................................519 ArtykuĪy i prezentacje ...........................................................................519 Witryny ................................................................................................519 Ksiîški .................................................................................................520 CSS .........................................................................................................520 Witryny ................................................................................................521 Ksiîški .................................................................................................521 Skorowidz ....................................................................................................... 525 10 S P I S T R E ĝ C I 10 ROZDZIAà Rozbudowa interfejsu stron WWW B ywa, še strony WWW przypominajî dĪugie, jednostronicowe broszury. Od- wiedzajîce je osoby mogî siĂ czuð przytĪoczone przez wiele tekstu i znacznî liczbĂ obrazków, które muszî dĪugo przewijað, zwĪaszcza gdy nie sî w stanie szybko znaleşð poszukiwanych informacji. To naszym zadaniem, zadaniem twór- ców stron jest zapewnienie ušytkownikom narzĂdzi, które uĪatwiî im znalezienie tego, czego szukajî. Przy ušyciu JavaScriptu oraz biblioteki jQuery mošna uspraw- niað tworzone strony i uĪatwiað ušytkownikom korzystanie z nich — na przykĪad poprzez ukrywanie zawartoŁci, aš do momentu gdy bĂdzie potrzebna, oraz zapew- nianie Īatwiejszego dostĂpu do informacji. W tym rozdziale poznasz techniki sĪušîce do poprawiania czytelnoŁci i ĪatwoŁci ko- rzystania ze stron WWW. Karty pozwalajî na umieszczanie znacznych iloŁci in- formacji na stosunkowo niewielkim obszarze i zapewniajî mošliwoŁð klikniĂcia wy- branej karty w celu uzyskania dostĂpu do mniejszej porcji danych. Etykietki ekranowe — niewielkie, wyskakujîce okienka pokazywane po wskazaniu jakiegoŁ elementu strony wskaşnikiem myszy — umošliwiajî wyŁwietlanie dodatkowych informacji. Coraz bardziej popularnî formî kontroli zawartoŁci strony sî tak zwane slidery (od angielskiego sĪowa slide — przesuwað) — mošna by je porównað do okna, które- go zawartoŁð da siĂ przesuwað, by ukryð jedne, a wyŁwietlið inne elementy tejše strony. Slidery pozwalajî na prezentowanie znacznych iloŁci informacji i sî bardzo czĂsto stosowane na stronach gĪównych witryn. W tym rozdziale poznasz takše kilka przydatnych technik pozwalajîcych na tworze- nie wĪasnych komponentów interfejsu ušytkownika, takich jak okreŁlanie wymiarów okna przeglîdarki, konkretnego elementu strony oraz poĪošenia elementu na stronie. Organizowanie informacji przy ušyciu kart Organizowanie informacji przy ušyciu kart Umieszczenie na stronie zbyt wielu informacji moše przytĪoczyð ušytkownika i spra- wið, še strona bĂdzie wyglîdaĪa na przepeĪnionî. JĂzyk JavaScript zapewnia wiele moš- liwoŁci prezentowania znacznych iloŁci informacji na niewielkim obszarze. Jednî z technik jest stosowanie kart. Panel kart skĪada siĂ z rzĂdu zakĪadek wyŁwietlonych u góry oraz jednej, widocznej karty. Kiedy ušytkownik kliknie zakĪadkĂ, aktualnie prezentowana karta znika, a na jej miejscu pojawia siĂ inna (patrz rysunek 10.1). Rysunek 10.1. Panele kart sé czýsto stosowane na witrynach zajmujécych siý handlem elektronicznym, na których informacje sé prezentowane na osobnych kartach. W przedstawionym tu przykĥadzie (býdécym jedy- nie fragmentem caĥej strony) przedstawiono karty zawierajéce opis produktu, jego specyfikacjý oraz informa- cje o sposobie dostawy; przy takim rozwiézaniu uŜytkownik moŜe kliknéë kartý, by wyļwietlië te informacje, które go interesujé Panele kart, tak jak wszystkie komponenty interfejsu ušytkownika stron WWW, sî tworzone przy ušyciu kodów napisanych w jĂzykach HTML, JavaScript oraz za pomocî CSS. Kašdy z tych elementów paneli kart mošna pisað na wiele sposobów, ponišej przedstawione zostaĪo bardzo proste rozwiîzanie. 314 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 ušyciu kart Kod HTML Panel kart skĪada siĂ z dwóch podstawowych elementów: zakĪadek (czyli przycisków umieszczonych jeden obok drugiego w wierszu wyŁwietlonym na górze lub na dole komponentu) oraz kart (bĂdîcych znacznikami div zawierajîcymi informacje, które chcemy prezentowað). Dodatkowo komponent moše zawierað kilka innych znaczników sĪušîcych do zapewnienia wĪaŁciwej jego organizacji oraz majîcych na celu uĪatwienie kodu JavaScript, który go obsĪuguje. Oto one. x Element pojemnika. Choð wĪaŁciwie nie jest to niezbĂdne, jednak zastosowa- nie dodatkowego znacznika div , w którym bĂdî umieszczone wszystkie za- kĪadki i karty, moše w wyraşny sposób oznaczyð poczîtek i koniec komponentu oraz uĪatwið tworzenie kodu JavaScript zwĪaszcza wtedy, kiedy na jednej stronie ma znaleşð siĂ wiĂcej takich paneli karty. Oto podstawowy kod HTML takiego elementu: div class= tabbedPanels /div Dodanie do tego znacznika atrybutu class identyfikuje go i uĪatwia tworzenie stylów okreŁlajîcych postað elementów wewnîtrz panelu oraz tworzenie selek- torów jQuery odwoĪujîcych siĂ do poszczególnych zakĪadek i kart. JeŁli na naszej stronie ma siĂ znajdowað tylko jeden panel kart, zamiast klasy mošna by okre- Łlið identyfikator tego znacznika. x ZakĪadki. Zazwyczaj tworzy siĂ je w postaci listy wypunktowanej, zawierajîcej odnoŁniki: ul class= tabs li a href= #panel1 Informacje ogólne /a /li li a href= #panel2 Specyfikacja /a /li li a href= #panel3 Dostawa /a /li /ul OdnoŁniki umieszczone w poszczególnych punktach listy odwoĪujî siĂ do iden- tyfikatorów przypisanych poszczególnym kartom (opisanym ponišej). Utworze- nie odnoŁnika od karty sprawia, še ušytkownicy, którzy wyĪîczyli w swoich przeglîdarkach obsĪugĂ jĂzyka JavaScript, bĂdî mogli przeskoczyð prosto od wy- branego fragmentu treŁci — klikniĂcie takiego odnoŁnika powoduje przewiniĂcie strony do okreŁlonego miejsca. Uwaga: Jeļli nie wiesz, jak tworzy siý takie odnoļniki, krótkie wyjaļnienie moŜesz znaleŚë na stronie http://www.yourhtmlsource.com/text/internallinks.html. x Pojemnik kart. Znacznik div zawierajîcy wszystkie karty moše przydað siĂ do okreŁlania ich postaci w stylach CSS oraz odwoĪywania do nich przy ušyciu jQuery: div class= panelContainer /div R O Z D Z I A à 1 0 . R O Z B U D O W A I N T E R F E J S U S T R O N W W W 315 Organizowanie informacji przy ušyciu kart x Karty. To wĪaŁnie w nich umieszczane sî wĪaŁciwe informacje. Kašda karta jest reprezentowana przez znacznik div i moše zawierað dowolne treŁci: nagĪówki, akapity, obrazki oraz inne znaczniki div . Kašdy z tych znaczników powinien mieð unikalny identyfikator, odpowiadajîcy identyfikatorowi podanemu w atry- bucie HREF odnoŁników tworzîcych zakĪadki (patrz drugi punkt listy): div class= panel id= panel1 !-- tu bĊdzie treĞü karty -- /div div class= panel id= panel2 !-- tu bĊdzie treĞü karty -- /div div class= panel id= panel3 !-- tu bĊdzie treĞü karty -- /div Dodanie do kašdego z tych znaczników jakiejŁ klasy — na przykĪad class= ´ panel — takše jest dobrym pomysĪem, gdyš zapewnia dodatkowy sposób okreŁlania ich wyglîdu i pobierania przy ušyciu jQuery. Wszystkie znaczniki div poszczególnych kart sî umieszczane wewnîtrz nad- rzĂdnego znacznika div peĪniîcego rolĂ pojemnika. Kompletna struktura kodu HTML panelu kart ma zatem nastĂpujîcî postað: div class= tabbedPanels ul class= tabs li a href= #panel1 Informacje ogólne /a /li li a href= #panel2 Specyfikacja /a /li li a href= #panel3 Dostawa /a /li /ul div class= panelContainer div class= panel id= panel1 !-- tu bĊdzie treĞü karty -- /div div class= panel id= panel2 !-- tu bĊdzie treĞü karty -- /div div class= panel id= panel3 !-- tu bĊdzie treĞü karty -- /div /div /div Kod CSS Arkusz stylów pozwoli nadað nagĪówkom kart wyglîd zakĪadek (przycisków umiesz- czonych tuš obok siebie), a takše sprawi, še same karty bĂdî wyglîdaĪy jako spójna caĪoŁð, w której treŁð bĂdzie siĂ Īîczyð z zakĪadkî. x Pojemnik. Nie musimy w šaden sposób okreŁlað wyglîdu znacznika div , wewnîtrz którego sî umieszczone wszystkie karty (w rzeczywistoŁci ten znacz- nik w ogóle nie jest potrzebny). Jednak moše siĂ przydað, gdybyŁmy chcieli ogra- niczyð szerokoŁð caĪego panelu na przykĪad po to, by umieŁcið go obok jakiegoŁ innego elementu strony bîdş umiejscowið obok siebie dwa takie panele. W ta- kim przypadku w stylu odnoszîcym siĂ do tego znacznika moglibyŁmy okreŁlið jego szerokoŁð w nastĂpujîcy sposób: 316 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 ušyciu kart .tabbedPanels { width: 50 } x Lista wypunktowana oraz jej elementy. Poniewaš listy wypunktowane sî za- zwyczaj nieco wciĂte, zatem musimy z niej usunîð wszelkie wypeĪnienia zarów- no z lewej, jak i z prawej strony. Co wiĂcej, aby zakĪadki byĪy rozmieszczone bok siebie, a nie jedna nad drugî, w elementach listy musimy zastosowað wĪaŁci- woŁð float. I w koĬcu nie mošemy zapomnieð o usuniĂciu punktorów, które sî standardowo wyŁwietlane 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 rozdziaĥu. Innymi sĥowy, reguĥa .tabs odwoĥuje siý do listy wypunktowanej — ul class= tabs — natomiast reguĥa .tabs li — do znaczników li umieszczonych wewnétrz tej listy. x Same zakĪadki sî reprezentowane przez znaczniki a umieszczone wewnîtrz punktów listy, czyli znaczników li . W stylu okreŁlajîcym ich postað na pewno trzeba bĂdzie odpowiednio ustawið kilka wĪaŁciwoŁci. Przede wszystkich chce- my usunîð podkreŁlenie, którym zazwyczaj sî oznaczane wszystkie odnoŁniki, oprócz tego ich wĪaŁciwoŁci display przypiszemy wartoŁð block, by mošna byĪo okreŁlað ich marginesy i wypeĪnienia. Oto styl okreŁlajîcy postað zakĪadek: .tabs a { display: block; text-decoration: none; padding: 3px 5px; } OczywiŁcie, mošna przypuszczað, še bĂdziesz chciaĪ uzupeĪnið tĂ reguĪĂ stylu o dodatkowe wĪaŁciwoŁci, by zakĪadki wyglîdaĪy naprawdĂ wspaniale. MógĪbyŁ na przykĪad ošywið je, okreŁlajîc kolor tĪa, zmienið czcionkĂ, jej kolor i wielkoŁð, by tekst zakĪadek wyróšniaĪ siĂ wŁród pozostaĪej treŁci kart. x Aktywna zakĪadka. Bardzo dobrym pomysĪem jest wyróšnienie zakĪadki skoja- rzonej z aktualnie widocznî kartî. To rodzaj sygnaĪu „jesteŁ tutaj”, który wizu- alnie identyfikuje informacje prezentowane na karcie. Popularnym rozwiîza- niem stosowanym w tym celu jest utworzenie stylu, który przy ušyciu jQuery zostanie dodany do zakĪadki po jej klikniĂciu. Nie ma šadnych obowiîzkowych wĪaŁciwoŁci, które musielibyŁmy umieszczað w tym stylu, jednak warto nadað zakĪadce taki sam kolor tĪa, który ma powiîzana z niî karta (a jednoczeŁnie za- pewnið, by pozostaĪe zakĪadki miaĪy inny kolor tĪa), gdyš dziĂki temu zakĪadka oraz karta bĂdî tworzyĪy wizualnî caĪoŁð: .tabs a.active { background-color: white; } 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 317 Organizowanie informacji przy ušyciu kart Wskazówka: Czýsto stosowanym rozwiézaniem jest dodawanie obramowaħ wokóĥ zakĥadek i kart. Po klikniýciu zakĥadki ukrywamy jej dolne obramowanie, co sprawia wraŜenie, jakby zakĥadka zostaĥa zespolona z karté (patrz rysunek 10.1). Aby powstaĥo takie rozwiézanie, na poczétek w regule .tabs a naleŜy dodaë wĥaļciwoļë border oraz przypisaë dolnemu marginesowi (margin-bottom) wartoļë -1px. Zastosowanie wartoļci ujemnej spowoduje przesuniýcie zakĥadki o jeden piksel w dóĥ, co sprawi, Ŝe býdzie ona zachodzië na kartý. Dodatkowo w regule .tabs a.active naleŜy nadaë dolnej krawýdzi obramowania kolor odpowiadajécy kolorowi tĥa kart. W ten sposób, choë krawýdŚ obramowania wciéŜ býdzie wyļwietlana, ze wzglýdu na to, Ŝe býdzie ono mieë ten sam kolor, co tĥo karty, a dodatkowo býdzie zachodzië na jej obramowanie, býdzie siý wydawaĥo, Ŝe zakĥadka i karta stanowié jednoļë. (Aby takie rozwiézanie dziaĥaĥo w przeglédarce Internet Explorer 8 oraz jej wczeļniejszych wersjach, ko- nieczne jest takŜe dodanie do reguĥy stylu wĥaļciwoļci position:relative). W koħcu, moŜemy takŜe dodaë obramowanie do pojemnika zawierajécego karty — powinno ono mieë taki sam styl, gruboļë i kolor, co obramowanie uŜyte w stylu .tabs a. Ostateczny efekt zastosowania takich stylów moŜna zobaczyë w przykĥadzie zamieszczonym na stronie 320. x Pojemnik kart. Bardzo wašny jest styl okreŁlajîcy postað znacznika div , we- wnîtrz którego sî umieszczone poszczególne karty i ich zawartoŁð. Poniewaš w stylu dla zakĪadek ušyliŁmy wĪaŁciwoŁci float:left (aby przeglîdarka wy- ŁwietliĪa je jednî obok drugiej), zatem musimy zadbað, by dalsza zawartoŁð na- szego komponentu byĪa prawidĪowo wyŁwietlana ponišej zakĪadek. W przeciw- nym razie przeglîdarka spróbuje wyŁwietlið jî z ich prawej strony. .panelContainer { clear: left; } Dodatkowo tego stylu mošna ušyð w celu okreŁlenia postaci kart. Poniewaš pojemnik ten tworzy prostokît wokóĪ wszystkich kart, mošna w nim okreŁlið kolor tĪa, obramowanie, wypeĪnienie i tak dalej. x Karty. Zgodnie z informacjami podanymi w poprzednim punkcie listy, do okre- Łlenia podstawowych aspektów wyglîdu kart, takich jak obramowanie, kolor tĪa i podobne, mošna ušyð reguĪy stylów odnoszîcej siĂ do pojemnika, w którym sî one umieszczone. Gdy jednak bĂdziemy chcieli, mošemy takše okreŁlið reguĪĂ stylów odnoszîcî siĂ do poszczególnych znaczników div tworzîcych karty. Wystarczy w tym celu zdefiniowað reguĪĂ stylu z selektorem .panel. x ZawartoŁð kart. Do okreŁlenia postaci zawartoŁci umieszczonej na kartach moš- na zastosowað selektory elementów potomnych, które pozwolî odwoĪywað siĂ do znaczników wewnîtrz elementów div tworzîcych karty. Aby na przykĪad okreŁlið postað znaczników h2 umieszczonych wewnîtrz kart i wyŁwietlið ich zawartoŁð czcionkî Arial, w kolorze pomaraĬczowym, moglibyŁmy ušyð nastĂ- pujîcego stylu: .panel h2 { color: orange; font-family: Arial, Helvetica, sans-serif } Podobnie, by okreŁlið postað akapitów na kartach, nalešaĪoby ušyð selektora w po- staci .panel p. 318 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 ušyciu kart Kod JavaScript PrzygotowaliŁmy juš kod HTML oraz arkusz stylów CSS i mošemy zobaczyð zakĪadki wyŁwietlone w rzĂdzie u góry komponentu oraz trzy znaczniki div (karty), umiesz- czone ponišej, jeden nad drugim (patrz rysunek 10.2). Podstawowy wyglîd kompo- nentu jest zatem zgodny z naszymi zamierzeniami. Musimy jeszcze napisað kod JavaScript, który bĂdzie obsĪugiwaĪ otwieranie i zamykanie kart, zmieniaĪ klasy oraz pozwalaĪ na wyróšnianie aktywnej zakĪadki i przywracanie pozostaĪych do standar- dowej postaci. Oto czynnoŁci, jakie trzeba wykonað. Rysunek 10.2. Struktura kodu HTML panelu kart jest stosunko- wo prosta; skĥada siý ze znaczni- ka div , listy wypunktowanej, kilku odnoļników oraz kilku kolej- nych znaczników div 1. Dodað obsĪugĂ zdarzeĬ click do odnoŁników w zakĪadkach. Panele kart sî nierozerwalnie zwiîzane z iteracjî ušytkownika z zakĪadkami — klikniĂcie pierwszej zakĪadki powoduje wyŁwietlenie pierwszej karty, klik- niĂcie innej — wyŁwietlenie odpowiadajîcej jej karty. 2. Dodað funkcjĂ anonimowî obsĪugujîcî zdarzenia click, która: (a) Ukryje aktualnie widocznî kartĂ, (b) Usunie klasĂ active z wybranej wczeŁniej zakĪadki, (c) Doda klasĂ active do klikniĂtej zakĪadki, (d) WyŁwietli kartĂ skojarzonî z klikniĂtî zakĪadkî. 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 319 Organizowanie informacji przy ušyciu kart 3. ZgĪosið zdarzenie click dla pierwszej zakĪadki. Ten krok jest konieczny, gdyš w momencie wyŁwietlania strony widoczne sî wszystkie karty, a šadna zakĪadka nie jest wyróšniona. OczywiŁcie, mošna na- pisað kod, który wyróšni pierwszî zakĪadkĂ oraz ukryje wszystkie karty z wyjît- kiem pierwszej, jednak takie rozwiîzanie nie jest konieczne — mamy do dyspo- zycji funkcjĂ anonimowî obsĪugujîcî zdarzenia click (patrz krok 2.), która zrobi to za nas. Mošemy siĂ zatem ograniczyð do programowego „klikniĂcia” pierw- szej zakĪadki, co spowoduje wykonanie tej funkcji. Tak ogólnie wyglîda kod, który musimy napisað. Napiszesz go krok po kroku w ra- mach przykĪadu, przedstawionego w nastĂpnym punkcie rozdziaĪu. PrzykĪad — panel kart Skoro juš rozumiesz podstawowe zaĪošenia zwiîzane z tworzeniem panelu kart, tu znajdziesz opis czynnoŁci, jakie musisz wykonað, by go ostatecznie uruchomið. W tym przykĪadzie dodasz kody CSS oraz JavaScript, które przeksztaĪcî prostî listĂ odnoŁników przedstawionî na stronie 316 w interaktywny pasek nawigacyjny. Uwaga: Informacje dotyczéce pobierania przykĥadów do ksiéŜki moŜna znaleŚë na stronie 43. 1. W edytorze tekstów otwórz plik tabs.html umieszczony w katalogu R10. Plik tabs.html zawiera kod HTML opisany na stronie 315: nadrzĂdny znacznik div caĪego panelu karty, wypunktowanî listĂ odnoŁników peĪniîcych role zakĪadek, kolejny znacznik div zawierajîcy karty oraz po jednym znaczniku div dla kašdej karty. Znajdziesz w nim takše podstawowe style CSS. JeŁli wy- Łwietlisz ten plik w przeglîdarce, zobaczysz trzy zakĪadki i zawartoŁð trzech kart (wszystkie te karty sî rozmieszczone w pionie, jedna nad drugî). Uwaga: Starajéc siý w moŜliwie jak najwiýkszym stopniu poprawië przejrzystoļë przykĥadu, uŜywany kod CSS umieļciliļmy bezpoļrednio w kodzie HTML strony, w formie arkusza wpisanego. Jeļli masz zamiar wielokrotnie korzystaë z niego podczas tworzenia wĥasnych paneli kart, umieļë go w ze- wnýtrznym pliku CSS. Plik biblioteki jQuery zostaĪ juš doĪîczony do strony, a w sekcji nagĪówka znaj- duje siĂ wywoĪanie funkcji $(document).ready(). Kolejnym krokiem, jaki wy- konasz, bĂdzie ukrycie kart. 2. Kliknij puste miejsce wewnîtrz funkcji $(document).ready() i wewnîtrz niej dodaj ponišszy kod wyróšniony pogrubieniem: $(document).ready(function() { $( .tabs a ).click(function() { }); // koniec funkcji click }); // koniec funkcji ready WywoĪanie $( .tabs a ) pobiera wszystkie znaczniki a umieszczone we- wnîtrz elementu klasy tabs (czyli naszej wypunktowanej listy). (Funkcja click() 320 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 ušyciu kart zostaĪa opisana na stronie 175). Aktualnie dysponujesz pustî funkcjî anoni- mowî, musisz zatem uzupeĪnið jej kod. Zaczniesz od prostej instrukcji, która pozwoli poprawið wydajnoŁð dziaĪania kodu. 3. Wewnîtrz funkcji anonimowej wpisz ponišszy, pogrubiony kod: $( .tabs a ).click(function() { $this = $(this); }); // koniec funkcji click Zgodnie z informacjami podanymi na stronie 162, wyrašenie $(this) stosowane wewnîtrz funkcji anonimowej obsĪugujîcej zdarzenia pozwala odwoĪað siĂ do elementu, do którego zdarzenie zostaĪo skierowane — w naszym przypadku odwoĪuje siĂ ono do zakĪadki klikniĂtej przez ušytkownika. Za kašdym razem, gdy ušywamy wyrašenia $() do pobrania elementu, wywoĪujemy funkcjĂ jQuery, zmuszajîc tym samym przeglîdarkĂ do wykonania wielu wierszy kodu JavaScript. JeŁli wewnîtrz jakiejŁ funkcji bĂdziemy wielokrotnie ušywali jakiegoŁ selektora jQuery, doskonaĪym pomysĪem bĂdzie zapisanie go w zmiennej. W powyšszym przykĪadzie $this jest zwyczajnî zmiennî zdefiniowanî przez programistĂ (czyli przez Ciebie). Zapisanie wartoŁci wyrašenia $(this) w zmiennej oznacza, še gdy tylko bĂ- dziesz chciaĪ odwoĪað siĂ do odnoŁnika, wystarczy skorzystað ze zmiennej $this — nie bĂdziesz musiaĪ ponownie pobierað go przy ušyciu selektora jQuery. In- nymi sĪowy, jeŁli w kodzie funkcji dwukrotnie pojawi siĂ wywoĪanie $(this), bĂdzie to oznaczað, še przeglîdarka musi dwukrotnie wykonað funkcjĂ jQuery w celu pobrania tego samego elementu. JeŁli za pierwszym razem zapiszesz war- toŁð $(this) w zmiennej — $this — bĂdziesz mógĪ z niej wielokrotnie korzy- stað bez zmuszania przeglîdarki do wykonywania jakichkolwiek dodatkowych czynnoŁci (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î klikniĂtej zakĪadki. 4. Wpisz kod z wierszy 3. i 4. ponišszego fragmentu: 1 $( .tabs a ).click(function() { 2 $this = $(this); 3 $( .panel ).hide(); 4 $( .tabs a.active ).removeClass( active ); 5 }); // koniec funkcji click Wiersz 3. powoduje ukrycie wszystkich kart. Poniewaš kašda z nich jest znacz- nikiem div nalešîcym do klasy panel, selektor $( .panel ) pobiera je wszyst- kie, a wywoĪanie funkcji .hide() (patrz strona 198) powoduje ich ukrycie. Mu- sisz to zrobið, gdyš w przeciwnym razie po otworzeniu jednej karty poprzednia pozostaĪaby widoczna. Wiersz 4. usuwa klasĂ active ze wszystkich zakĪadek — odnoŁników umiesz- czonych w elemencie nalešîcym do klasy tabs. Na stronie 317 wyjaŁniliŁmy, še utworzenie klasy active pozwoli zmienið wyglîd zakĪadki klikniĂtej przez ušytkownika (by wyglîdaĪa jak wizualny sygnaĪ „jesteŁ tutaj”). OczywiŁcie, kiedy ušytkownik kliknie zakĪadkĂ, by jî uaktywnið, trzeba usunîð klasĂ active z za- kĪadki, która do tej pory byĪa aktywna. I wĪaŁnie to robi kod z wiersza 4., ušywa- jîc przy tym funkcji removeClass() (opisanej na stronie 155). Teraz zajmiesz siĂ wyróšnieniem klikniĂtej zakĪadki. 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 321 Organizowanie informacji przy ušyciu kart 5. Dodaj kod umieszczony w wierszu 5.: 1 $( .tabs a ).click(function() { 2 $this = $(this); 3 $( .panel ).hide(); 4 $( .tabs a.active ).removeClass( active ); 5 $this.addClass( active ).blur(); 6 }); // koniec funkcji click PamiĂtasz zapewne, še $this jest zmiennî, utworzonî w wierszu 2., która za- wiera odwoĪanie do klikniĂtego odnoŁnika. A zatem wywoĪanie $this.addClass ´( active ) dodaje do tego odnoŁnika klasĂ active — przeglîdarka ušyje jej do okreŁlenia postaci klikniĂtej zakĪadki. Umieszczone na koĬcu wiersza wywo- Īanie funkcji .blur() korzysta z techniki tworzenia sekwencji wywoĪaĬ, jakî daje biblioteka jQuery (która zostaĪa opisana na stronie 149). To zwyczajna funkcja wywoĪywana po wykonaniu funkcji addClass(). Funkcja ta usuwa ognisko wprowadzania z wybranego elementu (odnoŁnika lub pola formularza). W naszym przypadku jej wywoĪanie sprawi, še przeglîdarka nie bĂdzie wyŁwie- tlað wokóĪ tekstu klikniĂtego odnoŁnika cienkiej, przerywanej linii. GdybyŁmy jej nie wywoĪali, zakĪadka nie wyglîdaĪaby równie dobrze. I to juš prawie wszystko... jeszcze tylko musisz wyŁwietlið kartĂ. 6. Dodaj kod umieszczony w wierszach 6. i 7.: 1 $( .tabs a ).click(function() { 2 $this = $(this); 3 $( .panel ).hide(); 4 $( .tabs a.active ).removeClass( active ); 5 $this.addClass( active ).blur(); 6 var panel = $this.attr( href ); 7 $(panel).fadeIn(250); 8 }); // koniec funkcji click Kašda zakĪadka jest w rzeczywistoŁci odnoŁnikiem wskazujîcym powiîzanî z niî kartĂ. PamiĂtasz zapewne, še kod HTML karty wyglîda w nastĂpujîcy sposób: div id= panel1 class= panel ; natomiast kod HTML odpowiadajîcej mu zakĪadki to: a href= #panel1 . Zwróð uwagĂ, še zawartoŁð atrybutu href odnoŁnika wyglîda dokĪadnie tak samo jak selektor identyfikatora CSS. Poniewaš jQuery korzysta z selektorów CSS do pobierania elementów stron, zatem wystarczy pobrað wartoŁð atrybutu href i ušyð jej do pobrania karty, którî chcemy wyŁwietlið. W wierszu 6. tworzymy nowî zmiennî — panel — w której zapisujemy wartoŁð atrybutu href odnoŁnika (ušywana przy tym funkcja attr() jQuery zostaĪa opisana na stronie 159). W wierszu 7. korzystamy z odczytanej wczeŁniej wartoŁci do pobrania karty i stopniowego jej wyŁwietlenia (ušywamy przy tym funkcji fadeIn() opisanej na stronie 200). MoglibyŁmy jî zastîpið jakîkolwiek innî funkcjî jQuery gene- rujîcî efekty wizualne, takî jak show(), slideDown() bîdş animate(). Teraz, gdy juš prawie caĪy kod jest gotowy, musimy programowo wygenerowað zdarzenie click podczas wczytywania strony, spowoduje to wywoĪanie funkcji, ukrycie kart, wyróšnienie pierwszej zakĪadki i wyŁwietlenie skojarzonej z niî karty. Na szczĂŁcie, jQuery pozwala w bardzo prosty sposób symulowað zgĪo- szenie zdarzenia. 322 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 ušyciu kart 7. Ponišej funkcji click() dodaj jeszcze jeden wiersz, powodujîcy zgĪosze- nie zdarzenia click dla pierwszej zakĪadki. 1 $( .tabs a ).click(function() { 2 $this = $(this); 3 $( .panel ).hide(); 4 $( .tabs a.active ).removeClass( active ); 5 $this.addClass( active ).blur(); 6 var panel = $this.attr( href ); 7 $(panel).fadeIn(250); 8 }); // koniec funkcji click 9 $( .tabs li:first a ).click(); Jak widað, w wyróšnionym wierszu zastosowaliŁmy zĪošony selektor — .tabs li:first a — który sĪušy do pobrania pierwszej zakĪadki. Selektor ten (podob- nie jak wszystkie inne selektory elementów potomnych) nalešy analizowað od strony prawej do lewej. Litera a umieszczona z prawej strony selektora oznacza, še chodzi o pobranie znacznika a . Umieszczony w Łrodkowej czĂŁci ĪaĬcuch li:first korzysta z pseudoelementu first pobierajîcego pierwszy element potomny. W naszym przypadku caĪy ten fragment selektora pozwala pobrað znacznik li bĂdîcy pierwszym dzieckiem innego elementu. Poniewaš za- kĪadki zostaĪy utworzone przy ušyciu listy, zatem li:first odpowiada pierw- szemu elementowi tej listy (czyli pierwszej zakĪadce). I w koĬcu fragment .tabs pozwoli mieð pewnoŁð, še pobierzemy odnoŁnik umieszczony na liŁcie bĂdîcej czĂŁciî naszego panelu kart. Zabezpiecza on przed przypadkowym pobraniem odnoŁnika zapisanego na innej liŁcie wypunktowanej (na przykĪad peĪniîcej rolĂ paska nawigacyjnego), umieszczonej w innym miejscu strony. Po pobraniu interesujîcego nas elementu wywoĪujemy funkcjĂ click(); jednak w tym przypadku nie sĪušy ona do okreŁlenia funkcji anonimowej obsĪugujîcej zdarzenia click, lecz do jego zgĪoszenia. Innymi sĪowy, wywoĪanie umieszczone w wierszu 9. oznacza: „hej, przeglîdarko — kliknij pierwszî zakĪadkĂ”. ZgĪosze- nie tego zdarzenia powoduje caĪî sekwencjĂ czynnoŁci: ukrycie kart, wyróšnie- nie zakĪadki i stopniowe wyŁwietlenie odpowiedniej karty. O rany! To juš prawie wszystko. GdybyŁ jednak stronĂ w tej postaci wyŁwietliĪ w przeglîdarce, zauwa- šyĪbyŁ pewnie jeden, niewielki problem. Poniewaš zakĪadki sî odnoŁnikami, gdy zatem okno przeglîdarki bĂdzie niewielkie, mošna zaobserwowað, še po klik- niĂciu zakĪadki przeglîdarka nie tylko wyŁwietli odpowiedniî kartĂ, lecz takše do niej przeskoczy. Musisz zatem poinstruowað przeglîdarkĂ, by nie przechodziĪa do miejsca docelowego odnoŁnika. 8. Na koĬcu anonimowej funkcji obsĪugujîcej zdarzenia click (patrz wiersz 9.) dodaj instrukcjĂ return false;. A tak powinna wyglîdað 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 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 323 Organizowanie informacji przy ušyciu kart 9. Zapisz plik i wyŁwietl stronĂ w przeglîdarce. DokoĬczona przykĪadowa strona powinna wyglîdað tak, jak przedstawiona na rysunku 10.3. Mošna jî poszerzyð o wiĂcej zakĪadek i kart, dodajîc do listy ko- lejne punkty z odnoŁnikami wskazujîcymi kolejne znaczniki div reprezen- tujîce nowe karty. Rysunek 10.3. Panele zakĥadek stanowié elegancki sposób zapewnienia uŜytkownikom ĥatwego dostýpu do wielu informacji przy jednoczesnym oszczýdzaniu miejsca na stronie Uwaga: Peĥné wersjý tego przykĥadu — complete_tabs.html — moŜna znaleŚë w katalogu R10. Dodat- kowo umieļciliļmy tam takŜe bardziej zĥoŜoné wersjý tego samego przykĥadu, pozwalajécé na umieszczanie na jednej stronie kilku paneli kart. Znajdziesz jé w pliku complete_complex_tabs.html. Zostaĥy w niej zastosowane zaawansowane funkcje jQuery sĥuŜéce do poruszania siý po drzewie DOM strony, opisane w dalszej czýļci ksiéŜki, na stronie 432. 324 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 W I E D Z A W P I G U ĩ C E Projekt jQuery UI Bardziej zaawansowané wersjý panelu kart moŜna zna- leŚë w projekcie jQuery UI. Jest to oficjalny projekt ze- spoĥu jQuery, którego celem jest pisanie wtyczek roz- wiézujécych popularne zadania zwiézane z tworzeniem interfejsu uŜytkownika; sé to „akordeony” (ang. accor- dion), karty, okna dialogowe, kalendarze oraz elemen- ty stron, które moŜna przeciégaë. Uczestnicy projektu déŜé do opracowania jednej wtyczki, która zapewniĥa- by moŜliwoļë rozwiézania wiýkszoļci problemów napoty- kanych podczas tworzenia interfejsu uŜytkownika apli- kacji internetowych. Projekt ten ma swojé wĥasné witryný WWW (http://jqueryui.com/), na której moŜna znaleŚë najnowszé wersjý kodu, przykĥady oraz odnoļnik do do- kumentacji umieszczonej na gĥównej witrynie jQuery. Projekt jQuery UI udostýpnia wiele narzýdzi dla projek- tantów stron, a nawet obsĥuguje tematy CSS — pozwa- lajéce na zapewnienie wspólnego, spójnego wyglédu wszystkich elementów jQuery UI. Projekt ten jest sto- sunkowo zĥoŜony i w jego skĥad wchodzi wiele róŜnych elementów. Pliki projektu moŜna takŜe modyfikowaë i dostosowywaë do wĥasnych potrzeb — usuwaë z nich komponenty, których nie býdziemy potrzebowaë, ogra- niczajéc tym samym wielkoļë pliku i skracajéc czas je- go pobierania. MoŜna nawet tworzyë wĥasne tematy CSS dopasowujéce wygléd komponentów jQuery UI do wyglédu naszej witryny. Caĥy ten proces uĥatwia specjal- ne narzýdzie sĥuŜéce do przygotowywania pliku jQuery UI, dostýpne na stronie http://jqueryui.com/donwload. W poprzednim wydaniu tej ksiéŜki wtyczka jQuery UI byĥa uŜywana w kilku rozdziaĥach, jednak w miýdzyczasie ze- spóĥ jej twórców zdecydowaĥ siý na caĥkowite przepisa- nie jej kodu i dodanie wielu nowych, fascynujécych kom- ponentów oraz moŜliwoļci. Niestety, w czasie pisania tej ksiéŜki najnowsza wersja wtyczki jQuery UI (numer 1.9) nie byĥa jeszcze dostýpna, dlatego teŜ nie warto tracië czasu na poznawanie grupy komponentów, które i tak niebawem zostané zastépione. Dlatego w tym wydaniu ksiéŜki jQuery UI i jej komponenty nie zostaĥy opisane. Jednak jQuery UI zapowiada siý doskonale i zdecydowa- nie warto siý nié interesowaë. Zajrzyj zatem na witryný jQuery UI, by przekonaë siý, czy wersja 1.9 zostaĥa juŜ opublikowana; jeļli tak, sprawdŚ jé koniecznie. Dodawanie sliderów Kolejnym narzĂdziem 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, prezentujîce jedno wybrane zdjĂcie lub fragment treŁci, wybrane z wiĂkszej grupy. Wiele witryn zawierajîcych ba
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

JavaScript i jQuery. Nieoficjalny podręcznik
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: