Práce s motivy jQuery UI

Dub 24, 2021

admin

Ken Ramirez
Publikováno 04. dubna 2013

Motivy nejsou novým pojmem. Pravděpodobně jste jich již několik zavedli pomocí stylů kaskádových stylů (CSS) a tříd pro formátování vzhledu svých webových stránek. Použití rámce standardizuje přístup a snižuje množství práce a kódu, který je třeba napsat.

JQuery UI je nyní průmyslovým standardem pro implementaci motivů. Existují i další možnosti, například Dojo (ve spojení s Dijit) nebo Ext JS, ale jQuery UI kombinuje motivy s použitím widgetů, což jsou prvky, s nimiž uživatelé interagují výběrem dat nebo tlačítky. Při pitvání vnitřního fungování souborů, které tvoří téma jQuery UI, nenajdete nic jiného než CSS a JavaScript. Ale právě myšlenkový proces a standardizace, které byly do tohoto použití CSS a JavaScriptu vloženy, dělají z jQuery UI tak vynikající platformu pro vytváření vzhledu webových stránek.

Motivy jQuery UI

Platforma jQuery UI se skládá ze dvou dílčích rámců: rámce widgetů, který obsahuje Widget Factory a sadu běžně používaných widgetů, a rámce CSS. Widget Factory poskytuje základ pro všechny widgety jQuery UI, včetně těch běžně používaných widgetů, které jsou součástí sady widgetů. Při vytváření widgetů použijte jako výchozí bod buď některý z běžných widgetů ze sady, nebo si jej vytvořte od začátku. Jakmile víte, kde se společné widgety nacházejí, otevřete kterýkoli z nich ve svém oblíbeném editoru a zobrazte kód. Odtud buď tento kód upravte a vytvořte vlastní widget (s použitím některého z ostatních widgetů jako výchozího bodu), nebo vytvořte widget s podobnou strukturou.

Struktura složek motivů jQuery UI

Než budete pokračovat v prohlížení jednotlivých souborů a jejich obsahu, stáhněte si jeden z motivů z platformy jQuery UI (odkaz najdete v části Související témata). Stažený soubor ZIP obsahuje tři složky: css, js a development-bundle. Složka development-bundle obsahuje složku themes, ve které jsou uložena vyvíjená témata jQuery UI. Složka themes zase obsahuje složku s názvem vybraného/staženého tématu (například UI lightness) a také složku s názvem base. Tato složka obsahuje výchozí bod pro vaše vlastní témata. Stahuje se vždy, bez ohledu na vybrané téma.

Složka css obsahuje složku s názvem staženého motivu. Tato složka motivu obsahuje soubor CSS, který obsahuje značky CSS pro všechny komponenty nebo widgety. Složka development-bundle však obsahuje také složku themes/ (kde je skutečný název zvoleného tématu), která obsahuje jednotlivé soubory CSS pro jednotlivé komponenty nebo widgety. Tato struktura usnadňuje vyhledávání a úpravu změn ve vlastních tématech. Obrázek 1 ukazuje strukturu složky themes.

Obrázek 1. Struktura složky motivů

Zobrazit obrázek v plné velikosti

Na obrázku 1 nejsou uvedeny všechny soubory ze složky, ale ty důležité jsou zde. Soubor jquery.ui.all.css importuje soubory jquery.ui.base.css a jquery.ui.theme.css, což usnadňuje import souborů pouze pomocí souboru jquery.ui.all.css. Soubor jquery.ui.base.css importuje soubor jquery.ui.core.css a všechny ostatní soubory komponent a widgetů ze stejné složky (není zobrazen na obrázku 1.). Soubor jquery.ui.core.css obsahuje společné třídy sdílené všemi soubory widgetů. Poskytuje základní třídy CSS pro všechny widgety jQuery UI (v rámci tématu) a také společnou viditelnost a pozicování widgetů. Posledním důležitým souborem je soubor jquery.ui.theme.css, který poskytuje společný vzhled a chování sdílené všemi widgety v tématu i samotným tématem.

Soubor jquery.ui.theme.css obsahuje tři různé typy stylů:

