Assalamu’alaikum Wr. Wb.
Hai sobat blogger semuanya. Di kesempatan
kali ini, saya akan memberikan sedikit tutorial tentang bagaimana cara membuat
star vote atau star rating pada blogger menggunakan jQuery. Apa itu jQuery????
jQuery adalah pustaka JavaScript
lintas-platform yang didesain untuk menyederhanakan client-side scripting pada
HTML. jQuery merupakan pustaka JavaScript yang paling populer, dengan 65%
pemasangan dari 10 juta situs Web dengan pengunjung tertinggi. Penggunaan jQuery
gratis, dan bersifat kode sumber terbuka dibawah lisensi MIT. Pertama-tama, user harus membuat sebuah folder dengan nama learn_rating
dalam folder htdocs di localhost. Kemudian di dalam folder
learn_rating, buat lagi 3 folder, yaitu :
1. CSS berisi file rating-star.css untuk style dari rating
2. Images berisi file images untuk hover rating star nya.3. Js berisi file javascript
Buat file baru pake notepad bisa atau mau pake editor lainnya juga bisa. Kemudian ketik script di bawah ini dan simpan di folder css dengan nama rating_star.css :
.webwidget_rating_sex{Lanjut lagi untuk membuat rating_star.js dan simpan di folder js, untuk scriptnya ada dibawah :
padding: 0px;
margin: 0px;
float: left;
}
.webwidget_rating_sex li{
line-height: 0px;
width: 28px;
height: 28px;
padding: 0px;
margin: 0px;
margin-left: 2px;
list-style: none;
float: left;
cursor: pointer;
}
.webwidget_rating_sex li span{
display: none;
}
.webwidget_rating_sex2{
padding: 0px;
margin: 0px;
float: left;
}
.webwidget_rating_sex2 li{
line-height: 0px;
width: 28px;
height: 28px;
padding: 0px;
margin: 0px;
margin-left: 2px;
list-style: none;
float: left;
cursor: pointer;
}
.webwidget_rating_sex2 li span{
display: none;
}
(function(a){Untuk jquery.min.js, bisa didownload di http://www.jquery.com. Untuk images nya, silahkan save as image di bawah ini:
a.fn.webwidget_rating_sex=function(p){
var p=p||{};
var b=p&&p.rating_star_length?p.rating_star_length:”5″;
var c=p&&p.rating_function_name?p.rating_function_name:””;
var e=p&&p.rating_initial_value?p.rating_initial_value:”0″;
var d=p&&p.directory?p.directory:”images”;
var f=e;
var g=a(this);
b=parseInt(b);
init();
g.next(“ul”).children(“li”).hover(function(){
$(this).parent().children(“li”).css(‘background-position’,’0px 0px’);
var a=$(this).parent().children(“li”).index($(this));
$(this).parent().children(“li”).slice(0,a+1).css(‘background-position’,’0px -28px’)
},function(){});
g.next(“ul”).children(“li”).click(function(){
var a=$(this).parent().children(“li”).index($(this));
f=a+1;
g.val(f);
if(c!=””){
eval(c+”(“+g.val()+”)”)
}
});
g.next(“ul”).hover(function(){},function(){
if(f==””){
$(this).children(“li”).slice(0,f).css(‘background-position’,’0px 0px’)
}else{
$(this).children(“li”).css(‘background-position’,’0px 0px’);
$(this).children(“li”).slice(0,f).css(‘background-position’,’0px -28px’)
}
});
function init(){
$(‘<div style=”clear:both;”></div>’).insertAfter(g);
g.css(“float”,”left”);
var a=$(“<ul>”);
a.addClass(“webwidget_rating_sex”);
for(var i=1;i<=b;i++){
a.append(‘<li style=”background-image:url(‘+d+’/web_widget_star.gif)”><span>’+i+'</span></li
}
a.insertAfter(g);
if(e!=””){
f=e;
g.val(e);
g.next(“ul”).children(“li”).slice(0,f).css(‘background-position’,’0px -28px’)
}
}
}
})(jQuery);
Selanjutnya user membuat file index.php dengan editor yang biasa user pergunakan dan isikan sesuai dengan script di bawah ini :
<html>
<head>
<title>Tutorial Membuat Rating Star</title>
<link href=”css/rating_star.css” rel=”stylesheet” type=”text/css”>
<script type=”text/javascript” src=”js/jquery.min.js”></script>
<script language=”javascript” type=”text/javascript”>
function test(value){
alert(“This rating’s value is “+value);
}
$(function() {
$(“#rating_simple1″).webwidget_rating_sex({
rating_star_length: ‘5’,
rating_initial_value: ”,
rating_function_name: ”,//this is function name for click
directory: ‘images/’
});
});
</script>
<script type=”text/javascript” src=”js/rating_star.js”></script>
</head>
<body>
<h1>Tutorial Membuat Rating Star</h1>
<form method=post action=’#’>
<table width=’100%’ border=’0′ cellspacing=’1′ cellpadding=’1′>
<tr>
<td colspan=2><div style=’float:left; width:130px; padding-top:12px;’>Rating</div>
<div style=’float:left;’>
<input name=’my_input’ id=’rating_simple1′ type=’hidden’ style=’float:left;’>
</div>
<div style=’font-size:11px; font-weight:normal; padding-left:20px; float:left; padding-top:10px;’>Roll over stars, then click to rate</div>
<div style=’clear:both;’></div>
</td>
</tr>
</table>
</body>
</html>
Lalu simpan dengan nama, index.php. kemudian buka browser dan ketikkan http://localhost/learn_rating
Sekian tutorial dari saya. Mohon saran dan masukan dari pembaca. Karena saya sadar tutorial ini masih banyak kekurangan.
Wassalamu'alaikum Wr. Wb.
