Vyberte volbu Vložit > Spry > Sbalitelný panel Spry.
Naposledy aktualizováno
May 19, 2021 06:52:10 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 Sbalitelný panel
Widget Sbalitelný panel je panelem, který může uchovávat obsah na malém prostoru. Uživatelé skryjí nebo zobrazí obsah uložený ve sbalitelném panelu klepnutím na záložku widgetu. Následující příklad zobrazuje rozbalený a sbalený widget Sbalitelný panel:
A. Rozbalený B. Sbalený
HTML pro widget Sbalitelný panel obsahuje vnější tag div, který obsahuje tag div obsahu a tag div záložky kontejneru. HTML pro widget Sbalitelný panel obsahuje v hlavičce dokumentu a za HTML sbalitelného panelu také tagy skriptu.
Podrobnější vysvětlení činnosti widgetu Sbalitelný panel, včetně úplné struktury jeho kódu, najdete na adrese www.adobe.com/go/learn_dw_sprycollapsiblepanel_cz.
Vložení a úpravy widgetu Sbalitelný panel
Vložení widgetu Sbalitelný panel
Poznámka:
Widget Sbalitelný panel můžete vložit také pomocí kategorie Spry na panelu Vložit.
Otevření nebo zavření sbalitelného panelu v zobrazení Návrh
-
Proveďte jeden z následujících úkonů:
Ukazatel myši přemístěte nad záložkou panelu v zobrazení Návrh a klepněte na ikonu oka, která se objeví vpravo od záložky.
V okně dokumentu vyberte widget Sbalitelný panel a z rozbalovací nabídky Zobrazit v inspektoru Vlastnosti (Okna > Vlastnosti) pak vyberte volbu Otevřený nebo Zavřený.
Nastavení výchozího stavu widgetu Sbalitelný panel
Při načtení webové stránky do prohlížeče můžete nastavit výchozí stav widgetu Sbalitelný panel (otevřený nebo zavřený).
-
V okně dokumentu vyberte widget Sbalitelný panel.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte z rozbalovací nabídky Výchozí stav Otevřený nebo Zavřený.
Zapnutí nebo vypnutí animace pro widget Sbalitelný panel
Pokud návštěvník webu klepne na záložku panelu, při povolení animace pro widget Sbalitelný panel se panel standardně postupně a plynule otevře a zavře. Pokud animaci zakážete, sbalitelný panel se otevře a zavře prudce.
-
V okně dokumentu vyberte widget Sbalitelný panel.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte nebo odznačte volbu Povolit animaci.
Přizpůsobení widgetu Sbalitelný panel
I když inspektor Vlastnosti umožňuje jednoduché úpravy widgetu Sbalitelný panel, nepodporuje úlohy přizpůsobení stylu. U widgetu Sbalitelný panel můžete upravit CSS, a vytvořit tak sbalitelný panel, který je stylově upraven podle vašich potřeb.
Informace o změně barev widgetu Sbalitelný panel 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 přizpůsobení stylu najdete na adrese www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_cz.
Všechna pravidla CSS v níže uvedených tématech se vztahují ke standardním pravidlům umístěným v souboru SpryCollapsiblePanel.css. Aplikace Dreamweaver uloží soubor SpryCollapsiblePanel.css do složky zdrojů Spry webového místa při každém vytvoření widgetu Sbalitelný panel Spry. Tento soubor obsahuje také užitečné vysvětlující informace o nejrůznějších stylech, které se k widgetu vztahují.
Poznámka:
Pravidla pro widget Sbalitelný panel můžete snadno upravit přímo v přiloženém souboru CSS a k úpravě CSS sbalitelného panelu 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 Sbalitelný panel
Styl textu widgetu Sbalitelný panel můžete nastavit pomocí vlastností pro celý kontejner widgetu Sbalitelný panel nebo nastavením vlastností součástí widgetu individuálně.
-
Chcete-li změnit formátování textu widgetu Sbalitelný panel, 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:
Styl, který chcete změnit
Příslušné pravidlo CSS
Příklad vlastností a hodnot, které se mají přidat nebo změnit
Text v celém sbalitelném panelu
.CollapsiblePanel font: Arial; font-size:medium;
Pouze text na záložce panelu
.CollapsiblePanelTab font: bold 0.7em sans-serif; (Toto je výchozí hodnota.)
Text pouze v panelu obsahu
.CollapsiblePanelContent font: Arial; font-size:medium;
Změna barev pozadí widgetu Sbalitelný panel
-
Chcete-li změnit barvy pozadí různých částí widgetu Sbalitelný panel, 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í podle vašich potřeb:
Barva, 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žky panelu
.CollapsiblePanelTab background-color: #DDD; (Toto je výchozí hodnota.)
Barva pozadí panelu obsahu
.CollapsiblePanelContent background-color: #DDD;
Barva pozadí záložky při otevření panelu
.CollapsiblePanelOpen .CollapsiblePanelTab background-color: #EEE; (Toto je výchozí hodnota.)
Barva pozadí záložky otevřeného panelu ve chvíli, kdy se nad ní pohybuje ukazatel myši
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover background-color: #CCC; (Toto je výchozí hodnota.)
Omezení šířky sbalitelného panelu
Standardně se widget Sbalitelný panel roztahuje, aby vyplnil dostupné místo. Šířku widgetu Sbalitelný panel ale můžete omezit – nastavením vlastnosti šířka pro kontejner sbalitelného panelu.
-
Otevřete soubor SpryCollapsible Panel.css a vyhledejte pravidlo CSS .CollapsiblePanel. Toto pravidlo definuje vlastnosti pro hlavní element kontejneru widgetu Sbalitelný panel.Poznámka:
Pravidlo můžete vyhledat také vybráním widgetu Sbalitelný panel a prohlédnutím 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.