Co jQuery (ne)umí
Framework jQuery poskytuje poměrně širokou škálu funkcí, které podstatně zjednodušují vývoj javascriptových webových aplikací. Některé věci byste tam však hledali marně. To se týká zejména různých ovládacích komponent a jejich fungování. Filosofie je totiž taková, že v základním frameworku ani být nemají – jsou soustředěny do nadstavby nazvané jQuery UI.
Pokud pokročilejší práci s UI nepotřebujete, nemusíte jQuery UI využívat, vystačíte si se samotným jQuery. V případě potřeby pak můžete kdykoli přidat jQuery UI a použít z něj, co je potřeba. Styl práce je samozřejmě stejný jako u jQuery (tedy především využití selektorů).
Kde a jak jQuery UI získat
V první řadě je potřeba mít (nebo využít z CDN) základní jQuery. Současná řada verzí jQuery UI, tedy 1.11, vyžaduje jQuery verze 1.6 nebo vyšší. Totéž se týká i dvou starších, nicméně stále podporovaných řad 1.10 a 1.9.
Dalším krokem je stažení jQuery UI. Na rozdíl od jQuery je jQuery UI potřeba vždycky stáhnout, není k dispozici prostřednictvím CDN (nebo být eventuálně může, ale to nemusí vždy vyhovět potřebám aplikace). Je tomu tak proto, že vždy obsahuje výchozí grafické téma (případně nemusí, ale pak nelze využívat řadu funkcí) a těch může být nespočet. Lze si vybírat z připravených témat nebo si sestavit vlastní.
Navíc pokud nepotřebujete celý balík, můžete si připravit takový, kde budou jen potřebné funkce. K tomu všemu slouží Download Builder. Vyberete si verzi, zaškrtnete požadované skupiny funkcí nebo přímo jednotlivé funkce a vyberete si téma (viz dále). Po stisku tlačítka Download si můžete stáhnout hotový balíček, který obsahuje vše potřebné – jak javascriptové soubory, tak i soubory kaskádových stylů a v nich použité obrázky.
Pokud není důvod držet balíček co nejmenší, můžete nechat zaškrtnuté všechno (výchozí stav). Zejména ve fázi vývoje je to nejlepší cesta, pro produkční nasazení se pak může případně použít ořezaná verze, ve které budou jen použité komponenty.
Balíček potom rozbalíte k souborům dané webové aplikace. Co se týká volby tématu, k dispozici je široká škála různých připravených témat. Prohlédnout si je můžete v ThemeRolleru, který jinak slouží také pro návrh témat vlastních. Na kartě Gallery vidíte připravená témata – jako výchozí je při stahování nastaveno UI lightness, ale někdo může dát přednost tlumenějším či tmavším barvám nebo si barevnost přizpůsobit své aplikaci.
Použití v HTML kódu
Do HTML kódu je potřeba přidat (samozřejmě kromě odkazu na jQuery) odkaz jak na javascriptový soubor jQuery UI, tak i na soubor CSS. Pro vývoj použijte „plnohodnotné“ verze (s čitelným kódem), pro produkci verze „minifikované“ (mají v názvu „min“). Vývojový kód by tedy vypadal například takto:
<link rel="stylesheet" type="text/css" href="jquery-ui.css"> <script type="application/javascript" src="jquery.js"></script> <script type="application/javascript" src="jquery-ui.js"></script>
Pro produkční kód by stačilo před příponu názvu jednotlivých souborů přidat „min“, bude to tedy například jquery-ui.min.js. Nemáte-li samostatný soubor s jQuery, můžete použít ten, který je automaticky přibalován do balíčku. Příslušný řádek by pak (při adresářích ponechaných beze změn) vypadal takto:
<script type="application/javascript" src="external/jquery/jquery.js"></script>
Co všechno jQuery UI obsahuje
V jQuery jsou funkce různých druhů, při tvorbě balíčku ke stažení jsou rozděleny do těchto skupin:
- UI Core – Obsahuje základní funkcionalitu využívanou v různých widgetech, efektech a dalších funkcích.
- Interactions – Interakce uživatele a aplikace. Můžete například velmi snadno učinit grafické prvky přemístitelné myší nebo umožnit měnit myší jejich velikost.
- Widgets – Grafické prvky (widgety), například tlačítko, dialog, posuvník nebo kalendář.
- Effects – Efekty všeho druhu, například blednutí, odrážení, pulsování apod.
V dalších dílech seriálu se postupně podíváme na to, jak se s jednotlivými funkcionalitami pracuje. Jako první přijdou na řadu uživatelské interakce.