načítání...
menu
nákupní košík
Košík

je prázdný
a
b

E-kniha: jQuery pro neprogramátory – Ondřej Baše

jQuery pro neprogramátory

Elektronická kniha: jQuery pro neprogramátory
Autor: Ondřej Baše

Příručka je určená vývojářům webových stránek, pomocí praktických příkladů poskytuje návody k vytváření interaktivních a funkčně bohatých webů. Základy javascriptové ... (celý popis)
Titul je skladem - ke stažení ihned
Médium: e-kniha
Vaše cena s DPH:  299
+
-
10
bo za nákup

ukázka z knihy ukázka

Titul je dostupný ve formě:
elektronická forma tištěná forma

hodnoceni - 75.7%hodnoceni - 75.7%hodnoceni - 75.7%hodnoceni - 75.7%hodnoceni - 75.7% 100%   celkové hodnocení
1 hodnocení + 0 recenzí

Specifikace
Nakladatelství: » Computer press
Dostupné formáty
ke stažení:
PDF
Upozornění: většina e-knih je zabezpečena proti tisku a kopírování
Médium: e-book
Počet stran: 368
Rozměr: 23 cm
Úprava: ilustrace
Vydání: 1. vyd.
Skupina třídění: Programování. Software
Jazyk: česky
ADOBE DRM: bez
Nakladatelské údaje: Brno, Computer Press, 2012
ISBN: 978-80-251-3750-5
Ukázka: » zobrazit ukázku
Popis / resumé

Příručka je určená vývojářům webových stránek, pomocí praktických příkladů poskytuje návody k vytváření interaktivních a funkčně bohatých webů. Základy javascriptové knihovny jQuery a zejména jQuery UI, navazující pokročilejší techniky. Přidání dalších funkcí formou názorných příkladů. Vylepšení webu o praktické prvky (formuláře, galerie, multimédia).

Popis nakladatele

Chcete své webové stránky změnit na interaktivní a živou prezentaci, se kterou budou její návštěvníci rádi pracovat? Naučte se pomocí knihovny jQuery UI vytvářet funkčně bohaté a uživatelsky přívětivé weby, na něž se budou jejich uživatelé rádi vracet.

V devíti kapitolách se postupně seznámíte se základy knihoven jQuery a zejména jQuery UI, na které navazují další, pokročilejší techniky. Autor vám na řadě praktických a plně funkčních příkladů ukáže, jak webové prezentaci přidat další funkce, které návštěvníkovi stránek zpříjemní jejich čtení a používání. Dozvíte se, jak vylepšit svůj web o praktické prvky (formuláře, galerie, multimédia), jejichž používání bude návštěvníky bavit a nevyžene je při prvním špatně zadaném vstupu.

Publikace vás mimo jiné naučí:
* Měnit vzhled stránek pomocí motivů
* Rozmístit navigaci a zpřehlednit tak webovou prezentaci
* Kontrolovat data zadaná do formulářů
* Implementovat do webové aplikace přesouvání prvků myší
* Vypisovat seznamy a umožnit jejich další řazení
* Přidat na stránky multimediální obsah
* Vytvořit uživatelsky přívětivou fotogalerii

O autorovi:
Ondřej Baše je zkušený programátor webových aplikací, které vyvíjí především s použitím jazyků JavaScript, PHP, HTML a CSS. Při vývoji využívá i oblíbených knihoven jQuery a jQuery UI. Přeložil také řadu titulů o webových technologiích.
(průvodce využitím knihovny jQuery UI)

Předmětná hesla
Zařazeno v kategoriích
Ondřej Baše - další tituly autora:
jQuery pro neprogramátory -- Průvodce využitím knihovny jQuery UI jQuery pro neprogramátory
 
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

Ondřej Baše

jQuery pro neprogramátory

Průvodce využitím knihovny jQuery UI

Computer Press

Brno

2012


jQuery pro neprogramátory

Průvodce využitím knihovny jQuery UI

Ondřej Baše

Obálka: Martin Sodomka

Odpovědný redaktor: Martin Herodek

Technický redaktor: Jiří Matoušek

Objednávky knih:

http://knihy.cpress.cz

www.albatrosmedia.cz

eshop@albatrosmedia.cz

bezplatná linka 800 555 513

ISBN 978-80-251-3750-5

Vydalo nakladatelství Computer Press v Brně roku 2012 ve společnosti Albatros Media a. s. se sídlem

Na Pankráci 30, Praha 4. Číslo publikace 16 341.

© Albatros Media a. s. Všechna práva vyhrazena. Žádná část této publikace nesmí být kopírována

a rozmnožována za účelem rozšiřování v jakékoli formě či jakýmkoli způsobem bez písemného

souhlasu vydavatele.

1. vydání


Obsah

3

Obsah

ÚVOD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

Co najdete v této knize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Komu je tato kniha určena . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Co budeme potřebovat k vývoji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Webový prohlížeč. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Vývojové prostředí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Webový server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Archiv se zdrojovými kódy příkladů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Konvence zápisu textu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Zpětná vazba od čtenářů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Errata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

KAPITOLA 1

KNIHOVNA JQUERY UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21

Co je knihovna jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Dokumentace knihovny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Stažení knihovny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Výběr verze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Výběr komponent. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Výběr některého ze standardních motivů vzhledu . . . . . . . . . . . . . . . . . . . 26 Obsah balíku knihovny jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

KAPITOLA 2

MOTIVY VZHLEDU . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29

Pokročilá nastavení motivů vzhledu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Název složky s motivem vzhledu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Oblast platnosti kaskádových stylů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Příklad přepínání motivů vzhledu s pomocí pokročilých nastavení . . . . . . 31 Nástroj ThemeRoller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Galerie motivů vzhledu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33


Obsah

4

Vlastní motiv vzhledu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Vývojářský nástroj pro prohlížeč Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Zásuvný modul Theme Switcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Vytvoření zásuvného modulu Theme Switcher . . . . . . . . . . . . . . . . . . . . . 40

Možnosti nastavení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Shrnutí druhé varianty příkladu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Framework knihovny jQuery UI pro kaskádové styly . . . . . . . . . . . . . . . . . 43

Šablony stylů motivu vzhledu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Obecné třídy frameworku knihovny jQuery UI pro kaskádové styly. . . . . . 44

Tvorba vlastního motivu vzhledu od začátku . . . . . . . . . . . . . . . . . . . . . . . 46 Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

KAPITOLA 3

ZÁKLADY KNIHOVNY JQUERY . . . . . . . . . . . . . . . . . . . . . . . . . . . .49

Co je knihovna jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Stažení knihovny jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Oficiální dokumentace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Základní stavební kameny knihovny jQuery . . . . . . . . . . . . . . . . . . . . . . . . 51

Funkce jQuery() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Globální objekt jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Objekty knihovny jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Jak používat selektory knihovny jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

KAPITOLA 4

NAVIGACE V OBSAHU STRÁNKY . . . . . . . . . . . . . . . . . . . . . . . . . .61

Náš cíl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Základ webových stránek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Knihovna jQuery UI s motivem vzhledu Start. . . . . . . . . . . . . . . . . . . . . . . 63

Dokumenty HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Vložení stylů a skriptů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Tvorba hlavní nabídky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Ovládací prvek Tabs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Rozdělení informací do podsekcí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Rozvržení úvodní strany. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Ovládací prvek Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Upozornění při vstupu do části pro registrované uživatele . . . . . . . . . . . . . 85

Ovládací prvek Dialog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Doladění detailů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Zápatí stránek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Vtipy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Upozornění a logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96


Obsah

5

KAPITOLA 5

FORMULÁŘE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97

Náš cíl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Základ příkladu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Úprava velikosti textové oblasti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Interakce Resizable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Datum ve formuláři . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Ovládací prvek Datepicker. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Výběr rezervovatelných dní pomocí technologie AJAX . . . . . . . . . . . . . . 114 Funkce automatického dokončování . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Ovládací prvek Autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Vzdálený zdroj pro funkci automatického dokončování. . . . . . . . . . . . . . 126 Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

KAPITOLA 6

PŘESOUVÁNÍ OBJEKTŮ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .131

Náš cíl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Základ příkladu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Soubor index.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Soubor hlavni.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Přesouvání produktů do košíku a z košíku . . . . . . . . . . . . . . . . . . . . . . . . 136

Interakce Draggable. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Interakce Droppable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 Úprava počtu kusů produktů v košíku . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

Ověření, zda uživatel zadává jako počet kusů číslo. . . . . . . . . . . . . . . . . 161

Změna počtu kusů produktu v košíku . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Animace a efekty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Prosté uplatnění efektů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Animovaná změna viditelnosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

Postupná změna barvy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

Pozvolné přechody mezi třídami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

Pokročilé možnosti průběhu animace . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

KAPITOLA 7

SEZNAMY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175

Náš cíl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Základ příkladu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

Soubor index.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

Soubor hlavni.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Výběr skladeb do uživatelského seznamu skladeb . . . . . . . . . . . . . . . . . 181

Možnost nastavení handle interakce Draggable . . . . . . . . . . . . . . . . . . . 182

Možnost nastavení connectToSortable interakce Draggable. . . . . . . . . . 182

Možnost nastavení revert interakce Draggable . . . . . . . . . . . . . . . . . . . . 183


Obsah

6

Řazení seznamu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

Interakce Sortable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Výběr položek seznamu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

Interakce Selectable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Označení skladeb jako oblíbených . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Svázání události click s odkazy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Obsluhující funkce oznacVybraneSkladbyJakoOblibene() . . . . . . . . . . . . 199

Obsluhující funkce vyradVybraneSkladbyZOblibenych() . . . . . . . . . . . . . 201 Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

KAPITOLA 8

MULTIMEDIÁLNÍ OBSAH . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .203

Náš cíl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Jazyk HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Struktura dokumentu HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Element audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

Element video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Základ příkladu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Soubor index.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

Soubor hlavni.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Přizpůsobení motivu vzhledu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Změna velikosti přehrávače . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Výběr a načtení prostředku k přehrání . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Údaje o prostředcích . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Výběr prostředku klepnutím na jeho položku. . . . . . . . . . . . . . . . . . . . . . 216

Načítání prostředku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

Inicializace přehrávače. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Uvedení přehrávače do výchozího stavu . . . . . . . . . . . . . . . . . . . . . . . . . 221

Zobrazení tlačítka pro přehrávání . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Výběr výchozího prostředku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Zobrazování časových údajů . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Zobrazování aktuálního času . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

Zobrazování celkového času . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Reakce na načtení metadat prostředku . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Ovládací tlačítka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Ovládací prvek Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Indikátor průběhu načítání . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

Ovládací prvek Progressbar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Posouvání přehrávaného prostředku a změna hlasitosti . . . . . . . . . . . . . 241

Ovládací prvek Slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Ztlumení a zesílení přehrávače . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252


Obsah

7

KAPITOLA 9

FOTOGALERIE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253

Náš cíl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Základ příkladu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

Soubor index.html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 Uspořádání zdrojového kódu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

Návrhový vzor MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Seskupování zdrojového kódu do objektů. . . . . . . . . . . . . . . . . . . . . . . . 257

Uspořádání kódu do objektů podle vzoru MVC . . . . . . . . . . . . . . . . . . . . 257 Otevření fotogalerie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Generování ovládacích prvků . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Načítání fotografií . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Určení třídy skupiny fotografií . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Načtení údajů o skupině fotografií . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

Načítání originálních fotografií ze skupiny . . . . . . . . . . . . . . . . . . . . . . . . 269 Základní rozvržení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Pomocný nástroj Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

Zobrazení aktuální fotografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

Události aktuální fotografie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Rozmístění ovládacích prvků . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 Korekce rozvržení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Přizpůsobení stavu tlačítek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Doplnění obsluhy událostí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298

Svázání událostí s tlačítky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298

Odstranění událostí aktuální fotografie . . . . . . . . . . . . . . . . . . . . . . . . . . 299 Zavření fotogalerie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 Zobrazování předchozí a následující fotografie . . . . . . . . . . . . . . . . . . . . 302

Příprava na animaci . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Animace přesunu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

Dokončení animace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Shrnutí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

PŘÍLOHA A

OVLÁDACÍ PRVKY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .313

Ovládací prvek Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Ovládací prvek Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 Ovládací prvek Dialog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Ovládací prvek Datepicker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Ovládací prvek Autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 Ovládací prvek Button. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332 Ovládací prvek Progressbar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 Ovládací prvek Slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335


Obsah

8

PŘÍLOHA B INTERAKCE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337

Interakce Resizable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

Interakce Draggable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

Interakce Droppable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

Interakce Sortable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

Interakce Selectable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 PŘÍLOHA C EFEKTY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .353

Efekt Blind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

Efekt Bounce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

Efekt Clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354

Efekt Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354

Efekt Explode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354

Efekt Fade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355

Efekt Fold . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355

