Egoblog.cz - Petr Kobelka

Elegantní selekce produktů v Javasciptu

Pro jeden svůj projekt jsem řešil problém, jak rychle a "bezbolestně" filtrovat produkty podle velikosti. Řešení je popsáno v článku.


Webdesign | Komentáře (0) | Shlédnuto 1161 × | Vloženo: 15. září 2013

Pro jeden svůj projekt jsem řešil problém, jak rychle a "bezbolestně" filtrovat produkty podle velikosti. Výstupem z aplikace je hromada DIVů a já je chcí filtrovat podle "velikosti". Velikost je nějaká hodnota, která je uvedena uvnitř DIVu. Jde o informaci pro návštěvníky. Rozumějte, jde o hotdnotu jako je L/XL ve velikosti oblečení.

První možnost: server-side

První možností je poslat request na server s požadavkem na úpravu výstupního seznamu dat. To mi ale přijde jako overkill a zbytečně zdlouhavé nehledě na to, že by se zbytečně zatěžoval server.

Druhá možnost: Javascipty + CSS

Tady jde o kombinaci javascriptu a CSS. V principu jde o to, že každá "velikost" má svůj vlastní CSS class a pak je lze poměrně jednoduše filtrovat Javascriptem.

Co jsem zvolil?

Ano, správně, zvolil jsem druhou možnost. Funguje na straně klienta (internetového prohlížeče) a tedy nezatěžuje server zbytečnými dotazy. Navíc je vše rychlejší, protože opět nezatěžuje server.

Princip fungování Javascript+CSS

Vše funguje velmi jednoduše. Kliknutím na vybraný checkbox se dané velikosti triček schovají, nebo zobrazí.

Konkrétní příklad

Pro příklad použiji zmíněný "příklad" - velikost oblečení.

Předpokládejme, že máme 2 trička velikosti M a 2 trička velikosti L.

HTML

//Pak mám nahoře výběr CHECKBOXů s velikostmi.
Velikost M
Velikost L

//výpis produktů

Tri4ko M - 1

Tri4ko M - 2

Tri4ko L - 1

Tri4ko L - 2

Javascript:


Podobné články jako "Elegantní selekce produktů v Javasciptu"

Petr Kobelka | Egoblog.cz | Tvorba www stránek - www.petrkobelka.cz

Petr Kobelka
Autor je zkušeným web developerem a programátorem s více než 10 letými zkušenostmi. Pracuje jako programátor pro známou Olomouckou společnost zabývající se tvorbou internetových a intranetových řešení. Spolu se zaměstnáním pracuje na volné noze a zabývá se tvorbou internetových stránek. Ve volném čase rád fotí, jezdí na kole, plave a cestuje.

Komentáře

E-mail je potřeba pouze pro vygenerování Gravataru!

Oups, žádné komentáře? Buďtě první !!!

Blog píše Petr Kobelka

Petr Kobelka - egoblog.cz

Žádám všechny, kteří mají zájem vkládat komentáře, aby se řídili pravidly NETikety. Komentáře, porušující tato pravidla můžou být bez varování smazány.