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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<html> <head> <title>Barvy</title> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- jQuery --> <script> $(document).ready(function() { var r = $("#barvaR").val(); var g = $("#barvaG").val(); var b = $("#barvaB").val(); $("#barvaR").change(function() { r = $("#barvaR").val(); nastavBarvu(); }); $("#barvaG").change(function() { g = $("#barvaG").val(); nastavBarvu(); }); $("#barvaB").change(function() { b = $("#barvaB").val(); nastavBarvu(); }); function nastavBarvu() { console.log("cervena=" + r + " zelena=" + g + " modra=" + b); $("#namichanaBarva").css("background-color", "rgb(" + r + "," + g + "," + b +")"); } }); </script> <style> #namichanaBarva { border-width: 2px; border-style: solid; border-color: black; width: 100px; height: 100px; } </style> </head> <body> <!-- do tohoto divu se nastavi namichana barva --> <div id="namichanaBarva"></div> <p>Výběr barvy:</p> <form> <!-- vstupni pole pro rozsah (slider), funguje pouze v novych prohlizecich - Internet Explorer s tim ma problemy! http://www.html5tutorial.info/html5-range.php --> <input id="barvaR" type="range" min="0" max="255" step="1" /> R (0 - 255) <br> <input id="barvaG" type="range" min="0" max="255" step="1" /> G (0 - 255) <br> <input id="barvaB" type="range" min="0" max="255" step="1" /> B (0 - 255) </form> </body> </html> |
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: