Pada artikel ini kita akan membuat color slider dengan memakai widget slider yang ada di jQuery UI. Berikut langkah-langkah pembuatannya:
- Div untuk slider :
R: <div id=”r_slider” style=”width:400px;”></div><br/><br/>
G: <div id=”g_slider” style=”width:400px;”></div><br/><br/>
B: <div id=”b_slider” style=”width:400px;”></div><br/><br/> - Output hasil pemilihan warna :
<div id=”color_box” style=”width:100px;height:100px;”></div>
Color value:<input id=”rgb_text” value=”rgb(255,255,255)”> - Include file-file yang diperlukan :
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.mouse.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.slider.js”>
</script> - Coding untuk mengambil kode warna dan menampilkannnya:
<script>
(function($){
var pilihan = {
min: 0,
max: 255,
value: 255,
change: function(){
var r=$(“#r_slider”).slider(“value”);
var g=$(“#g_slider”).slider(“value”);
var b=$(“#b_slider”).slider(“value”);
var rgb_text=[“rgb(“,r,”,”,g,”,”,b,”)”].join(” “);
$(“#color_box”).css({backgroundColor: rgb_text});
$(“#rgb_text”).val(rgb_text);
}
};
$(“#r_slider,#g_slider,#b_slider”).slider(pilihan);
})(jQuery);
</script>
Untuk keseuluran codingnya :
<!DOCTYPE html>
<html>
<head>
<title>Color Slider</title>
<link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”>
</head>
<body>
R: <div id=”r_slider” style=”width:400px;”></div><br/><br/>
G: <div id=”g_slider” style=”width:400px;”></div><br/><br/>
B: <div id=”b_slider” style=”width:400px;”></div><br/><br/>
<div id=”color_box” style=”width:100px;height:100px;”></div>
Color value:<input id=”rgb_text” value=”rgb(255,255,255)”>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.widget.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.mouse.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.slider.js”>
</script>
<script>
(function($){
var pilihan = {
min: 0,
max: 255,
value: 255,
change: function(){
var r=$(“#r_slider”).slider(“value”);
var g=$(“#g_slider”).slider(“value”);
var b=$(“#b_slider”).slider(“value”);
var rgb_text=[“rgb(“,r,”,”,g,”,”,b,”)”].join(” “);
$(“#color_box”).css({backgroundColor: rgb_text});
$(“#rgb_text”).val(rgb_text);
}
};
$(“#r_slider,#g_slider,#b_slider”).slider(pilihan);
})(jQuery);
</script>
</body>
</html>
Demo dapat dilihat di http://aris.proweb.asia/slider_color.html dengan tampilan seperti di bawah ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.