Efekt Highlight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355

Efekt Puff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Efekt Pulsate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Efekt Scale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Efekt Shake . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

Efekt Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

Efekt Slide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358

Efekt Transfer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 PŘÍLOHA D ZÁSUVNÉ MODULY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .359

Zásuvný modul Theme Switcher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 REJSTŘÍK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361


9

Úvod

V dnešní uspěchané době jsme všichni rádi, když můžeme nějakým způsobem ušetřit čas.

U webových aplikací to platí dvojnásob. Aplikace lze vyvíjet složitě, ale také jednoduše. Buď

jen uspoříme nějaký čas, nebo zbývající čas využijeme k testování a zlepšování své aplikace.

Každý, kdo někdy zkoušel programovat v jazyku JavaScript, ví, že situace není až tak jedno

duchá jako u programovacích jazyků pro desktopové aplikace. Webové prostředí je znač

ně nestabilní. Jednotlivé webové prohlížeče interpretují jazyky HTML, CSS a  JavaScript

odlišným způsobem a obvykle ne v souladu se standardy. Poslední dobou sice začíná svítat

na lepší časy, ale stále musíme počítat se skutečností, že někteří uživatelé můžou mít starší

verze webových prohlížečů.

Starší verze webových prohlížečů se vyznačovaly tím, že jsme napsali zdrojový kód jazyka

JavaScript (případně jazyka HTML či CSS) v jednom prohlížeči a následně jsme zjistili, že

v druhém webovém prohlížeči nefunguje, ačkoliv by měl. Napsat na první pokus kód fun

gující ve všech webových prohlížečích bylo spíše dílem náhody. Trendem současné doby

je přesvědčovat uživatele, že přejít na moderní webový prohlížeč se jim vyplatí. Důvod

nespočívá pouze v tom, že vývojáři se nemusejí s novými prohlížeči tolik vztekat a posílat

je ke všem čertům, ale nové prohlížeče mají oproti těm starým mnoho funkcí, které ocení

právě uživatelé.

Ne vždy se nám ale podaří uživatele přesvědčit. Například někteří uživatelé nemůžou změnit

svůj webový prohlížeč, protože jim to interní směrnice nebo technologická infrastruktura

jejich společnosti neumožňuje. Jiní uživatelé nemusejí ani vědět, jak svůj webový prohlížeč

změnit nebo aktualizovat. Zkrátka a dobře – musíme počítat s tím, že nevytváříme aplikaci

šitou na míru poslední verzi svého webového prohlížeče.

Vývoj složitějších projektů jen s použitím jazyka JavaScript dnes odpovídá téměř vraždě své

konkurenceschopnosti. Každý vývojář potřebuje knihovnu, která se snaží potírat (v ideál

ním případě eliminovat) rozdíly mezi jednotlivými webovými prohlížeči. Nemusíme se

hned hrnout do psaní své vlastní knihovny, protože přesně z výše zmíněných důvodů napro

gramoval John Resig v roce 2006 knihovnu jQuery, aniž by tušil, jak oblíbenou se stane.

Podobných knihoven jazyka JavaScript existuje celá řada, ale tato si získala velké množství

fanoušků zejména díky snadné použitelnosti.


Úvod

10

Na knihovně jQuery je založena také knihovna jQuery UI, kterou v roce 2007 naprogramoval Paul Bakaus. Tato knihovna má usnadnit tvorbu nejrůznějších dynamických prvků uživatelského rozhraní, a to až do takové míry, že v mnoha případech dosáhneme skvělých výsledků takřka bez práce. Právě této knihovně se budeme věnovat v této knize. Na některých místech se samozřejmě nevyhneme tématům z knihovny jQuery, jelikož se přece jen jedná o rodičovskou knihovnu pro knihovny jQuery UI.

Co najdete v této knize

Knihovně jQuery UI se budeme snažit porozumět na praktických příkladech, kterými je tato kniha protkána. Na začátku kapitoly si obvykle vytyčíme cíle, kterých chceme dosáhnout, na konci kapitoly si shrneme, jak (a jestli) se nám to podařilo. Tato kniha je rozdělena do devíti kapitol:

1. Knihovna jQuery UI – první kapitola obsahuje základní informace o knihovně jQue

ry UI, které se budeme věnovat v této knize.

2. Motivy vzhledu – kapitola pojednávající o  tom, jak přizpůsobit vzhled ovládacích

prvků knihovny jQuery UI svým vlastním představám.

3. Základy knihovny jQuery – základní informace o  knihovně jQuery nezbytné pro

lepší pochopení zdrojových kódů v jednotlivých příkladech.

4. Navigace v obsahu stránky – v této kapitole si ukážeme první ovládací prvky knihov

ny jQuery UI, s nimiž můžeme uspořádat informace na svých webových stránkách

a ulehčit tak uživateli navigaci v jejich obsahu.

5. Formuláře – rady a nápady, jak nám knihovna jQuery UI může pomoci s tvorbou

„inteligentních“ formulářů.

6. Přesouvání objektů – podrobný popis způsobu přesouvání objektů technikou táhni

a pusť, demonstrovaný na fiktivním internetovém obchodu.

7. Seznamy – na příkladu hudební knihovny zjistíme, jak lze pracovat se seznamy (a jiný

mi podobnými elementy) v knihovně jQuery UI.

8. Multimediální obsah – v  této kapitole sestavíme multimediální přehrávač založe

ný na jazyku HTML5. Uživatelské rozhraní k tomuto přehrávači se bude samozřej

mě skládat z tlačítek, indikátorů průběhu a jezdců, což jsou všechno ovládací prvky

dostupné v knihovně jQuery UI.

9. Fotogalerie – vytvoříme fotogalerii typu lightbox s pomocí nástroje Position. Tento

příklad bude o něco složitější, proto se budeme rovněž zabývat problémem, jak pře

vést své představy do kódu a neztratit se v něm. Za poslední kapitolou se nacházejí čtyři přílohy s tabulkami, které obsahují informace z oficiální dokumentace knihovny jQuery UI. Ačkoliv se většinou jedná o  přesně přeložené informace, místy jsou doplněné, nebo naopak některé informace chybějí, a to z toho důvodu, že daná věc například v době psaní této knihy nefungovala, jak měla. Myslím, že tyto informace ocení i čtenáři, kteří jsou méně zběhlí v angličtině.


Komu je tato kniha určena

11

Komu je tato kniha určena