Kontejner – Tento styl definuje téma kontejneru, například ui-widget, ui-widget-content nebo ui-widget-header.
Stavy – Tento typ stylu používají widgety jQuery UI k definování vzhledu widgetu při interakci uživatele s ním. Mezi třídy patří ui-state-default, ui-state-hover a ui-state-active.
Náznaky – Jakmile se v aplikaci něco stane (nikoli akcí uživatele), tyto třídy změní vzhled widgetu. Mezi tyto třídy patří ui-state-highlight, ui-state-error a ui-state-disabled.

Obvyklé widgety

Tato část se zabývá příkladem kódu, který používá některé běžné widgety k sestavení ukázkové aplikace. Tento příklad obsahuje widget posuvníku, tlačítko, které otevírá dialogové okno, a dialogové okno, které při každém otevření zobrazuje aktuální hodnotu posuvníku. Na obrázku 2 je snímek aplikace.

Obrázek 2. Příklad aplikace využívající běžné widgety

Zobrazit obrázek v plné velikosti

V seznamu 1 je uveden indexový soubor HTML.

V seznamu 1. Příklad aplikace využívající běžné widgety

Listování 2 zobrazuje související soubor JavaScriptu (index.js).

Listování 2. Související soubor JavaScriptu pro příkladovou aplikaci

Počáteční nastavení probíhá v záhlaví pomocí následujícího kódu:

Po propojení v CSS jsou zahrnuty soubory JavaScriptu.

Tři widgety v této aplikaci jsou z větší části definovány pomocí příkazů <div> (kromě tlačítka, které již má značku v HTML). Tyto widgety jsou definovány v následujícím kódu:

<div style="margin-bottom:10px;"></div><button>Display Value</button><div></div>

Nakonec odložíme vlastní konstrukci widgetů v kódu JavaScriptu až do úplného načtení stránky prohlížečem, jak je znázorněno na výpisu 3.

Výpis 3. Konstrukce widgetů

Každý z již zmíněných widgetů je konstruován pomocí tohoto kódu. Dialogovému oknu a tlačítku jsou přiřazeny funkce ke konkrétním událostem. Například události kliknutí tlačítka je řečeno, že má po kliknutí otevřít dialogové okno. Pokud jde o dialogové okno, je mu nařízeno, aby změnilo svůj text tak, aby udával aktuální hodnotu posuvníku, což udělá při každém otevření.

Existují dva způsoby, jak změnit vzhled widgetu. Můžete předat hodnoty konstruktoru spolu se všemi požadovanými parametry konstruktoru widgetu. Například:

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

Nebo můžete zavolat metody widgetu po jeho vytvoření, a to následujícím způsobem:

$("#dlg_popup").dialog({ draggable: false });

Většina běžných widgetů má mnoho přidružených možností, které lze nastavit. Pokud se navíc rozhodnete tyto volby ignorovat, widgety je nastaví na výchozí hodnoty, což vám umožní nastavit a změnit, co je potřeba.

Události widgetů

Protože jsou widgety v podstatě objekty JavaScriptu, lze u nich nastavit události, které se spouštějí po celou dobu životnosti webové aplikace. Jakmile jsou tyto události vyvolány, jsou zachyceny buď kódem JavaScriptu poskytnutým vaší webovou stránkou, nebo jsou zpracovány v rámci widgetů (výchozí nastavení).

Implementace výchozího chování všech widgetů je dobře zdokumentována týmem jQuery UI pro každý běžný widget. Můžete však vložit svůj vlastní kód, který bude zpracovávat jednu nebo více událostí vybraného widgetu. Zde je příklad kódu pro nastavení příjmu události:

$( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... }});

Tento konkrétní příklad se připojuje k události drag, která se spustí při přetažení dialogového okna. Elipsa (…) uvedená v příkladu je místem, kam lze umístit jednotlivé kódy pro zpracování a implementaci kódu pro danou událost.

Metody widgetu

Metody (stejně jako v každém známém jazyce) jsou spojeny s widgetem a umožňují provést předem napsanou funkci na konkrétním widgetu, aby provedl určitou akci. Zde je příklad volání metody widgetu:

$("#dlg_popup").dialog("moveToTop");

Koncepčně se možnosti a metody liší. Všimněte si však, že hodnotu volby lze změnit nebo načíst pomocí implementace podobné metodě, jak ukazuje následující příklad.

$("#dlg_popup").dialog("option", "autoOpen", false);

Přepínání motivů

Do souborů HTML a JavaScript lze zahrnout kód, který poskytuje možnost přepínat motivy za chodu pomocí rozevírací nabídky. Výpis 4 ukazuje změny zdrojového kódu HTML pro provedení takové změny.

Výpis 4. Změna motivů za běhu

Výpis 5 ukazuje zdrojový kód jazyka JavaScript.

Výpis 5. Zdrojový kód jazyka JavaScript pro změnu motivů za běhu

$(document).ready(function(){ $('#switcher').themeswitcher();...});

Obrázek 3 ukazuje příklad aplikace po těchto změnách.

Obrázek 3. Ukázková aplikace po úpravách kódu

Zobrazit obrázek v plné velikosti

Znovu spusťte stránku HTML v prohlížeči a prohlédněte si výsledky. Nyní můžete kliknutím na rozevírací seznam změnit téma. Vybraný motiv se v případě potřeby stáhne na pozadí.

Přestože je použití nástroje pro přepínání motivů vhodné pro neprodukční weby (pro testování a prohlížení výsledků), pro produkční weby to není dobrý nápad. Nástroj spoléhá na hostování témat na serveru třetí strany a nebudete si jisti výsledky, které uživatel uvidí.

Jiným způsobem testování motivů jQuery UI je použití nástroje ThemeRoller, který je k dispozici pouze pro prohlížeč Mozilla Firefox (odkaz naleznete v části Související témata). Po instalaci nástroje (jako záložka ve Firefoxu) otevřete galerii a vyberte motivy, abyste si je mohli prohlédnout. Vyberte motiv a klikněte na odkaz ke stažení. Po stažení rozbalte složku s motivem, umístěte ji do složky jQuery UI a nasměrujte na ni své soubory HTML.

Tento nástroj je však mnohem užitečnější než pouhé přepínání motivů. Umožňuje také snadněji vytvářet vlastní motivy, než kdybyste je museli zavádět ručně.

Vytváření jedinečných motivů

Pomocí webové stránky ThemeRoller (která běží ve většině populárních prohlížečů; odkaz najdete v části Související témata) lze provést změny v existujícím motivu jQuery (jako výchozí bod) a vytvořit tak jedinečný motiv. Tím odpadá nutnost vytvářet téma od začátku. Znamená to také, že nejsou nutné odborné znalosti jazyka CSS, a nástroj umožňuje zobrazit změny stávajících témat a widgetů za chodu. Na obrázku 4 je zobrazena stránka ThemeRoller (nezaměňovat se záložkou ThemeRoller, která běží ve Firefoxu).

Obrázek 4. Stránka ThemeRoller

Zobrazit obrázek v plné velikosti

Kliknutím na galerii můžete vybrat některý z existujících motivů. Tím se přepnou styly CSS a obrázky, které ukázkové widgety používají, aby odrážely změnu. Kliknutím na tlačítko Upravit přiřazené k motivu se dostanete na kartu „Roll Your Own“, kde můžete provést změny stylů CSS přiřazených k motivu. Pokud si nezvolíte motiv, který chcete upravit, a začnete na kartě „Roll Your Own“ bez vybraného motivu, jednoduše vytvoříte motiv od začátku.

Klepnutím na tlačítko Stáhnout motiv si nakonec vybraný motiv stáhnete jako vlastní motiv obsahující všechny vaše úpravy. Všimněte si, že jQuery UI a jeho motivy podporují mnoho funkcí CSS3, což znamená, že jsou podporovány všechny hlavní prohlížeče (kromě starších verzí prohlížeče Windows Internet Explorer).

Karta „Roll Your Own“ aplikace ThemeRoller je pěkně uspořádaná, takže můžete rychle najít a změnit to, co hledáte. Karta obsahuje (mimo jiné) následující důležité části:

