Vyberte volbu Vložit > Spry > Skládačka Spry.
Naposledy aktualizováno
May 19, 2021 06:52:11 PM GMT
Poznámka:
Widgety Spry jsou v aplikaci Dreamweaver CC a novější nahrazeny widgety jQuery. Stávající widgety Spry na stránce sice můžete upravit, ale nemůžete přidávat nové.
O widgetu Skládačka
Widget Skládačka je sada sbalitelných panelů, které mohou ukládat velké množství obsahu na malém prostoru. Návštěvníci webového místa skryjí nebo zobrazí obsah uložený ve skládačce klepnutím na záložku panelu. Panely skládačky se roztahují nebo stahují podle toho, jak návštěvník klepe na různé záložky. Ve skládačce je ve stanovenou dobu otevřený a viditelný pouze jeden panel obsahu. Následující příklad znázorňuje widget Skládačka s rozbaleným prvním panelem:
A. Záložka panelu Skládačka B. Obsah panelu Skládačka C. Panel Skládačka (otevřený)
Standardní HTML pro widget Skládačka obsahuje vnější tag div, který obsahuje všechny panely, tag div pro každý panel a div hlavičky a div obsahu uvnitř tagu pro každý panel. Widget Skládačka může obsahovat libovolný počet samostatných panelů. HTML pro widget Skládačka obsahuje v hlavičce dokumentu a za HTML kódem skládačky také tagy script.
Podrobnější vysvětlení činnosti widgetu Skládačka, včetně úplné struktury jeho kódu, najdete na adrese www.adobe.com/go/learn_dw_spryaccordion_cz
Výukovou lekci o práci s widgetem Skládačka najdete na adrese www.adobe.com/go/vid0167_cz.
Vložení a úpravy widgetu Skládačka
Vložení widgetu Skládačka
Poznámka:
Widget Skládačka můžete vložit také pomocí kategorie Spry na panelu Vložit.
Přidání panelu do widgetu Skládačka
-
V okně dokumentu vyberte widget Skládačka.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) klikněte na tlačítko plus (+) pro Panely.
-
(Volitelně) Název panelu změňte výběrem a úpravou textu panelu v zobrazení Návrh.
Odstranění panelu z widgetu Skládačka
-
V okně dokumentu vyberte widget Skládačka.
-
V nabídce Panely v inspektoru Vlastnosti (Okna > Vlastnosti) vyberte název panelu, který chcete odstranit, a klepněte na tlačítko minus (-).
Otevření panelu pro úpravy
-
Proveďte jeden z následujících úkonů:
Přemístěte ukazatel myši nad záložkou panelu, aby se otevřel v zobrazení Návrh, a klepněte na ikonu oka, která se objeví vpravo od záložky.
V okně dokumentu vyberte widget Skládačka a pak v nabídce Panely inspektoru Vlastnosti (Okna > Vlastnosti) klikněte na název panelu, který chcete upravit.
Změna pořadí panelů
-
V okně dokumentu vyberte widget Skládačka.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte název panelu Skládačka, který chcete přemístit.
-
Klepnutím na šipku nahoru nebo dolů přemístěte panel nahoru nebo dolů.
Přizpůsobení widgetu Skládačka
I když vám inspektor Vlastnosti povolí jednoduché úpravy widgetu Skládačka, nepodporuje úlohy přizpůsobení stylu. Pomocí widgetu Skládačka můžete upravit pravidla CSS a vytvořit skládačku, která je stylově nastavena podle vašich potřeb.
Informace o změně barev widgetu Skládačka naleznete v Rychlém průvodci pro úpravu panelů se záložkami, skládaček a sbalitelných panelů sady Spry od Davida Powerse.
Seznam pokročilejších úloh nastavení stylu najdete na adrese www.adobe.com/go/learn_dw_spryaccordion_custom_cz.
Všechna pravidla CSS v následujících tématech se vztahují ke standardním pravidlům umístěným v souboru SpryAccordion.css. Aplikace Dreamweaver uloží soubor SpryAccordion.css do složky zdrojů Spry webového místa při každém vytvoření widgetu Skládačka Spry. Tento soubor obsahuje také vysvětlující informace o nejrůznějších stylech, které se k widgetu vztahují, takže přečtení souboru může být také užitečné.
Poznámka:
I když lze pravidla pro widget Skládačka snadno upravit přímo v souboru CSS, k úpravě CSS skládačky můžete použít také panel Styly CSS. Panel Styly CSS je užitečný k vyhledání tříd CSS přiřazených k různým částem widgetu, zejména pokud používáte režim panelu Současný.
Nastavení stylu textu widgetu Skládačka
Styl textu widgetu Skládačka můžete nastavit pomocí vlastností pro celý kontejner widgetu Skládačka nebo nastavením vlastností součástí widgetu individuálně.
-
Chcete-li změnit styl textu widgetu Skládačka, použijte k vyhledání příslušného pravidla CSS následující tabulku a pak přidejte svoje vlastnosti a hodnoty stylu textu:
Text, který chcete změnit
Příslušné pravidlo CSS
Příklad vlastností a hodnot, které se mají přidat
Text celé skládačky (včetně panelu záložek a obsahu)
.Accordion nebo .AccordionPanel font: Arial; font-size:medium;
Text pouze na záložkách panelu skládačky
.AccordionPanelTab font: Arial; font-size:medium;
Pouze text v panelech obsahu skládačky
.AccordionPanelContent font: Arial; font-size:medium;
Změna barev pozadí widgetu Skládačka
-
Chcete-li změnit barvy pozadí různých částí widgetu Skládačka, použijte k vyhledání příslušného pravidla CSS následující tabulku a pak přidejte nebo změňte vlastnosti a hodnoty barvy pozadí.
Část widgetu, kterou chcete změnit
Příslušné pravidlo CSS
Příklad vlastnosti a hodnoty, kterou chcete přidat nebo změnit
Barva pozadí záložek panelu skládačka
.AccordionPanelTab background-color: #CCCCCC; (Toto je výchozí hodnota.)
Barva pozadí panelů obsahu skládačky
.AccordionPanelContent background-color: #CCCCCC;
Barva pozadí otevřeného panelu skládačky
.AccordionPanelOpen .AccordionPanelTab background-color: #EEEEEE; (Toto je výchozí hodnota.)
Barva pozadí záložek panelu při přechodu
.AccordionPanelTabHover color: #555555; (Toto je výchozí hodnota.)
Barva pozadí záložky otevřeného panelu při přechodu
.AccordionPanelOpen .AccordionPanelTabHover color: #555555; (Toto je výchozí hodnota.)
Omezení šířky skládačky
Standardně se widget Skládačka roztahuje, aby vyplnil dostupné místo. Šířku widgetu Skládačka ale můžete omezit – nastavením vlastnosti šířka pro kontejner skládačky.
-
Otevřete soubor SpryAccordion.css a vyhledejte pravidlo CSS .Accordion. Toto pravidlo definuje vlastnosti pro hlavní element kontejneru widgetu Skládačka.Poznámka:
Pravidlo můžete najít také vybráním widgetu Skládačka a hledáním v panelu Styly CSS (Okna > Styly CSS). Ujistěte se, že je panel nastaven v režimu Současný.
-
Do pravidla přidejte vlastnost a hodnotu šířky, například width: 300px;.
Další podobné nápovědy
Přihlaste se ke svému účtu.