Tato kniha je určena samozřejmě všem vývojářům, kteří chtějí ušetřit čas při tvorbě dynamických webových aplikací takovým způsobem, že se ponoří do světa knihoven jQuery a jQuery UI. Zkušeným programátorům bude pravděpodobně připadat až příliš jednoduchá, ale začínající programátoři, kodéři, designéři a další počítačoví nadšenci ji zajisté ocení. Všechna témata v knize jsou doplněna příklady popsanými podrobně krok za krokem. Nebudete-li si vědět rady, nebojte se na chvíli si odpočinout a následně se k danému tématu vrátit znovu. Pokud přeskočíte kapitolu o základech knihovny jQuery, protože vám bude připadat příliš složitá, zkuste se k  ní vrátit, až napíšete několik příkladů a  zatoužíte lépe poznat, jak fungují „pod pokličkou“. Tato kniha předpokládá aktivní znalost jazyků HTML a CSS. Vhodné je mít alespoň nějaké povědomí o tom, jak funguje jazyk JavaScript. Zkušenost s tvorbou moderní javascriptové aplikace není nutná, ale pokud občas používáte fragmenty kódu jazyka JavaScript ve svých webových stránkách, snadněji pochopíte příklady z této knihy.

Co budeme potřebovat k vývoji

Máte rádi skládačky? Snad ano, protože nyní budeme jednu takovou skládat. Abychom mohli psát zdrojový kód pro příklady v této knize, musíme posbírat všechny nezbytné prostředky, které budeme k vývoji potřebovat. Jedná se o tyto prostředky:

 moderní webový prohlížeč,

 vývojové prostředí,

 webový server,

 archiv se zdrojovými kódy příkladů z této knihy,

 knihovnu jQuery UI (a knihovnu jQuery, která však obvykle bývá součástí staženého

balíku knihovny jQuery UI) s motivem vzhledu Start.

Knihovně jQuery UI a jejím motivům vzhledu se budeme věnovat v kapitolách „Knihovna jQuery UI“ a „Motivy vzhledu“. Knihovnu jQuery si stručně popíšeme v kapitole „Základy knihovny jQuery“.

Webový prohlížeč

Webový prohlížeč je nezbytnou součástí pro vývoj webových stránek a aplikací. Jedná se o tak samozřejmou součást, že jsme se o ní ani nemuseli zmiňovat. Nicméně pro úplnost a objasnění několika věcí ho nesmíme opomenout. Velmi pravděpodobně již máte svůj oblíbený webový prohlížeč. Pokud jste si zatím prohlížeč nevybrali, vhodné je zvolit si takový, k němuž je k dispozici nějaký ladicí nástroj pro kód jazyků HTML, CSS a JavaScript. Takový webový prohlížeč není těžké najít, protože téměř všechny moderní webové prohlížeče nabízejí vývojářské nástroje buď přímo, nebo jako doplněk.


Úvod

12

LADĚNÍ ZDROJOVÉHO KÓDU

Ladění kódu pomocí ladicího nástroje velmi zjednodušuje práci. Věřte, že žádný

člověk není neomylný, a o vývojářích to platí dvojnásob. Někteří z vás se už možná

někdy s takovým nástrojem setkali, nebo jej dokonce pravidelně používají, ale asi

jsou mezi vámi i lidé, kteří se s ním nikdy nesetkali nebo ho používat nechtějí.

Ladění kódu lze považovat za pokročilejší téma, proto si ho v této knize popisovat

nebudeme. Pokud se však někdy přistihnete, že přidáváte do kódu příkazy vypi

sující nějaké hodnoty na obrazovku jen proto, abyste odhalili chybu, vzpomeňte si

na tento odstavec a uvědomte si, že právě začínáte ladit kód. Tato situace nastane

dříve, než si někteří z vás možná myslí. V takovém případě platí jedna rada – oka

mžitě zbystřete, zkuste vyhledat nějaký ladicí nástroj a naučte se s ním pracovat.

Dosáhnete stejného výsledku, jako byste vkládali do kódu ladicí vypisující příkazy,

ale mnohem snadněji a nehrozí, že byste po odhalení chyby zapomněli své nad

bytečné příkazy odstranit. Příklady v této knize jsou otestované v těchto webových prohlížečích:

 Firefox 11 od společnosti Mozilla,

 Google Chrome 18 od společnosti Google,

 Opera 11 od společnosti Opera,

 Internet Explorer 9, 8 a 7 od společnosti Microsoft. Velmi pravděpodobně budou fungovat i ve velké řadě dalších moderních webových prohlížečů. Pokud se mezi vámi nachází příznivce stařičkého prohlížeče Internet Explorer 6 od společnosti Microsoft, velmi se omlouvám za svůj negativní přístup k němu. Přesto si myslím, že většina vývojářů přivítala takovou typicky smutnou událost, jako je pohřeb tohoto prohlížeče, s  velkým nadšením. Jestliže vás tato událost zcela minula, zkuste vyhledat ve vyhledávači Google výraz „pohřeb prohlížeče Internet Explorer 6“. Jistě jste z tohoto textu pochopili, že příklady v této knize nejsou odladěné pro prohlížeč Internet Explorer ve verzi 6 a nižší (pravděpodobně můžete narazit na problémy i s prohlížečem Internet Explorer 7, který nemá k oficiálnímu pohřbu také daleko).

Vývojové prostředí

Jestliže máte své oblíbené vývojové prostředí, s nímž jste spokojeni, můžete tuto část bez obav přeskočit. Pro vývoj dynamických webových stránek je nejvhodnější textový editor schopný pracovat s prostým textem. Do této kategorie nespadá kupříkladu program Word od společnosti Microsoft, protože tento program je textovým procesorem, jenž generuje binární soubory obsahující text se styly a jinými metadaty. Patří sem ale nástroj Poznámkový blok z operačního systému Windows od stejné společnosti. Znamená to tedy, že nástroj Poznámkový blok je nejlepší volbou pro vývoj? Rozhodně ne. Problém spočívá v tom, že pracuje s kódem jako s obecným textem. Ve zdrojovém kódu lze ale rozlišit klíčová slova, proměnné, funkce a další prvky. Určitě oceníte, pokud váš editor

LADĚNÍ ZDROJOVÉHO KÓDU

Ladění kódu pomocí ladicího nástroje velmi zjednodušuje práci. Věřte, že žádný

člověk není neomylný, a o vývojářích to platí dvojnásob. Někteří z vás se už možná

někdy s takovým nástrojem setkali, nebo jej dokonce pravidelně používají, ale asi

jsou mezi vámi i lidé, kteří se s ním nikdy nesetkali nebo ho používat nechtějí.

Ladění kódu lze považovat za pokročilejší téma, proto si ho v této knize popisovat

nebudeme. Pokud se však někdy přistihnete, že přidáváte do kódu příkazy vypi

sující nějaké hodnoty na obrazovku jen proto, abyste odhalili chybu, vzpomeňte si

na tento odstavec a uvědomte si, že právě začínáte ladit kód. Tato situace nastane

dříve, než si někteří z vás možná myslí. V takovém případě platí jedna rada – oka

mžitě zbystřete, zkuste vyhledat nějaký ladicí nástroj a naučte se s ním pracovat.

Dosáhnete stejného výsledku, jako byste vkládali do kódu ladicí vypisující příkazy,

ale mnohem snadněji a nehrozí, že byste po odhalení chyby zapomněli své nad

bytečné příkazy odstranit.


Co budeme potřebovat k vývoji

13

zvýrazní speciální prvky příslušného programovacího jazyka. Podívejte se na obrázek Ú.1

s kódem jazyka JavaScript bez zvýrazněné syntaxe.

Obrázek Ú.1: Kód jazyka JavaScript bez zvýrazněné syntaxe

A nyní si prohlédněte stejný kód se zapnutým zvýrazňováním syntaxe.

Obrázek Ú.2: Kód jazyka JavaScript se zvýrazněnou syntaxí

Kdybyste měli určit, kolik výskytů pravdivostních hodnot true a false tento kód obsahu

je, určitě byste to rychleji zjistili z obrázku Ú.2, protože se na něm zobrazují kurzívou. Zvý

razňování syntaxe však není jedinou vlastností, kterou některé vývojové nástroje nabízejí.

Zajisté vám přijde vhod také zvýrazňování párů složených z počáteční a koncové závorky,

a to pro kulaté, hranaté i složené závorky. Existuje spousta zajímavých funkcí, které usnad

ňují psaní (a také čtení) zdrojového kódu.


Úvod 14

Vývojových prostředí je k dispozici opravdu mnoho. Zde uvedeme dvě jednoduchá a velmi

oblíbená vývojová prostředí pro vývoj v jazycích HTML, CSS a JavaScript.

PSPad Editor

Český vývojový nástroj PSPad Editor je velmi oblíbeným editorem zdrojových kódů. K jeho

rozšíření jistě přispělo, že jej jeho autor (Jan Fiala) nabízí zdarma. Mezi jeho funkce patří

práce s více dokumenty současně, zvýrazňování syntaxe pro spoustu programovacích jazy

ků, konverze textu mezi různými znakovými sadami a bezpočet dalších. Dostupná je také

řada rozšíření.

Tento nástroj můžete stáhnout z oficiálních webových stránek na adrese http://www.pspad.com/cz/.

Určitě si zaslouží vyzkoušet. Pokud se vám program zalíbí a přinese vám užitek, můžete auto

ra za jeho snahu obdarovat – na uvedených webových stránkách najdete další informace.

Notepad++

Nástroj Notepad++ nese název od zmiňovaného nástroje Poznámkový blok (v angličtině

Notepad); obohacují ho však dvě znaménka plus. Je nutné poznamenat, že těch plus je mno

hem více, co se týká jeho funkčnosti. Program Notepad++ nabízí zvýrazňování syntaxe pro

různé programovací jazyky, převod textu mezi znakovými sadami, funkci automatického

dokončování, klienta FTP v podobě zásuvného modulu a spoustu jiných funkcí.

Tento program naprogramoval a udržuje jej Don Ho. Výchozím jazykem tohoto nástroje je

angličtina, ale k dispozici je spousta lokalizovaných textů (mimo jiné i pro češtinu).

Nástroj Notepad++ si můžete stáhnout z  oficiálních webových stránek na adrese http://

notepad-plus-plus.org/. Opět v případě, že by se vám program líbil, můžete autora odměnit.

Webový server

Možná se ptáte, k čemu byste potřebovali webový server, když jazyk JavaScript je skriptova

cím jazykem na straně klienta a stránky HTML obohacené kaskádovými styly rovněž fun

gují na vašem lokálním počítači.

Webový server potřebujete, protože některé příklady používají technologii AJAX. Jestliže

chcete otestovat funkčnost založenou na technologii AJAX, musíte spustit své webové stránky

přímo přes webový prohlížeč a protokol HTTP. Ke kořenovému adresáři lokálního webové

ho serveru se běžně dostanete zadáním adresy URL http://localhost/ (nebo http://127.0.0.1/)

do panelu adresy svého webového prohlížeče. Kdybyste totiž spustili své webové stránky

například poklepáním na soubor index.html v  programu Průzkumník Windows, funkce

založené na technologii AJAX by nefungovaly.

Webový server se spoustou dalších služeb samozřejmě nabízejí všichni poskytovatelé hos

tingových služeb, a pokud provozujete nějaké vlastní webové stránky, jistě už jste jejich služ

by použili. Některé tyto služby jsou k dispozici zdarma; za jiné se platí, přičemž přidanou

hodnotou bývá obvykle zvýšená dostupnost a technická podpora. Většina bezplatných řeše

ní si rovněž vynucuje vložení reklamy. Svá data obvykle nahráváte do adresáře webového

serveru pomocí klienta FTP nebo webového rozhraní nabízeného daným poskytovatelem.

Jestliže nemáte vlastní firemní řešení, určitě budete tyto služby potřebovat pro produkč


Co budeme potřebovat k vývoji

15

ní nasazení svých webových stránek. Pro účely vývoje je však toto řešení nevhodné – bez webového serveru na svém lokálním počítači se prostě neobejdete, jelikož tato varianta je rychlejší a pohodlnější. Opět samozřejmě platí, že pokud máte svůj oblíbený webový server, můžete jeho výběr přeskočit. Pro naše účely by stačilo nainstalovat velmi oblíbený webový server Apache samotný, nicméně jeho instalace a konfigurace je trochu obtížnější. Proto si popíšeme, jak nainstalovat český balík Complex Web Server, a to na operační systém Windows. Jestliže máte jiný operační systém, zkuste na Internetu vyhledat například postup instalace webového serveru Apache pro svůj operační systém. Instalace balíku Complex Web Server Balík Complex Web Server můžete stahovat z oficiálních stránek na adrese http://ponkrac.net/ complex-web-server/cs. Autorem tohoto balíku je ing. Miloslav Ponkrác. Cílem tohoto balíku je usnadnění konfigurace webového serveru Apache spolu s podporou jazyka PHP a databázového stroje MySQL. Navíc díky němu můžete získat i systém pro správu verzí. Nyní si popíšeme, jak nainstalovat balík Complex Web Server ve stabilní verzi 1.4.14, jejž lze stáhnout z adresy http://ponkrac.net/file/cws/complex-web-server-1-4-14/:

