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í zaškrtávacího pole

widget Spry Ověření zaškrtávacího pole je zaškrtávací políčko nebo skupina zaškrtávacích políček ve formátu HTML, která, když uživatel vybere nebo zapomene vybrat zaškrtávací políčko, zobrazí platné nebo neplatné stavy. widget Ověření zaškrtávacího pole můžete přidat například do formuláře, v němž může být uživatel požádán o provedení třech voleb. Pokud uživatel neprovede všechny tři výběry, widget vrátí zprávu, že nebyl splněn minimální počet výběrů.

Následující příklad zobrazuje widget Ověření zaškrtávacího pole v různých stavech:

Widget Ověření zaškrtávacího pole v různých stavech
Widget Ověření zaškrtávacího pole v různých stavech

A. Skupina widgetů Ověření zaškrtávacího pole, stav minimální počet výběrů B. widget Ověření zaškrtávacího pole, stav Vyžadováno 

widget Ověření zaškrtávacího pole 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í zaškrtávacího pole 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ář.

Platný stav

Stav widgetu, když uživatel provedl výběr nebo správný počet výběrů a můžete odeslat formulář.

Stav Vyžadováno

Stav widgetu, když uživatel neprovedl vyžadovaný výběr.

Stav Minimální počet výběrů

Stav widgetu, když uživatel vybral méně zaškrtávacích políček, než je vyžadovaný minimální počet.

Stav Maximální počet výběrů

Stav widgetu, když uživatel vybral více zaškrtávacích políček, než je maximální povolený počet.

Jakmile widget Ověření zaškrtávacího pole vstoupí do jednoho z těchto stavů prostřednictvím uživatelské interakce, logika frameworku Spry aplikuje za běhu specifickou třídu CSS na kontejner HTML widgetu. Pokud uživatel zkusí například odeslat formulář, ale neprovedl žádný výběr, Spry aplikuje na widget třídu, která vyvolá zobrazení chybové zprávy „Proveďte prosím výběr“. Pravidla, která určují styl a zobrazují stavy chybových zpráv, jsou uložena v souboru CSS (SpryValidationCheckbox.css), který doprovází widget.

Standardní HTML pro widget Ověření zaškrtávacího pole (obvykle ve formuláři) obsahuje tag kontejneru <span>, který obklopuje tag zaškrtávacího políčka <input type="checkbox">. HTML pro widget Ověření zaškrtávacího pole obsahuje v hlavičce dokumentu a za HTML widgetu také tagy skriptu.

Podrobnější vysvětlení činnosti widgetu Ověření zaškrtávacího pole, včetně úplné struktury jeho kódu, naleznete na adrese www.adobe.com/go/learn_dw_sprycheckbox_cz.

Vložení a úpravy widgetu Ověření zaškrtávacího pole

Vložení widgetu Ověření zaškrtávacího pole

  1. Vyberte volbu Vložit > Spry > Ověření zaškrtávacího pole Spry.
  2. Vyplňte dialogové okno Atributy tagu vstupu pro usnadnění přístupu a klepněte na tlačítko OK.

Poznámka:

widget Ověření zaškrtávacího pole 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ž vytváří výběry nebo když zkouší odeslat formulář.

  1. V okně dokumentu vyberte widget Ověření zaškrtávacího pole.
  2. V inspektorovi 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 zaškrtávací pole.

    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.

Stanovení minimálního a maximálního rozsahu výběru

Standardně je widget Ověření zaškrtávacího pole nastaven na vyžadované. Pokud ale na stránku vložíte několik zaškrtávacích políček, můžete specifikovat minimální a maximální rozsah výběru. Pokud například máte v tagu <span> pro jednoduchý widget Ověření zaškrtávacího pole šest zaškrtávacích polí a chcete se ujistit, že uživatel vybere nejméně tři z nich, můžete tyto předvolby nastavit pro celý widget.

  1. V okně dokumentu vyberte widget Ověření zaškrtávacího pole.
  2. V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte volbu Vynutit rozsah.
  3. Zadejte minimální nebo maximální počet zaškrtávacích polí (nebo oba), které má uživatel vybrat.

Zobrazení stavů widgetu v zobrazení Návrh

  1. V okně dokumentu vyberte widget Ověření zaškrtávacího pole.
  2. V inspektoru Vlastnosti (Okna > Vlastnosti) vyberte stav, který chcete vidět v rozbalovací nabídce Náhled stavů. Chcete-li například vidět widget v jeho počátečním stavu, vyberte volbu Výchozí.

Přizpůsobení chybových zpráv widgetu Ověření zaškrtávacího pole

Standardně se chybové zprávy pro widget Ověření zaškrtávacího pole zobrazují v červené barvě s okrajem o šířce 1 obrazový bod okolo textu. Pro widget Ověření zaškrtávacího pole můžete upravit CSS a vytvořit tak widget, který je stylově upraven podle vašich potřeb. Seznam pokročilejších úloh přizpůsobení stylu naleznete na adrese www.adobe.com/go/learn_dw_sprycheckbox_custom_cz.

  1. Otevřete soubor SpryValidationCheckbox.css.

    Aplikace Dreamweaver uloží soubor SpryValidationCheckbox.css do složky zdrojů Spry webového místa při každém vytvoření widgetu Ověření zaškrtávacího pole 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í.

  2. K vyhledání příslušného pravidla CSS použijte 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

    .checkboxRequiredState .checkboxRequiredMsg, .checkboxMinSelectionsState .checkboxMinSelectionsMsg, .checkboxMaxSelectionsState .checkboxMaxSelectionsMsg

    color: #CC3333; border: 1px solid #CC3333;

    Poznámka:

    I když můžete pravidla pro widget Ověření zaškrtávacího pole 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ý.

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