Jak vytvářet skládací panely pomocí jQuery v Dreamweaveru

Akordeonový widget uživatelského rozhraní jQuery v Dreamweaveru usnadňuje přidávání skládacích panelů, které mohou návštěvníci webu otevírat a zavírat, aniž by obnovovali webovou stránku. Tato funkce jQuery vám umožňuje lépe využít prostor na stránce zobrazením více informací na menším prostoru v okně prohlížeče.

Na této přírodní webové stránce se můžete podívat, jak skládací panely s harmonikou obsahují jméno, fotografii a preference stanoviště každého pěvce. Výsledkem je, že na jedné stránce snadno uvidíte jména všech ptáků. Chcete-li zobrazit popis libovolného ptáka, stačí uživateli kliknout na záložku v horní části panelu (kde se zobrazuje jméno ptáka) a panel se okamžitě otevře.

Fotografie a popis pěnice oranžovo-korunované jsou otevřené, ostatní na stránce jsou zavřené. Krása jQuery spočívá v tom, že se stránka nemusí znovu načítat, aby se panely otevřely nebo zavříly. Klepněte jednou na kartu a okamžitě se otevře panel. Klepněte na jinou kartu a tento panel se otevře tak, jak se zavírá dříve otevřený panel.

Skládací panely lze použít k zobrazení textu a obrázků a také multimediálních souborů, jako jsou audio, video a soubory Flash.

Chcete-li zobrazit panel akordeonu (nebo mnoho dalších pokročilých funkcí v Dreamweaveru), jak se zobrazí ve webovém prohlížeči, musíte kliknout na tlačítko Živé zobrazení v levé horní části pracovní plochy Dreamweaveru.

Po vytvoření sady akordeonových panelů pomocí nabídky uživatelského rozhraní jQuery v Dreamweaveru můžete změnit řadu nastavení panelu pomocí inspektoru Vlastnosti, jak je znázorněno v následujících pokynech.

Chcete-li vytvořit sadu akordeonových panelů, postupujte takto:

Umístěte kurzor na stránku, kde chcete, aby se zobrazovaly panely akordeonu.

Zvolte Vložit→jQuery UI→Akordeon nebo klikněte na položku Accordion na panelu Vložení uživatelského rozhraní jQuery.

Na stránce se zobrazí skupina skládacích panelů akordeonu uživatelského rozhraní jQuery se třemi panely.

Vyberte slovo Sekce v horní části každého panelu a nahraďte jej textem, který se má zobrazit v oblasti karty panelu.

Ve výchozím nastavení je text v oblasti karty prostý text, ale můžete to změnit změnou odpovídajícího pravidla CSS nebo formátováním textu pomocí značek HTML, jako jsou značky nadpisů.

Vyberte slovo Obsah v hlavní oblasti každého panelu a zadejte libovolný text nebo obrázky, které chcete zobrazit.

Text můžete vložit do panelu stejně, jako byste vkládali text kdekoli jinde na stránce. Podobně vkládáte obrázky do panelů stejně jako kdekoli jinde na stránce: Umístěte kurzor do panelu, zvolte Vložit → Obrázek → Obrázek a vyberte soubor GIF, JPEG nebo PNG, který chcete zobrazit. Pokud chcete k optimalizaci obrazů použít Dreamweaver, můžete také vybrat soubor Photoshopu.

Když vkládáte text do panelu, zvolte Úpravy→Vložit jinak a zvolte množství formátování, které chcete zachovat v textu, který vkládáte v Dreamweaveru. Omezení množství zachovaného formátování může snížit potenciální konflikty stylů.

Chcete-li změnit nastavení panelu, klikněte na modrou kartu jQuery Accordion v horní části panelů v oblasti návrhu.

Když klepnete na modrou záložku, nastavení panelu se zobrazí v inspektoru Vlastnosti. (Správné klepnutí na modrou záložku může být složité, takže se ujistěte, že kliknete na modrou oblast.) Klepněte kamkoli na stránku a inspektor se vrátí do výchozího nastavení.

Přidejte nebo odeberte panely pomocí pole Panely v inspektoru Vlastnosti.

Chcete-li přidat panel, klikněte na znaménko plus (+) napravo od pole Panely. Chcete-li odstranit panel ze sady akordeonů, nejprve vyberte název panelu v rozevíracím seznamu Panely v inspektoru Vlastnosti a poté klikněte na znaménko mínus (@@min).

Další panel můžete přidat opětovným kliknutím na znaménko plus.

Změňte způsob otevírání panelů pomocí rozbalovací nabídky Událost.

Nastavení události řídí, zda se panely otevřou, když uživatel klepne na záložku panelu (Click) nebo přejede kurzorem přes záložku panelu (Mouseover).

Podle potřeby nastavte další možnosti panelu.

Možnosti akordeonu v inspektoru Vlastnosti jsou volitelné a zahrnují možnost deaktivovat kterýkoli nebo všechny panely (Zakázat) a animovat způsob otevírání a zavírání panelů (rozbalovací seznam Animovat).

Zvolte Soubor→Uložit pro uložení stránky; když se zobrazí dialogové okno Kopírovat závislé soubory, klepnutím na OK vygenerujte všechny související soubory.

Aby funkce Spry fungovaly, musíte tyto soubory nahrát na svůj webový server, když nahráváte webovou stránku.

Chcete-li změnit vzhled panelu, jako je řez písma nebo barva textu, upravte odpovídající pravidlo CSS.

Poznámka: Odpovídající styly pro akordeonový panel nelze upravovat, dokud nebude stránka uložena a aplikace Dreamweaver nevygeneruje odpovídající soubory CSS a JavaScript.

Chcete-li vidět, jak se panely zobrazí ve webovém prohlížeči, klikněte na ikonu zeměkoule v horní části pracovní plochy a vyberte prohlížeč, který chcete použít k zobrazení náhledu stránky.

Když používáte počítač k náhledu stránky, která má interaktivní funkci vyžadující JavaScript nebo jiné programování, některé webové prohlížeče, včetně Internet Exploreru, zobrazí varování, že musíte povolit ovládacím prvkům ActiveX, aby stránku zobrazily.

Toto je bezpečnostní varování, které se zobrazí pouze při otevření stránky na stejném počítači, kde je stránka uložena. Pokud stránku publikujete na webový server a poté ji zobrazíte přes internetové připojení, tato chyba se vám ani návštěvníkům vašeho webu nezobrazí.