Moderní tvorba webových aplikací

O webu

Jednoduché filtrování dat v čistém CSS

Při filtrování malého množství položek si lze od Internet Exploreru 9 vystačit jen s CSS.

3 minuty
  • Michael Schumacher
  • Fernando Alonso
  • Kimi Räikkönen
  • Lewis Hamilton
  • Jenson Button
  • Sebastian Vettel
  • David Coulthard
  • Mark Webber

Jak?

Využívá se:

  1. selektoru :checked (pro vybraný formulářový prvek radio nebo checkbox),
  2. selektoru ~ (libovolný sourozenec),
  3. obyčejných tříd – každá položka má třídy podle příslušné skupiny (jedna položka může (ale nemusí) patřit do více skupin).
    <li class="ferrari mercedes">Michael Schumacher</li>

Na začátku se všechny položky skryjí (display: none) a při

input#id-inputu:checked ~ ul .nazev-prislusne-tridy {display: list-item}

… se opět objeví.

Důležité je, aby se bylo jak dostat z input:checked na jednotlivé položky, <input> proto nemůže být hlouběji zanořen.

Starší prohlížeče

Aby se v nepodporovaných prohlížečích zobrazil alespoň seznam bez možnosti filtrování, položky se schovávají přes :not(:checked). Pokud je tedy prohlížeč dokáže skrýt, dokáže je i zobrazit.

Vyřešit funkčnost pro starší Explorery a jiné by mohl vyřešit jednoduše JS:

  • Při kliknutí na <input> nastavit pro jeho rodiče (this.parentNode) třídu (className) třeba dle identifikátoru (this.id),
  • zjednodušit CSS a položky zobrazovat při .trida-rodice .trida-skupiny {}.

A nebo vytvořit plnohodnotný formulář a data posílat vyfiltrovat na server.

Vyhledávání textu na stránce

Se špetkou JavaScriptu je možné na webu vyhledávat.

Související články

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025