Naučte se využívat widgety jQuery UI a jQuery Mobile pro doplnění webových projektů o funkce jako v aplikacích. Vkládejte skládačky, záložky, posuvníky a pole pro automatické dokončování zcela bez psaní kódu.

Widget představuje malou webovou aplikaci v jazyce, jako je např. DHTML nebo JavaScript, kterou lze vložit na webovou stránku a spustit ji zde. Webové widgety mimo jiné nabízí způsob, jak na webových stránkách napodobit prostředí stolních počítačů.

Widgety jQuery UI, jako např. Accordion, Tabs, Datepicker, Slider a Autocomplete, umožňují toto prostředí na webu napodobit.

Pomocí widgetu Tabs například můžete napodobit funkci záložek z dialogových oken aplikací v počítači.

Aplikace Dreamweaver nově nabízí kolekci widgetů jQuery Mobile, které můžete používat k vytvoření prvků formuláře, a další funkce běžně používané v mobilních webových aplikacích. Pomocí widgetu jQuery Mobile můžete například přidávat elementy formuláře podporující mobilní zařízení, jako jsou oblasti textu a zaškrtávací pole.

Vložení widgetu jQuery

Při vložení widgetu jQuery se kód automaticky doplní o následující údaje:

  • Reference všech závislých souborů.
  • Tag Script obsahující rozhraní API pro widget jQuery. Do tagu scriptu se přidávají ostatní widgety.

Další informace o widgetech jQuery naleznete na adrese http://jqueryui.com/demos/

Poznámka:

V případě efektů jQuery se nepřidá externí reference na soubor jquery-1.8.24.min.js, protože tento soubor je automaticky součástí dat vložených při přidávání efektu.

  1. Ujistěte se, že jste kurzor umístili do oblasti stránky, ve které chcete widget vložit.

  2. Vyberte možnosti Vložit > jQuery UI a vyberte, který z widgetů chcete vložit.

    Při použití panelu Vložit naleznete widgety na panelu Vložit v části jQuery UI.

Po výběru widgetu jQuery se jeho vlastnosti zobrazí na panelu Vlastnosti.

Náhled widgetů jQuery můžete zobrazit v rámci živého zobrazení nebo v prohlížeči, který podporuje widgety jQuery.

Úprava widgetů jQuery

  1. Vyberte widget, který chcete upravit.

  2. Na panelu Vlastnosti upravte potřebné vlastnosti.

    Pokud budete chtít například ve widgetu Tabs přidat dodatečnou záložku, vyberte widget a klikněte na symbol „+“ na panelu Vlastnosti.

Vložení widgetů jQuery Mobile

  1. Předtím, než budete moci použít některý z widgetů jQuery Mobile, je nutné nejdříve definovat stránku jQuery Mobile výběrem možnosti Vložit > jQuery Mobile > Stránka.

    Otevře se dialogové okno Soubory jQuery Mobile.

    Dialogové okno Soubory jQuery Mobile
    Dialogové okno Soubory jQuery Mobile

  2. Upravte výchozí nastavení v dialogovém okně Soubory jQuery Mobile nebo ponechte nastavení výchozího umístění a klikněte na tlačítko OK.

  3. V nově otevřeném dialogovém okně Stránka zadejte název do pole ID a vyberte nebo odznačte zaškrtávací pole vedle možnosti Záhlaví a Zápatí podle toho, zda chcete nebo nechcete používat sekci záhlaví a zápatí ve stránce pro mobilní zařízení.

    Dialogové okno Stránka
    Dialogové okno Stránka

  4. Na nově otevřené stránce v aplikaci Dreamweaver nahraďte text v okně Záhlaví, Obsah a Zápatí za text, obrázky a další prvky, které chcete použít na stránce pro mobilní zařízení.

    Poznámka:

    Pro potřeby zobrazení na malých displejích mobilních zařízení zachovejte krátký text a malé obrázky.

  5. Podle potřeby přidejte další widgety jQuery Mobile.

  6. Prohlédněte si náhled stránky v zařízení.

    Další informace naleznete v tématu Náhled webových stránek aplikace Dreamweaver na několika zařízeních.

  7. Uložte stránku s widgetem jQuery Mobile a všechny související soubory.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online