Nastavení písma – Umožňuje obecné změny písma použitého v celém motivu.
Poloměr rohů – Ovládá zaoblení (nebo absenci) rohů u různých widgetů.
Záhlaví/Pruh nástrojů – Zajišťuje vzhled záhlaví použitých v různých widgetech.
Obsah – Poskytuje nastavení pro ovládání hlavní části widgetů.
Klikatelné – Ovládá různé stavy, které widgety používají.

Při procházení možností si všimnete několika zajímavých věcí týkajících se konstrukce těchto motivů. Motivy jQuery UI například využívají textury. Chcete-li je vidět v provozu, klikněte v nástroji ThemeRoller na položku Header/Toolbar. Poté klikněte na barevné tlačítko uprostřed. Objeví se rozevírací paleta, která obsahuje vzory, z nichž si můžete vybrat. Vybraná textura se zkombinuje s výběrem barvy pozadí a vytvoří vzor, který používají záhlaví a panely nástrojů. Toto je pouze jedno z použití textur. V tématech jQuery UI se vyskytují i další. Například změňte texturu v poli „Klikatelný: výchozí stav“ a uvidíte, jak změna ovlivní tlačítka ve vybraném motivu.

Jednou ze zajímavých vlastností motivů uživatelského rozhraní jQuery je použití zvýraznění a chyb (známých také jako vizuální náznaky). ThemeRoller poskytuje úplnou kontrolu nad tím, jak se tyto vizuální signály zobrazují uživatelům. Lze měnit texturu, barvu pozadí, rohy obrysů, barvu textu a dokonce i barvu ikony (pokud je v narážce zobrazena ikona). Názvy těchto stylů jsou zobrazeny v nástroji ThemeRoller, takže stačí tyto názvy použít na vlastních webových stránkách, aby se tyto styly podle potřeby použily na text zobrazený uživatelům.

Provádění změn různých nastavení vyvolá změny adresy URL v prohlížeči. V seznamu 6 je jako příklad uvedena adresa URL.

Zápis 6. Příklad adresy URL ThemeRoller

Uložením a pozdějším obnovením této adresy URL se můžete vrátit a provést další změny nastavení. Po provedení úprav například zkopírujte adresu URL a pro jistotu ji někam vložte. Nyní zavřete prohlížeč (nebo kartu prohlížeče obsahující web ThemeRoller) a znovu jej otevřete pomocí zkopírované adresy URL. Jak vidíte, všechny vaše úpravy jsou zpět a připraveny k dalším úpravám.

Závěr

O vnitřnostech rozhraní jQuery UI by se dalo říci mnohem více, ale měli byste mít základy potřebné k tomu, abyste mohli začít experimentovat s motivy rozhraní jQuery UI. Viděli jste strukturu složek a souborů, které vám umožní upravit téma. Až budete připraveni, můžete si tyto soubory prohlédnout nebo je použít jako výchozí bod pro vytváření vlastních témat.

Tento článek se zabýval také nástrojem ThemeRoller a souvisejícími webovými stránkami podporujícími úpravu stávajících témat i vytváření nových témat od začátku. Nakonec jste prozkoumali proces ukládání a obnovování úprav témat na webových stránkách ThemeRoller.

Zdroje ke stažení

PDF tohoto obsahu

Platforma jQuery UI: Stáhněte si jQuery UI, abyste mohli testovat a postupovat podle tohoto článku a příkladů v něm uvedených.
ThemeRoller: Podívejte se na web ThemeRoller, který umožňuje testovat stávající témata z platformy jQuery UI, upravovat stávající témata nebo vytvářet vlastní témata.
developerWorks: Zóna pro vývoj webových aplikací: Najděte články zabývající se různými webovými řešeními. V technické knihovně pro vývoj webu najdete širokou škálu technických článků a tipů, výukových programů, standardů a knih IBM Redbook.
Zkušební verze produktů IBM: Stáhněte si a vyzkoušejte si nástroje pro vývoj aplikací a middleware od společností DB2, Lotus, Rational, Tivoli a WebSphere.
developerWorks na Twitteru:

: Přidejte se ještě dnes a sledujte tweety developerWorks.