Posted on Monday, 18th January 2010 by zairvai
Rating adalah salah satu komponen penting dalam menyajikan informasi. Karena rating layaknya saran, opini, feedback dari pembaca atau pengunjung website Anda. Tampilannya pun harus dapat menarik perhatian sehingga pembaca/pengunjung mau memberikan rating pada produk/artikel Anda.
Di sini saya berikan tutorial singkat untuk membuat sistem rating menggunakan CSS (cascade style sheet) dan jQuery . Berikut ulasannya
Buat container yang akan menampung gambar bintang
copy-paste kode ini di dalam tag body
<body>
.. disini ..
</body>
<div id="ratingdiv"> <a href="#" rel="1">star one</a> <a href="#" rel="2">star two</a> <a href="#" rel="3">star three</a> <a href="#" rel="4">star four</a> <a href="#" rel="5">star five</a> </div>
Load Javascript jQuery
Saya mengambil jquery yang tersedia pada repositori Google.
copy paste kode ini di dalam tag head
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function (){
$('#ratingdiv .undone').click(function(){
var div = '#ratingdiv';<span style="white-space: pre;"> </span>
$(div).html('<img src="load.gif" />');
var postdata = "rate=" + $(this).attr('rel');
$.ajax({type: "POST",url: "rate.php",data: postdata,success: function(msg){$(div).html(msg)}});
});<span style="white-space: pre;"> </span>
$('#ratingdiv .voted').live('click' , function(){
alert('Maaf anda sudah melakukan rating, Tekan F5 untuk mencoba lagi!');
});
});
</script>
Dengan CSS, tampilan rating akan lebih interaktif.
copy paste kode ini di dalam tag head
<style>
html{text-align:center;}
body{width:950px;margin:0 auto;font-family:trebuchet ms;text-align:left}
.clear{clear:both;}
a{outline:0}
#ratingdiv{margin-bottom:20px;overflow:hidden}
#ratingdiv .undone, #ratingdiv .fade{background:url("star.gif") -30px 0 no-repeat;width:28px;display:block;height:30px;float:left;margin-right:4px;text-indent:-99999px}
#ratingdiv .done{background-position:0;background:url("star.gif") no-repeat;width:28px;display:block;height:30px;float:left;margin-right:4px;text-indent:-99999px}
#ratingdiv .undone:hover{background-position:0}
</style>
Jika semuanya telah siap Anda bisa melihat Demo
Tags: css, jquery, rating, web developer
Kategori Tutorial | Comments (0)
