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:

Widget Ověření výběru
Widget Ověření výběru

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

  1. Vyberte volbu Vložit > Spry > Ověření výběru Spry.
  2. Vyplňte dialogové okno Atributy tagu vstupu pro usnadnění přístupu a klikněte na tlačítko OK.
  3. 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ář.

  1. V okně dokumentu vyberte widget Ověření výběru.
  2. 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

  1. V okně dokumentu vyberte widget Ověření výběru.
  2. 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.

  1. V okně dokumentu vyberte widget Ověření výběru.
  2. 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>
  1. V okně dokumentu vyberte widget Ověření výběru.
  2. 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.

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

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

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