Ujistěte se, že jste kurzor umístili do oblasti stránky, ve které chcete widget vložit.
Naposledy aktualizováno
30. 4. 2026
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. Můžete například použít widget jQuery mobile k přidání prvků formuláře vhodných pro mobilní zařízení, jako jsou textové oblasti a zaškrtávací políčka.
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. Další widgety se přidávají do stejné značky script.
Další informace o widgetech jQuery naleznete v 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.
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.
Upravit widgety jQuery
Vyberte widget, který chcete upravit.
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í mobilních widgetů jQuery
Než budete moci použít jakékoli widgety jQuery mobile, musíte nejprve definovat stránku jQuery Mobile výběrem Vložit > jQuery Mobile > Stránka.
Otevře se dialogové okno Soubory jQuery Mobile.
Změňte výchozí nastavení v dialogovém okně souborů jQuery Mobile nebo je ponechte nastavené na výchozí cesty a klikněte na OK.
V dialogovém okně Stránka, které se otevře, zadejte název do pole ID a zaškrtněte nebo zrušte zaškrtnutí políček vedle možností Záhlaví a Zápatí podle toho, zda chcete v mobilní stránce sekce záhlaví a zápatí.
Na stránce, která se otevře v aplikaci Dreamweaver, nahraďte text Záhlaví, Obsah a Zápatí textem, obrázky a dalšími prvky, které chcete mít na mobilní stránce.
Poznámka
Udržujte text krátký a obrázky malé pro zobrazení na malých mobilních screens.
Podle potřeby přidejte další widgety jQuery Mobile.
Zobrazte náhled stránky na zařízení.
Další informace naleznete v Náhled webových stránek Dreamweaver na více zařízeních.
Uložte stránku jQuery Mobile a všechny související soubory.
Motivy jQuery mobile se nepoužijí s novějšími verzemi jQuery
Problém
Motivy jQuery Mobile, včetně vzorků barev a panelů, se nepoužijí při používání novějších verzí jQuery, jako je jQuery 3.7.1. V důsledku toho se motivy jQuery nemusí vykreslovat správně nebo se chovat podle očekávání.
Příčina
jQuery Mobile bylo označeno jako zastaralé a již se aktivně neudržuje. Nepodporuje verze jQuery 3.x, což vede k problémům s kompatibilitou s novějšími verzemi.
Řešení / alternativní řešení
Chcete-li nadále používat funkce jQuery Mobile (motivy, vzorky barev a panely), použijte kompatibilní, starší verzi jQuery.
Doporučená verze: jQuery 1.11.1 (nebo jiné podporované verze 1.x)
Příklad
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Přidejte podporovanou verzi jQuery. Například 1.11.1.
Ujistěte se, že knihovna jQuery Mobile je načtena po skriptu jQuery.
Znovu načtěte stránku a ověřte, že se motivy, vzorky barev a panely vykreslují správně.
Poznámka
Protože jQuery Mobile je zastaralé a již se neaktualizuje, pokračujte v používání kompatibilní starší verze jQuery pro stávající projekty jQuery Mobile.
Tvorba nádherných webů v aplikaci Dreamweaver
Vytvářejte, kódujte a spravujte dynamické weby pomocí výkonného všestranného nástroje.
