Membuat color slider dengan jQuery UI
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.
Portfolio
Livechat
-
Sonny
Marketing -
Aris G
Support -
Agus
Support -
Kurnianto
Support -
Eko P
Designer -
Andreas
Designer -
Address
PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"
| Phone | : | 021 - 2636 3170 |
| 021 - 3377 0050 | ||
| Mobile | : | 0856 - 9360 1378 |
| 0812 - 806 2772 | ||
| 0857 - 1586 8992 | ||
| 0816 - 180 8005 | ||
| Blackberry PIN | : | 23096502 |
| Fax | : | 021 - 633 5765 |
| Web | : | www.proweb.co.id |