6 Aralık 2006 Çarşamba

Rating Stars, Websitenize Yıldız Temalı Rating Ekleyin.

Bir çok sitede gördüğünüz rating yıldızcıklarını artık kendi sitenizede ekleyebilirsiniz.
İşlem oldukça basit.

Öncelikle yıldız resimlerinin içinde bulunacağı bir table yapmalıyız.


<table id="starTable" width="75" height="15" border="0" cellpadding="0" cellspacing="0" background="star0.gif" onMouseOut="resetRate(this)">
<tr>
<td width="15" height="15" onMouseOver="changeRate('1')" onClick="rate(this,'1')"></td>
<td width="15" onMouseOver="changeRate('2')" onClick="rate(this,'2')"></td>
<td width="15" onMouseOver="changeRate('3')" onClick="rate(this,'3')"></td>
<td width="15" onMouseOver="changeRate('4')" onClick="rate(this,'4')"></td>
<td width="15" onMouseOver="change('5')" onClick="rate(this,'5')"></td>
</tr>
</table>

table'a ilk baktığımızda sanki ayrı ayrı yıldızlar varmış gibi gözükmesine rağmen aslında toplamda altı resim var.
Bir tane bütün yıldız ların sönük olduğu resim, ardından bütün yıldızların yanık olduğu resme kadar sırayla artan 5 resim daha. bu mantıkla işlem bir anda bebek işine dönüşüyor.
Şimdi kod'a dikkat ettiyseniz 3 adet function görürsünüz
bunlar
changeRate()
rate()
resetRate()
Ayrıca table'a birde background-image verdim bu image sıfır rating'i temsil ediyor.
functionların Şimdi hepsini bir bir açıklayalım Örnek kodu'da altta

function changeRate(val){
document.getElementById('starTable').style.backgroundImage = "url(star"+val+".gif)";
}

function rate(val){
document.getElementById('rated').value = val;
}

function resetRate(elem){
var val = document.getElementById('rated').value;
if(val == "")
elem.style.backgroundImage="url(star0.gif)";
else
elem.style.backgroundImage="url(star"+val+".gif)";
}
onMouseMove event'inde çağırdığımız changeRate function'ı mouse'u üzerine getirdiğimiz TD'ye göre Table'ın background image'ını değiştiriyor. buda yıldızların dolma boşalma efektini oluşturuyor.
funtion table'ı id'sinden yakalayıp backgraound image olarak daha önceden hazırladığımız ve akıllıca isimlendirdiğimiz yıldız resimlerini atıyor. akıllıca diyorum çünki verdiğimiz isimler şöyle
star0.gif
star1.gif
star2.gif
vs.
hangi rating verildiyse
"star"+val+".gif"
diyerek sadece bir seferde if kullanmadan resimlere ulaşabiliyoruz.
bu tarz dosya isimleri çoğu zaman hayat kurtarır.
---
onMouseClick event'inde çağırdığımız rate function'ı tek değer alıyor. buda rating değeri.
function basitçe kendisine gönderilen değeri bir textbox'ın içine yazıyor. seçilen değeri bir yerlerde tutmalıyızki daha sonra yıldızlarımız kaç seçtiğimizi hatırlayabilsin.
bu function aslında en önemli function çünki oylama burda yapılıyor ve gerçek bir uygulamada bütün içeriği bu function'a yazmanız gerekebilir. isterseniz direk PHP ile istereniz (ki daha uygun) AJAX ile seçili değeri database'inize gönderebilirsiniz. textbox yerine hidden field kullanabilirsiniz ben burda demo olduğu için bir textbox kullandım.
Rating:
<input type="text" id="rated" />

---
Üçüncü ve son functionda resetRate Function'ı mouse'umuzu yıldızların üzerinden çektiğimizde değerlerini unutmamalarını ve göstermeye devam etmelerini sağlayan function. bu function'ı yıldızların tamamını kapsayan table'ın onMouseOut event'ine koyduk ki mouse terk ettiğinde çalışsın.
function direkt textbox'ımızın içindeki değere bakıyor. eğer textboxda hiçbirşey yoksa sıfır nolu resmi eğer bir değer varsada changeRate'de yaptığımız gibi o değerin resmini çağırıyor. bu functionda textbox'ın içindeki değeri doğrulayan herhangi bir kontrol kod'u koymadım çünki zaten büyük olasılıkla hidden kullanıcaksınız.
--
kodlar gayet basit olduğuiçin istediğiniz gibi düzenleyebilirsiniz. Örnek kod için buraya

3 yorum:

Adsız dedi ki...

Teşekkürler, çok makbule geçti...

illaki dedi ki...

kardeş link ölmüş cok lazımdı yaa güzel bişi ve bir cok yerde yok

Serkan Yerşen dedi ki...

Merahaba,

Bu kod çok eski olduğundan bunun izerinde çalışmıyorum artık. Ancak çalışan versiyonunu JotForm.com adresinde bulabilirsin. Bir form yarat ve içine "Özel araçlar" kutusundan "Değerlendirme" elementini bırak. Formu çalıştırdığında elinde çalışan bir örnek olur.

Ben bu script'in yeni versiyonunu yazdım onuda http://github.com/serkanyersen/protoplus/ adresinde bulabilirsin.

Protoplus, Prototype.js kütüphanesi ile çalışan bir eklentidir. O yüzden önce prototype'ı sonra protoplus'ı sayfa eklemen gerekir. Bu kütüpühaneyi kullanabilmek için internette biraz araştıma yapman gerek.

Hiç birini yapamazsan http://www.nickstakenburg.com/projects/starbox/ adresinde bildiğim en güzel rating aracı var. Nasıl kullanacağında anlatılmış orayada bakabilirsin.

Yardımcı olamadığım için kusura bakma.