1. Spusťte instalační program balíku Complex Web Server 1.4.14.

2. Potvrďte, že chcete pokračovat v instalaci.

3. V  dialogovém okně s  výběrem jazyka pro průvodce instalací ponechejte vybranou

češtinu a klepnutím na tlačítko OK spusťte průvodce instalací.

4. Přejděte k druhému kroku instalačního průvodce – na této stránce můžete zvolit cílové umís

tění balíku Complex Web Server. Výchozím umístěním je složka c:ComplexWebServer.

Po výběru cílové složky klepněte na tlačítko Další.

5. Na stránce s volbou součástí si můžete vybrat součásti, které chcete nainstalovat. Mini

mální konfigurace obsahuje jen webových server Apache a interpreter jazyka PHP 5.

V doporučené konfiguraci se navíc nachází databázový stroj MySQL a plná instalace

obsahuje navíc systém pro správu verzí. V následujících krocích si popíšeme postup

pro výchozí doporučenou konfiguraci (viz obrázek Ú.3). Přejděte k  dalšímu kroku

instalačního průvodce.

6. V následujícím kroku si můžete zvolit název složky pro tento balík v nabídce Start.

Výchozí název Complex Web Server je však nadmíru výstižný. Klepnutím na tlačítko

Další zobrazíte další stránku instalačního průvodce.

7. V  kroku s  nastavením parametrů webového serveru ponechejte výchozí hodnoty

a klepněte na tlačítko Další. Tento krok můžete vidět na obrázku Ú.4.

8. V kroku s nastavením hesla pro databázi MySQL nechejte výchozí hodnotu 3306 v poli

Port. Musíte zadat heslo pro uživatele root databázového stroje MySQL do polí Heslo

uživatele root a Zde zadejte heslo ještě jednou. Toto heslo si zapamatujte nebo bez

pečně poznamenejte. Obrázek Ú.5 znázorňuje tento krok.

9. V  předposledním kroku instalačního průvodce můžete nechat zaškrtávací políčka

s dalšími úlohami instalace zaškrtnutá tak, jak jsou.


Úvod 16

10. V posledním kroku instalačního průvodce klepněte na tlačítko Instalovat, čímž nain

stalujete balík Complex Web Server.

Obrázek Ú.3: Volba součástí balíku Complex Web Server

Obrázek Ú.4: Nastavení parametrů webového serveru

Zda se instalace skutečně zdařila a webový server Apache běží, můžete otestovat jed

noduše. Zadejte adresu http://localhost/ do panelu adresy svého webového prohlížeče.

V případě úspěšné instalace byste měli vidět něco podobného jako na obrázku Ú.6.


Co budeme potřebovat k vývoji

17

Obrázek Ú.5: Nastavení hesla databázového stroje MySQL

Obrázek Ú.6: Obsah kořenového adresáře webového serveru Webový server po zadání této adresy do webového prohlížeče zobrazuje obsah svého kořenového adresáře. Tento kořenový adresář webového serveru odpovídá složce c:ComplexWebServerhttp_docs, pokud jste zvolili výchozí cílové umístění v instalačním průvodci.

Archiv se zdrojovými kódy příkladů

Při práci s příklady v této knize se neobejdete bez archivu, který můžete stáhnout z adresy http://knihy.cpress.cz/K2000 po klepnutí na odkaz Soubory ke stažení. Tento archiv obsahuje složku Základy příkladů se základní strukturou adresářů a souborů pro příklady z jednotlivých kapitol. Obsah této složky se dělí na kapitoly, takže obsahuje složky s předponou Kapitola a číslem kapitoly; například Kapitola04. Je vhodné si zkopírovat základy příkladů do složky, k níž máte právo zápisu. Teoreticky lze zkopírovat základy příkladů do jakékoliv takové složky; vhodným umístěním je však podsložka kořenového adresáře webového serveru. Některé příklady vyžadují ke svému fungování webový server, tuto skutečnost si u nich zdůrazníme. K základu příkladu budete postupně doplňovat soubory nebo kód, až vznikne plně funkční verze příkladu.


Úvod

18

Abyste zkontrolovali, jestli jste si počínali při práci na příkladu správně, můžete si prohlédnout jeho kompletní verzi. Plně funkční verze příkladů s  kompletními zdrojovými kódy najdete rovněž v tomto archivu, a to ve složce Kompletní příklady, jež má stejné uspořádání jako složka Základy příkladů. V  tomto archivu se nachází ještě jedna složka – jQuery UI 1.8.18. Tato složka obsahuje knihovnu jQuery UI ve verzi 1.8.18 se všemi komponentami a s motivem vzhledu Start. Je zde z toho důvodu, že pro tuto verzi knihovny byly otestovány všechny příklady v této knize. Nové i starší verze této knihovny jsou samozřejmě dostupné na oficiálních stránkách této knihovny, jak uvidíte v příští kapitole.

Konvence zápisu textu

Pro lepší srozumitelnost textu v knize jsou některé části odlišené na základě svého významu různými vlastnostmi písma a odstavce. Termíny jsou označené tučným písmem. Příklad: „K  tomuto účelu použijeme ovládací prvek, jenž se nazývá jezdec“. Adresy URL jsou napsané kurzívou. Příklad: „Pokud se chcete dozvědět více informací o rozhraní Google Maps JavaScript API verze 3, najdete je na adrese http://code.google.com/intl/ cs/apis/maps/documentation/javascript/services.html#GeocodingRequests“. Ovládací prvky uživatelského rozhraní jsou zvýrazněné tučným písmem. Příklad: „Jak je patrné, pod názvem každého motivu vzhledu je možné najít dvě tlačítka – tlačítko Download a tlačítko Edit“. Soubory, složky a jiné objekty systému souborů jsou označené kurzívou. Příklad: „Soubor hlavni.js ze složky js momentálně vypadá následovně“. Funkce, proměnné a jiné prvky programovacího jazyka budeme psát ve větě neproporcionálním písmem. Příklad: „Z předchozí verze naší funkce nactiNavrhyObci() víme, že tento text získáme jako hodnotu vlastnosti pozadavek.term“. Rozsáhlejší výpisy zdrojového kódu budou vždy začínat na samostatném řádku a budou rovněž psané neproporcionálním písmem. Tučným neproporcionálním písmem budeme zvýrazňovat důležité části kódu, nebo ty části kódu, které je nutné doplnit do již existujícího zdrojového kódu. Tři tečky (...) budou naopak označovat místa, která se oproti dřívějšímu stavu nezměnila, nebo nejsou z hlediska popisovaného problému podstatná. Příklad:

function zobrazProduktyVKosiku() {

...

$('img.nahled-produktu').draggable({

...

stop: function() {

var $nahled = $(this);

if (!$nahled.data('probihaOdstranovani')) {

$nahled.show();

}

}

});

}


Zpětná vazba od čtenářů

19

Kromě toho rozlišujeme také níže uvedené speciální typy odstavců.

POZNÁMKA

Jakákoliv informace doplňující výklad.

TIP

Zajímavé informace k danému tématu.

UPOZORNĚNÍ

Důležité informace, které obhajují zvolené postupy a varují před potenciálními pro

blémy.

NADPIS POZNÁMKY

Rozsáhlá poznámka na několik odstavců.

Zpětná vazba od čtenářů

Nakladatelství a  vydavatelství Computer Press, které pro vás tuto knihu připravilo, stojí o zpětnou vazbu a bude na vaše podněty a dotazy reago v at. Můžete se obrátit na následující adresy:

Computer Press

Albatros Media a. s., pobočka Brno

IBC

Příkop 4

602 00 Brno

nebo

sefredaktor.pc@albatrosmedia.cz

Computer Press neposkytuje rady ani jakýkoliv servis pro aplikace třetích s tran. Pokud budete mít dotaz k programu, obraťte se prosím na jeho tvůrce.

Errata

Přestože jsme udělali maximum pro to, abyc hom zajistili přesnost a  správnost obsahu, chybám se úplně vyhnout nelze. Pokud v některé z našich knih najdete chybu, ať už chybu v textu nebo v kódu, budeme rádi, pokud nám ji oznámíte. Ostatní uživatele tak můžete ušetřit frustrace a pomoci nám zlepšit následující vydání této knihy. Veškerá existující errata zobrazíte na adrese http://knihy.cpress.cz/K2000 po klepnutí na odkaz Soubory ke stažení.

POZNÁMKA

Jakákoliv informace doplňující výklad.

TIP

Zajímavé informace k danému tématu.

UPOZORNĚNÍ

Důležité informace, které obhajují zvolené postupy a varují před potenciálními pro

blémy.

NADPIS POZNÁMKY

Rozsáhlá poznámka na několik odstavců.



Co je knihovna jQuery UI

21

KAPITOLA 1 Knihovna jQuery UI Na začátek by se slušelo uvést několik informací o knihovně jQuery UI, která je hlavním tématem této knihy. V této kapitole se tedy dozvíte:

 Co je to knihovna jQuery UI.

 Kde byste měli hledat oficiální dokumentaci ke knihovně jQuery UI a co v ní najdete.

 Kde stáhnete balík obsahující knihovnu jQuery UI.

 Jakou verzi knihovny jQuery UI byste si měli vybrat.

 Jak si můžete sestavit vlastní balík s knihovnou jQuery UI.

Co je knihovna jQuery UI

Knihovna jQuery UI je knihovna s  otevřeným zdrojovým kódem, která nabízí spoustu okamžitě použitelných komponent. Její komponenty se dělí do čtyř kategorií – interakce, ovládací prvky, efekty a pomocné nástroje. Hlavní výhoda této knihovny spočívá ve snadné použitelnosti a možnostech stylování. K dispozici je celá řada motivů vzhledu, mezi nimiž můžeme vybírat, nebo si vytvářet své vlastní. Knihovna jQuery UI spatřila poprvé světlo světa 17. září 2007. Zakládá se na velmi oblíbené javascriptové knihovně jQuery. Tvůrcem knihovny jQuery UI je Paul Bakaus, který však momentálně není jejím aktivním vývojářem, ale na jejím vývoji se podílejí (nebo dříve podílely) desítky vývojářů, a  přestože svou práci dělají rádi a  zdarma, řada komerčních společností a vývojářů na volné noze jim poskytla dobrovolné příspěvky. Pokud je chcete rovněž obdarovat, na oficiálních stránkách této knihovny (http://jqueryui.com/) najdete podrobné informace.


KAPITOLA 1 Knihovna jQuery UI

22

Autoři knihovny jQuery UI nabízejí tuto knihovny zdarma pro otevřené i komerční projek

ty pod licencemi GPL a MIT. Jestliže nevíte, co obnáší licence GPL, můžete se to dočíst na

internetové adrese http://cs.wikipedia.org/wiki/GNU_General_Public_License. Popis licen

ce MIT se nachází na adrese http://cs.wikipedia.org/wiki/Licence_MIT. Text licence GPL

pro knihovnu jQuery UI najdete na adrese http://jquery-ui.googlecode.com/svn/tags/latest/

GPL-LICENSE.txt a  text licence MIT na adrese http://jquery-ui.googlecode.com/svn/tags/

latest/MIT-LICENSE.txt.

Dokumentace knihovny

Co všechno knihovna jQuery UI umí, můžete lehce zjistit sami, jelikož na oficiálních strán

kách této knihovny se nachází rozsáhlá dokumentace všech komponent spolu s ukázkami;

konkrétně na adrese http://jqueryui.com/demos/.

Informace o možnostech nastavení, metodách a událostech jednotlivých komponent najde

te v přílohách k této knize. Informace v přílohách jsou lokalizované do češtiny, přičemž na

některých místech jsou doplněné, nebo naopak ochuzené v případě, že určitá věc v době

psaní této knihy (tj. ve verzi jQuery UI 1.8.18) nefungovala, jak měla.

Vraťme se ale k ukázkám komponent na oficiálních webových stránkách. Popišme si kupříkladu

dokumentaci ovládacího prvku Accordion na adrese http://jqueryui.com/demos/accordion/.

Tuto stránku si můžete prohlédnout také na obrázku 1.1.

Obrázek 1.1: Ukázka ovládacího prvku Accordion


Stažení knihovny

23

Jak je patrné z předchozího obrázku, vpravo se nachází seznam příkladů pro ovládací prvek

Accordion. Mezi jednotlivými příklady můžeme přepínat a výsledky sledovat vlevo na reál

ných ukázkách. Příklady komponent jsou zcela funkční a nejen to – můžeme dokonce měnit

jejich vzhled. Vpravo nahoře najdeme rozevírací seznam Theme s dostupnými motivy vzhle

du. Jakmile v něm zvolíme jiný motiv vzhledu, aplikuje se na všechny příklady komponent

knihovny jQuery UI.

Pokud si chcete prostudovat, jak daný příklad funguje, můžete si přečíst jeho zdrojový kód

po klepnutí na odkaz View Source. Všechny informace o dané komponentě knihovny jQue

ry UI se pak nacházejí ve spodní části této stránky, jak lze spatřit na obrázku 1.2.

Obrázek 1.2: Informace o ovládacím prvku Accordion

Zde se dozvíte obecné informace o dané komponentě knihovny jQuery UI, dále informace

o možnostech nastavení, metodách, událostech a možnostech stylování.

Se studiem těchto informací však nemusíte pospíchat – vše se postupně dozvíte v průběhu

této knihy na praktických příkladech a také z přehledů v přílohách. Je však vhodné, abyste

kontrolovali rovněž informace z oficiální dokumentace, jestli se od vydání této knihy něco

nezměnilo. Změny jsou totiž velmi pravděpodobné, protože tato knihovna se neustále vyvíjí.

Stažení knihovny

Knihovnu jQuery UI je možné stahovat ze stránky na adrese http://jqueryui.com/download.

Na této stránce máte na výběr z několika možností. Ke stažení můžete použít takzvané rych

lé odkazy v horní části stránky, jak vidíte na obrázku 1.3.

Rychlé odkazy umožňují stahovat standardní balík se stabilní verzí knihovny jQuery UI

a  také se starší verzí této knihovny. K  dispozici jsou rovněž balíky s  plnými zdrojovými

kódy této knihovny. Pokud chcete stáhnout taktéž motiv vzhledu dle vlastní volby, můžete

jej stáhnout přes další rychlý odkaz.


KAPITOLA 1 Knihovna jQuery UI

24

Obrázek 1.3: Stránka pro stahování knihovny jQuery UI

POZNÁMKA

Jak už jsme si řekli v úvodu, v archivu se zdrojovými kódy k příkladům v této knize

je k dispozici balík s kompletní knihovnou jQuery UI ve verzi 1.8.18 a motivem vzhle

du Start. Pro tuto verzi knihovny jsou odladěné všechny příklady v této knize. Za

účelem testování příkladů z této knihy tudíž nemusíte stahovat knihovnu jQuery UI.

Zde uvedené postupy vám spíše přijdou vhod, až budete chtít použít tuto knihovnu

ve svých vlastních projektech. Balík s knihovnou jQuery UI můžete také stahovat ze sítě CDN společnosti Google na adrese http://code.google.com/intl/cs/apis/libraries/devguide.html#jqueryUI. Na těchto stránkách najdete kromě nejnovějších verzí této knihovny i její starší verze. Výhodou sítě CDN společnosti Google je, že můžete skripty načítat přímo z této sítě – nemusíte je tedy stahovat. Tuto techniku si však popisovat nebudeme – jako každá věc má svoje výhody i nevýhody. Jestliže se chcete dozvědět více informací, na právě uvedené adrese je najdete. Rychlé odkazy a síť CDN společnosti Google mají jednu velkou nevýhodu, a tou je, že si nemůžeme sestavit vlastní balík. Výše uvedená stránka pro stahování knihovny jQuery UI (http://jqueryui.com/download) ve skutečnosti poskytuje nástroj, jenž nám dovoluje sestavit si vlastní balík. Vlastní balík obsahuje námi vybranou verzi knihovny jQuery UI, námi zvolený motiv vzhledu, a také nemusí obsahovat celou knihovnu jQuery UI, ale můžeme si vybrat jen určité komponenty. Ve zbytku této kapitoly si povíme jak na to.

POZNÁMKA

Jak už jsme si řekli v úvodu, v archivu se zdrojovými kódy k příkladům v této knize

je k dispozici balík s kompletní knihovnou jQuery UI ve verzi 1.8.18 a motivem vzhle

du Start. Pro tuto verzi knihovny jsou odladěné všechny příklady v této knize. Za

účelem testování příkladů z této knihy tudíž nemusíte stahovat knihovnu jQuery UI.

Zde uvedené postupy vám spíše přijdou vhod, až budete chtít použít tuto knihovnu

ve svých vlastních projektech.


Stažení knihovny

25

Výběr verze

V pravé části nástroje pro sestavení balíku knihovny jQuery UI si můžeme vybrat verzi, a to

v části označené Ve r s i o n. Na tuto část stránky se můžete podívat na obrázku 1.4.

Obrázek 1.4: Část s výběrem verze knihovny jQuery UI

Zde si můžete vybrat stabilní verzi knihovny jQuery UI nebo její starší verzi. Pokud nemáte

důvod ke stažení starší verze, je vhodné stahovat stabilní verzi. Důvodem pro výběr star

ší verze knihovny jQuery UI může být například to, že ve svém projektu používáte starší

verzi knihovny jQuery, pro kterou jste odladili všechny své skripty jazyka JavaScript a víte,

že s novější verzí knihovny jQuery by nefungovaly.

Měli byste tedy věnovat zvýšenou pozornost tomu, s jakými verzemi knihovny jQuery vybra

ná knihovna jQuery UI spolupracuje. Ne všechny kombinace knihovny jQuery a jQuery UI

jsou vzájemně kompatibilní. S tímto problémem se setkáte jen v situaci, kdy máte vlastní

verzi knihovny jQuery, kterou se nechystáte v brzké době inovovat, jelikož balík knihovny

jQuery UI obsahuje i kompatibilní verzi knihovny jQuery.

Když se podíváte na předchozí obrázek, uvidíte na něm přímo příklad toho, co jste se právě

dozvěděli. Ihned totiž zjistíte, že když chcete použít knihovnu jQuery UI ve verzi 1.8.18,

musíte mít knihovnu jQuery ve verzi 1.3.2 nebo novější. Výběr komponent

V  levé části nástroje pro sestavení balíku ke stažení, konkrétně v  části Components, lze

vybrat komponenty, které budou součástí balíku. Tuto část znázorňuje obrázek 1.5.

Komponenty se dělí do několika kategorií – Jádro knihovny jQuery UI (UI Core), Interak

ce



       
Knihkupectví Knihy.ABZ.cz – online prodej | ABZ Knihy, a.s.
ABZ knihy, a.s.
 
 
 

Knihy.ABZ.cz - knihkupectví online -  © 2004-2020 - ABZ ABZ knihy, a.s. TOPlist