Přepínače jsou jedním z nejoblíbenějších prvků uživatelského rozhraní. Používají se k výběru jedné ze dvou nebo více možností. Aby byl přepínač přehlednější a přehlednější, lze k němu přidat podsvícení, které bude ukazovat na aktuálně zvolenou možnost. V tomto článku vám řekneme, jak snadno a jednoduše implementovat podsvícení přepínače na webové stránce.
V první řadě budeme potřebovat základní HTML kód přepínače. Obvykle je to sada rádiových tlačítek nebo chekboxů uzavřených v kontejneru. U každého tlačítka rádia nebo checkboxu je třeba nastavit jedinečné ID a název, aby pak pomocí CSS bylo snadné určit, který z prvků má být podsvícen.
Poznámka: Pokud již máte na svém webu přepínače, které je třeba doplnit podsvícením, ujistěte se, že každé tlačítko rádia nebo checkbox je označeno jedinečným identifikátorem. V opačném případě je přidejte sami.
Nyní, když máme přepínač HTML kód, můžete začít stylizovat. K tomu slouží CSS. Najděte požadovaný volič, který odpovídá zvolené položce přepínače, a aplikujte na něj vlastnosti, které nastavují požadované podsvícení. Může to být změna barvy pozadí, barvy textu nebo přidání rámečku kolem vybrané položky.
Jakmile nastavíte styly podsvícení pro vybrané položky přepínače, ujistěte se, že přidaná pravidla platí správně. Poté, při přepínání možností, by vybraná položka měla být zvýrazněna podle daných stylů. Pokud je to nutné, upravte styly, dokud nedosáhnete požadovaného výsledku.
Začít práci
Než začnete vytvářet podsvícení spínače, je nutné připravit pracovní prostředí a shromáždit všechny potřebné nástroje a materiály.
- Ujistěte se, že máte nainstalovaný textový editor schopný pracovat s HTML a CSS soubory. Pokud ne, stáhněte a nainstalujte vhodný editor, jako je Sublime Text nebo Visual Studio Code.
- Vytvořte novou složku projektu a pojmenujte ji podle svého uvážení.
- Uvnitř složky vytvořte nový soubor s příponou .html. Pojmenujte ho například index.html.
- Otevřete vytvořený soubor ve vybraném textovém editoru.
- Přidejte následující základní strukturu kódu HTML:
Подсветка для переключателя Подсветка для переключателя
- Značka označuje verzi HTML, kterou používáme (HTML5).
- Název udává název naší webové stránky, který se zobrazí v záhlaví webového prohlížeče.
- Značka připojuje soubor styles.css .
- Mezi značkami a bude umístěn kód pro přepínač.
- Všechny externí soubory stylů a skripty budou připojeny v následujících krocích.
Krok 1: Vytvoření značení HTML
Zde je příklad HTML kódu, který vytváří jednoduchý přepínač:
V tomto příkladu používáme značku k zobrazení textu "přepínač"a atributové značky type=" checkbox " k vytvoření samotného přepínače.
Důležité je také zadat atribut for V tagu a atribut id v tagu se stejnými hodnotami. To umožňuje spojení mezi textem a samotným přepínačem.
Krok 2: Stylizace přepínače
Po vytvoření samotného přepínače je nutné jej stylizovat, aby vypadal atraktivně a upoutal pozornost uživatele. K tomu použijeme CSS.
1. Přidejte třídy CSS pro každý stav přepínače (například' on 'a'off').
2. Aplikujte tyto třídy na příslušné stavy přepínače pomocí CSS selektorů.
3. Změňte barvu pozadí a písmo textu pro každý stav podle vašeho návrhu.
4. Přidejte styly pro animace přechodu mezi stavy (jako je hladká změna barvy pozadí).
Níže je uveden příklad šablony stylů CSS pro stylizaci přepínače:
Všimněte si, že v tomto příkladu jsme pro stavy přepínače použili třídy 'switch', 'slider' a třídy 'on' a 'off'. Tyto třídy můžete změnit podle svých potřeb a designu.
Po použití stylů bude váš přepínač stylový a připraven k použití!
Přidání funkce
Chcete-li vytvořit podsvícení při přepínání, musíte přidat JavaScript kód, který změní barvu pozadí položky, když je aktivována.
1. Vložte následující kód do sekce
2. Do každého přepínače přidejte atribut onclick, který spouští funkci toggleHighlight a přenáší do něj this:
| Переключатель 1 | Переключатель 2 | Переключатель 3 |
3. Přidejte styly pro aktivní prvek uvnitř oddílu
.active
Nyní se při kliknutí na každý přepínač přidá třída .active, který udává žlutou barvu pozadí. Když kliknete na jiný přepínač třída.active z předchozí položky bude odstraněn a přidán do nové, čímž se vytvoří efekt podsvícení.