Vyberte volbu Vložit > Spry > Panely Spry se záložkami.
Naposledy aktualizováno
May 19, 2021 06:52:04 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 Panely se záložkami
Widget Panely se záložkami je sada panelů, které mohou uchovávat obsah na malém prostoru. Návštěvníci webového místa skryjí nebo zobrazí obsah uložený v panelech se záložkami klepnutím na záložku panelu, který chtějí navštívit. Panely widgetu se otevírají podle toho, jak návštěvník klepe na různé záložky. Ve widgetu Panely se záložkami je v danou dobu otevřen pouze jeden panel obsahu. Následující příklad zobrazuje widget Panely se záložkami s otevřeným druhým panelem:
A. Záložka B. Obsah C. Widget Panely se záložkami D. Panel se záložkou
HTML pro widget Panely se záložkami obsahuje vnější tag div, který obsahuje všechny panely, seznam pro záložky, div obsahující panely obsahu a div pro každý panel obsahu. HTML pro widget Panely se záložkami obsahuje v hlavičce dokumentu a za HTML widgetu Panel se záložkami také tagy skriptu.
Podrobnější vysvětlení činnosti widgetu Panely se záložkami, včetně úplné struktury jeho kódu, najdete na adrese www.adobe.com/go/learn_dw_sprytabbedpanels_cz.
Vložení a úpravy widgetu Panelů se záložkami
Vložení widgetu Panely se záložkami
Poznámka:
Widget Panely se záložkami můžete vložit také pomocí kategorie Spry na panelu Vložit.
Přidání panelu do widgetu Panely se záložkami
-
V okně dokumentu vyberte widget Panely se záložkami.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) klikněte na tlačítko plus (+) pro Panely.
-
(Volitelně) Název záložky změňte výběrem a úpravou textu záložky v zobrazení Návrh.
Odstranění panelu z widgetu Panely se záložkami
-
V okně dokumentu vyberte widget Panely se záložkami.
-
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ů:
Ukazatel myši přesuňte nad záložku panelu, který chcete otevřít v zobrazení Návrh, a klepněte na ikonu oka, která se objeví vpravo od záložky.
V okně dokumentu vyberte widget Panely se záložkami 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 Panely se záložkami.
-
V nabídce Panely v inspektoru Vlastnosti (Okna > Vlastnosti) vyberte název panelu, který chcete přemístit.
-
Klepnutím na šipku nahoru nebo dolů přemístěte panel nahoru nebo dolů.
Nastavení výchozího otevřeného panelu
Můžete nastavit, který panel widgetu Panely se záložkami se otevře při otevření stránky v prohlížeči jako výchozí.
-
V okně dokumentu vyberte widget Panely se záložkami.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte z rozbalovací nabídky Výchozí panel panel, který chcete, aby se otevíral jako výchozí.
Přizpůsobení widgetu Panely se záložkami
I když inspektor Vlastnosti dovoluje jednoduché úpravy widgetu Panely se záložkami, nepodporuje úlohy přizpůsobení stylu. U widgetů Panely se záložkami můžete upravit pravidla CSS, a vytvořit tak widget, který je stylově upraven podle vašich potřeb.
Informace o změně barev widgetu Panely se záložkami 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_sprytabbedpanels_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 SpryTabbedPanels.css. Aplikace Dreamweaver uloží soubor SpryTabbedPanels.css do složky zdrojů Spry webového místa při každém vytvoření widgetu Panely Spry se záložkami. Tento soubor obsahuje také užitečné vysvětlující informace o nejrůznějších stylech, které se k widgetu vztahují.
Poznámka:
I když můžete pravidla pro widget Panely se záložkami snadno upravit přímo v přiloženém souboru CSS, k úpravě CSS widgetu 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 Panely se záložkami
Styl textu widgetu Panely se záložkami můžete nastavit pomocí vlastností pro celý kontejner widgetu Panely se záložkami nebo nastavením vlastností součástí widgetu individuálně.
-
Chcete-li změnit styl textu widgetu Panely se záložkami, 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 v celém widgetu
.TabbedPanels font: Arial; font-size:medium;
Text pouze na záložkách panelu
.TabbedPanelsTabGroup nebo .TabbedPanelsTab font: Arial; font-size:medium;
Text pouze na panelech obsahu
.TabbedPanelsContentGroup nebo .TabbedPanelsContent font: Arial; font-size:medium;
Změna barev pozadí widgetu Panely se záložkami
-
Chcete-li změnit barvy pozadí různých částí widgetu Panely se záložkami, 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žek panelu
.TabbedPanelsTabGroup nebo .TabbedPanelsTab background-color: #DDD; (Toto je výchozí hodnota.)
Barva pozadí panelů obsahu
.Tabbed PanelsContentGroup nebo .TabbedPanelsContent background-color: #EEE; (Toto je výchozí hodnota.)
Barva pozadí vybrané záložky
.TabbedPanelsTabSelected background-color: #EEE; (Toto je výchozí hodnota.)
Barva pozadí záložek panelu ve chvíli, kdy se nad nimi pohybuje ukazatel myši
.TabbedPanelsTabHover background-color: #CCC; (Toto je výchozí hodnota.)
Omezení šířky panelů se záložkami
Standardně se widget Panely se záložkami roztahuje, aby vyplnil dostupné místo. Šířku widgetu Panely se záložkami ale můžete omezit – nastavením vlastnosti šířka pro jeho kontejner.
-
Otevřete soubor SpryTabbedPanels.css a vyhledejte pravidlo CSS .TabbedPanels. Toto pravidlo definuje vlastnosti pro hlavní element kontejneru widgetu Panely se záložkami.Poznámka:
Pravidlo můžete vyhledat také výběrem widgetu Panely se záložkami 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.