jQuery – interaktivni michani RGB barev

Pred casem jsme v Jicinskem GeekLabu pri reseni projektu Interaktivni reklama potrebovali pomoci JavaScriptu michat na HTML strance RGB barvy. Vznikl jednoduchy kod vyuzivajici jQuery a Input s HTML5 type range.

Vysvetleni kodu

Ovladaci prvky pro vyber RGB hodnot (cisla od 0 do 255) jsou reseny formularovymi HTML inputy. Je vyuzit novy typ range, ktery byl pridan v HTML5. Range zobrazuje misto vstupniho textoveho pole jezdec. Stary Internet Explorer (pod 10) ma s range problemy – uzivatele IE maji problem 😉

Formular se nikam neodesila, zmena se odchytava JavaScriptem.

Pomoci jQuery se hlidaji prvky s ID barvaR, barvaG a barvaB. To jsou prave ony 3 inputy. Na tyto 3 ID je povesena change udalost, ktera se jak je z nazvu patrne vyvola vzdy pri zmene hodnoty inputu. Jakmile dojde ke zmene, nacte se do promenne aktualni hodnota z inputu a zavola se funkce nastavBarvu().

Funkce nastavBarvu() nastavi divu s id namichanaBarva CSS vlastnost background-color a to konkretne 3 RGB hodnoty z promennych. Navic pro ucely ladeni vypise do console aktualni hodnoty barevnych slozek.

Kod je prevazne samovysvetlujici.

Cele je to videt na ukazkovem videu:

 

 

 

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *