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.
<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: