CSS vyhledávání a filtrování obsahu
Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.
Kromě filtrování pomocí radio přepínačů na to lze jít ještě jinak — dle potřeby vygenerovat JavaScriptem CSS kód, který pomocí tříd nebo pokročilých selektorů zvýrazní vyhovující obsah / skryje nevyhovující.
Připojení CSS pomocí JavaScriptu
V novějších prohlížečích (novější než IE 7) stačí měnit innerHTML značky <style>.
<style id=js-styl></style>
<p id=cerveny class=cerveny>Text, který JS přebarví na červenou.
<script>
document.getElementById("js-styl").innerHTML = "p.cerveny {color: red}"
</script>
Ukázka
Text, který JS přebarví na červenou.
Starší Internet Explorery
Ve starších IE funguje tato šílenost:
var css = "p.zeleny {color: green}";
var pomocnyDiv = document.createElement('div');
pomocnyDiv.innerHTML = '<p>jen tak</p><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(pomocnyDiv.childNodes[1]);Ukázka
Text, který JS přebarví na zelenou i ve starých prohlížečích.
Filtrování
Nyní už stačí přidat jednotlivým položkám CSS třídy a těm požadovaným přidat skriptem CSS.
- a
- background-image
- :link
- :visited
- :target
- :first-child
- table
- thead
- tr
- ul
- dl
Vyhledávání
Na tomtéž principu lze vytvořit i vyhledávání v obsahu na stránce.
Použijeme k tomu selektor obsahujícího řetězce. Ten aplikuje dané pravidlo na cokoliv, co má v hlídaném atributu požadovaný text.
p[class*="a"] {color: red}Obarví všechny odstavce, které mají v názvu třídy písmeno a.
Odstavec p.ahoj
Odstavec p.nazdar
Odstavec p.cau
Toho využijeme a do nějakého atributu si připravíme klíčová slova. Vhodné je bude oddělit nějakým málo používaným znakem, aby vyhledávání nechytalo i složeniny více slov.
Klíčová slova může připravit server nebo případně JavaScript — tolerantnějšího vyhledávání dosáhneme převedením klíčových slov i hledaného řetězce na malá písmena (pro ještě tolerantnější vyhledávání můžeme odstranit diakritiku).
- Posicování v CSS
- Složení jednoduchého webu v PHP
- Zjištění skutečných rozměrů obrázku
- Box model
- Stejně vysoké sloupce
- Odkaz jako tlačítko
- Upload souborů bez refreshe
- Automatická datová optimalisace obrázků
- PHP proxy skript
- Fotografie na pozadí
- Centrování v CSS
- Zabránění rolování stránky
- Automatický lazy-loading YouTube videí
- Živý náhled CSS ze Sublime Text
- Kulatý obrázek
- Animace
- Flat UI
- Sublime Text 3 – pluginy a vylepšení
- Emmet
- Pro které prohlížeče optimalisovat
- Mobilní web
- Který prohlížeč je rychlejší?
- Přidání URL do Seznamu a Google
- Meta tag viewport
- Menu reagujicí na kliknutí
- Jak získat náhled webu?
- Testování webů v různých prohlížečích
Separátní živá ukázka.
Vytvoření indexu v PHP
Převést v PHP nadpisy na klíčová slova jde třeba takto:
foreach ($nadpisy as $nadpis) {
echo "<li data-slova='" .
str_replace(" ", "-", strtolower($nadpis)) .
"'>$nadpis";
}
Vytvoření indexu v JavaScriptu
Při načtení stránky může slova pro vyhledávání do data-atributu připravit i přímo JS.
var zaznam = document.getElementById("seznam-polozek").getElementsByTagName("li");
for (var i = 0; i < zaznam.length; i++) {
zaznam[i].setAttribute("data-slova", zaznam[i].innerHTML.replace(/ /g, "-").toLowerCase());
} Alternativní řešení
Popsané řešení nelze použít a není vhodné vždy. V případě prohledávání velkého množství záznamů je nesmyslné všechen obsah vypisovat na jedné stránce. Lepší je AJAXové vyhledávání s pomocí serveru.
Vyfiltrovat výsledky umí i samotný JavaScript pomocí indexOf, bude to ale nejspíš pomalejší než CSS filtrování.
Uživatelský dojem by mohlo ještě zlepšit zvýraznění nalezeného řetězce.
Filtrování v JavaScriptu
Pro filtrování a řazení seznamů nebo tabulek existují i JS hotová řešení:
Komentáře