Vyberte volbu Vložit > Spry > Ověření výběru Spry.
Naposledy aktualizováno
May 19, 2021 06:51:53 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 Ověření výběru
widget Ověření výběru je rozbalovací nabídka, která, když uživatel uskuteční výběr, zobrazí platné nebo neplatné stavy. Můžete například vložit widget Ověření výběru, který obsahuje seznam stavů seskupených do různých oddílů a rozdělený vodorovnými čárami. Pokud uživatel náhodně vybere jednu z dělicích čar na rozdíl od některého ze stavů, widget Ověření výběru vrátí uživateli zprávu se sdělením, že je výběr neplatný.
Následující příklad zobrazuje widget Ověření výběru v rozbaleném i sbaleném tvaru v různých stavech:
A. aktivní widget Ověření výběru B. widget výběru, platný stav C. widget výběru, stav Vyžadováno D. widget, neplatný stav
widget Ověření výběru obsahuje řadu stavů (například platný, neplatný, vyžadovaná hodnota apod.). Vlastnosti těchto stavů můžete změnit pomocí inspektoru Vlastnosti s ohledem na požadované výsledky ověřování. widget Ověření výběru může ověřovat v různých okamžicích – například, když uživatel klepne mimo widget, když vytváří výběry nebo když zkouší odeslat formulář.
Počáteční stav
Stav widgetu, když se stránka načte do prohlížeče nebo když uživatel obnoví formulář.
Stav aktivace
Stav widgetu, když uživatel klepne na widget.
Platný stav
Stav widgetu, když uživatel vybral platnou položku a formulář může odeslat.
Neplatný stav
Stav widgetu, když uživatel zvolit neplatný text.
Stav Vyžadováno
Stav widgetu, když uživatel nevybral platnou položku.
Jakmile widget Ověření výběru vstoupí do jednoho z výše uvedených stavů prostřednictvím uživatelské interakce, logika frameworku Spry aplikuje za běhu specifickou třídu CSS na kontejner HTML widgetu. Například pokud uživatel zkusí odeslat formulář, ale z nabídky nevybral položku, Spry aplikuje na widget třídu, která vyvolá zobrazení chybové zprávy „Vyberte některou položku“. Pravidla, která určují styl a zobrazují stavy chybových zpráv, jsou uložena v souboru CSS (SpryValidationSelect.css), který doprovází widget.
Standardní HTML pro widget Ověření výběru (obvykle ve formuláři) obsahuje tag kontejneru <span>, který obklopuje tag <select> textové oblasti. HTML pro widget Ověření výběru obsahuje v hlavičce dokumentu a za HTML widgetu také tagy skriptu.
Podrobnější vysvětlení činnosti widgetu Ověření výběru, včetně úplné struktury jeho kódu, naleznete na adrese www.adobe.com/go/learn_dw_spryselect_cz.
Vložení a úpravy widgetu Ověření výběru
Vložení widgetu Ověření výběru
-
-
Vyplňte dialogové okno Atributy tagu vstupu pro usnadnění přístupu a klikněte na tlačítko OK.
-
V zobrazení Kód přidejte tagy voleb, které obsahují položky nabídky a hodnoty. Aplikace Dreamweaver to za vás automaticky neudělá. Další informace najdete v předchozím tématu.
Poznámka:
widget Ověření výběru můžete vložit také pomocí kategorie Spry na panelu Vložit.
Určení, kdy proběhne ověření
Okamžik, ve kterém proběhne ověření, můžete nastavit – když uživatel klikne mimo widget, když zapisuje nebo když zkouší odeslat formulář.
-
V okně dokumentu vyberte widget Ověření výběru.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte volbu, která určuje, kdy chcete, aby ověření proběhlo. Můžete vybrat všechny volby, nebo pouze volbu Odeslání.
Rozostření
Ověření proběhne pokaždé, když uživatel klepne mimo widget.
Změna
Ověření proběhne, když uživatel provede výběr.
Odeslání
Ověření v okamžiku, kdy se uživatel pokusí odeslat formulář. Volba Odeslání je vybrána ve výchozím nastavení a její výběr nelze zrušit.
Zobrazení stavů widgetu v zobrazení Návrh
-
V okně dokumentu vyberte widget Ověření výběru.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte stav, který chcete vidět v rozbalovací nabídce Náhled stavů. Pokud například chcete vidět widget v jeho platném stavu, vyberte volbu Platný.
Zákaz nebo povolení prázdných hodnot
Všechny widgety Ověření výběru, které vkládáte pomocí aplikace Dreamweaver, při publikaci na webové stránce standardně vyžadují, aby uživatelé zvolili položky nabídky, které mají přiřazenou hodnotu. Tuto volbu ale můžete vypnout.
-
V okně dokumentu vyberte widget Ověření výběru.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) podle požadavků vyberte volbu Nepovolit prázdné hodnoty nebo její výběr zrušte.
Určení neplatné hodnoty
Můžete určit hodnotu, která bude zobrazena jako neplatná, pokud uživatel zvolí položku nabídky, která je spojená s touto hodnotou. Pokud například určíte -1 jako neplatnou hodnotu a přiřadíte ji tagu některé volby, widget vrátí chybovou zprávu, pokud uživatel vybere tuto položku nabídky.
<option value="-1"> ------------------- </option>
-
V okně dokumentu vyberte widget Ověření výběru.
-
V inspektoru Vlastnosti (Okna > Vlastnosti) zadejte do pole Neplatná hodnota číslo, které chcete používat jako neplatnou hodnotu.
Přizpůsobení widgetu Ověření výběru
I když vám inspektor Vlastnosti umožňuje jednoduché úpravy widgetu Ověření výběru, nepodporuje úlohy přizpůsobení stylu. Pro odvládací prvek Ověření výběru můžete upravit CSS a vytvořit tak widget, který je stylově upraven podle vašich potřeb.
Všechna pravidla CSS v níže uvedených tématech se vztahují ke standardním pravidlům umístěným v souboru SpryValidationSelect.css. Aplikace Dreamweaver uloží soubor SpryValidationSelect.css do složky zdrojů Spry webového místa při každém vytvoření widgetu Ověření výběru Spry. Přečtení tohoto souboru je užitečné, protože soubor obsahuje vysvětlující informace o nejrůznějších stylech, které se k widgetu vztahují.
Poznámka:
I když můžete pravidla pro widget Ověření výběru 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 chybových zpráv widgetu Ověření výběru
Standardně se textové zprávy pro widget Ověření výběru zobrazují v červené barvě s okrajem o šířce 1 obrazový bod okolo textu.
-
Chcete-li změnit styl textu chybových zpráv widgetu Ověření výběru, použijte k vyhledání příslušného pravidla CSS následující tabulku a pak změňte výchozí vlastnosti nebo přidejte svoje vlastnosti a hodnoty stylu textu:
Textu k nastavení stylu
Příslušné pravidlo CSS
Příslušné vlastnosti, které se mají změnit
Text chybové zprávy
.selectRequiredState .selectRequiredMsg, .selectInvalidState .selectInvalidMsg color: #CC3333; border: 1px solid #CC3333;
Změna barev pozadí widgetu Ověření výběru
-
Chcete-li změnit barvy pozadí widgetu Ověření výběru v různých stavech, použijte k vyhledání příslušného pravidla CSS následující tabulku a pak změňte standardní hodnoty barvy pozadí:
Barva pozadí, kterou chcete změnit
Příslušné pravidlo CSS
Příslušná vlastnost, kterou chcete změnit
Barva pozadí widgetu v platném stavu
.selectValidState select, select.selectValidState background-color: #B8F5B1;
Barva pozadí widgetu v neplatném stavu
select.selectRequiredState, .selectRequiredState select, select.selectInvalidState, .selectInvalidState select background-color: #FF9F9F;
Barva pozadí widgetu při aktivaci
.selectFocusState select, select.selectFocusState background-color: #FFFFCC;
Další podobné nápovědy
Přihlaste se ke svému účtu.