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:

Widget Skládačka
Widget Skládačka

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

  1. Vyberte volbu Vložit > Spry > Skládačka Spry.

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

  1. V okně dokumentu vyberte widget Skládačka.
  2. V inspektoru Vlastnosti (Okna > Vlastnosti) klikněte na tlačítko plus (+) pro Panely.
  3. (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

  1. V okně dokumentu vyberte widget Skládačka.
  2. 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

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

  1. V okně dokumentu vyberte widget Skládačka.
  2. V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte název panelu Skládačka, který chcete přemístit.
  3. 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ě.

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

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

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

  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