Ako vytvoriť skladacie panely pomocou jQuery v Dreamweaveri

Miniaplikácia akordeónu používateľského rozhrania jQuery v aplikácii Dreamweaver uľahčuje pridávanie skladacích panelov, ktoré môžu návštevníci lokality otvárať a zatvárať bez obnovovania webovej stránky. Táto funkcia jQuery vám umožňuje lepšie využiť priestor na stránke zobrazením väčšieho množstva informácií na menšom priestore v okne prehliadača.

Na tejto webovej stránke o prírode môžete vidieť, ako skladacie panely na harmonike obsahujú meno, fotografiu a preferencie biotopu každého spevavca. Výsledkom je, že na jednej stránke ľahko uvidíte mená všetkých vtákov. Na zobrazenie popisu akéhokoľvek vtáka stačí kliknúť na kartu v hornej časti panela (kde sa zobrazuje meno vtáka) a panel sa okamžite otvorí.

Fotografia a popis chochlačky oranžovej sú otvorené, zatiaľ čo ostatné na stránke sú zatvorené. Krása jQuery je v tom, že stránka sa nemusí znova načítať, aby sa panely otvorili alebo zatvorili. Kliknite raz na kartu a panel sa okamžite otvorí. Kliknite na inú kartu a tento panel sa otvorí tak, ako sa zatvorí predtým otvorený panel.

Skladacie panely možno použiť na zobrazenie textu a obrázkov, ako aj multimediálnych súborov, ako sú audio, video a súbory Flash.

Ak chcete zobraziť panel akordeónu (alebo mnoho ďalších pokročilých funkcií v aplikácii Dreamweaver), ako sa zobrazí vo webovom prehliadači, musíte kliknúť na tlačidlo Živé zobrazenie v ľavej hornej časti pracovnej plochy Dreamweaver.

Po vytvorení sady akordeónových panelov pomocou ponuky používateľského rozhrania jQuery v Dreamweaveri môžete zmeniť množstvo nastavení panelov pomocou inšpektora vlastností, ako je znázornené v nasledujúcich pokynoch.

Ak chcete vytvoriť súpravu akordeónových panelov, postupujte podľa týchto krokov:

Umiestnite kurzor na stránku, kde sa majú zobraziť panely s akordeónom.

Vyberte položku Vložiť → Používateľské rozhranie jQuery → Akordeón alebo kliknite na položku Akordeón na paneli Vloženie používateľského rozhrania jQuery.

Na stránke sa zobrazí skupina skladacích panelov akordeónu používateľského rozhrania jQuery s tromi panelmi.

Vyberte slovo Sekcia v hornej časti každého panela a nahraďte ho textom, ktorý sa má zobraziť v oblasti kariet panela.

V predvolenom nastavení je text v oblasti Tab obyčajný text, ale môžete to zmeniť zmenou príslušného pravidla CSS alebo formátovaním textu pomocou značiek HTML, ako sú napríklad značky nadpisov.

Vyberte slovo Obsah v hlavnej oblasti každého panela a zadajte ľubovoľný text alebo obrázky, ktoré chcete zobraziť.

Text môžete vložiť do panela rovnako, ako by ste ho prilepili kdekoľvek inde na stránke. Podobne vložíte obrázky do panelov rovnako ako kdekoľvek inde na stránke: Umiestnite kurzor na panel, vyberte Vložiť → Obrázok → Obrázok a vyberte súbor GIF, JPEG alebo PNG, ktorý chcete zobraziť. Ak chcete na optimalizáciu obrázkov použiť Dreamweaver, môžete vybrať aj súbor Photoshopu.

Keď prilepíte text na panel, vyberte Upraviť → Prilepiť špeciálne a vyberte množstvo formátovania, ktoré chcete zachovať v texte, ktorý prilepíte v Dreamweaveri. Obmedzenie množstva zachovaného formátovania môže znížiť potenciálne konflikty štýlov.

Ak chcete zmeniť nastavenia panela, kliknite na modrú kartu jQuery Accordion v hornej časti panelov v oblasti návrhu.

Keď kliknete na modrú kartu, nastavenia panela sa zobrazia v inšpektorovi vlastností. (Správne kliknutie na modrú kartu môže byť zložité, takže sa uistite, že ste klikli na modrú oblasť.) Kliknite kdekoľvek inde na stránke a inšpektor sa vráti do svojich predvolených nastavení.

Pridajte alebo odstráňte panely pomocou poľa Panely v inšpektorovi vlastností.

Ak chcete pridať panel, kliknite na znamienko plus (+) napravo od poľa Panely. Ak chcete odstrániť panel zo sady akordeónov, najprv vyberte názov panelu v rozbaľovacom zozname Panely v inšpektorovi vlastností a potom kliknite na znamienko mínus (@@min).

Ďalší panel môžete pridať opätovným kliknutím na znamienko plus.

Zmeňte spôsob otvárania panelov pomocou rozbaľovacej ponuky Udalosť.

Nastavenia udalosti riadia, či sa panely otvoria, keď používateľ klikne na kartu panela (Kliknutie), alebo presunie kurzor nad kartu panela (Prejdenie myšou).

Podľa potreby nastavte ďalšie možnosti panela.

Možnosti akordeónu v inšpektorovi vlastností sú voliteľné a zahŕňajú možnosť deaktivovať niektorý alebo všetky panely (Zakázať) a animovať spôsob otvárania a zatvárania panelov (rozbaľovací zoznam Animovať).

Vyberte Súbor → Uložiť na uloženie stránky; keď sa zobrazí dialógové okno Kopírovať závislé súbory, kliknutím na tlačidlo OK vygenerujte všetky súvisiace súbory.

Aby funkcie Spry fungovali, musíte pri odovzdávaní webovej stránky nahrať tieto súbory na váš webový server.

Ak chcete zmeniť vzhľad panela, napríklad vzhľad písma alebo farbu textu, upravte príslušné pravidlo CSS.

Poznámka: Zodpovedajúce štýly pre akordeónový panel nemôžete upravovať, kým sa stránka neuloží a kým Dreamweaver nevygeneruje zodpovedajúce súbory CSS a JavaScript.

Ak chcete vidieť, ako sa panely zobrazia vo webovom prehliadači, kliknite na ikonu zemegule v hornej časti pracovného priestoru a vyberte prehliadač, ktorý chcete použiť na zobrazenie ukážky stránky.

Keď používate počítač na zobrazenie ukážky stránky, ktorá má interaktívnu funkciu vyžadujúcu JavaScript alebo iné programovanie, niektoré webové prehliadače vrátane Internet Exploreru zobrazia varovanie, že musíte povoliť zobrazenie stránky ovládacím prvkom ActiveX.

Toto je bezpečnostné varovanie, ktoré sa zobrazí iba vtedy, keď je stránka otvorená na tom istom počítači, kde je stránka uložená. Ak zverejníte stránku na webovom serveri a potom ju zobrazíte cez internetové pripojenie, táto chyba sa nezobrazí vám ani návštevníkom vašej lokality.