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. Rozbaleno B. Sbaleno
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

  1. Vyberte volbu Vložit > Spry > Sbalitelný panel Spry.

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

  1. 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ý).

  1. V okně dokumentu vyberte widget Sbalitelný panel.
  2. 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.

  1. V okně dokumentu vyberte widget Sbalitelný panel.
  2. 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ě.

  1. 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

  1. 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.

  1. 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ý.

  2. Do pravidla přidejte vlastnost a hodnotu šířky, například width: 300px;.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online