Bu dersimizde jquery ile
yıldız oylama nasıl yapılır onu anlatacağım.Genelde filim,konu vs gibi şeyleri oylamak için yıldız veya benzeri bir şekilde oylama sistemi yapılır.
Bu oylama sistemi 2 şekilde yapabiliriz.Birincisi
resim kullanara diğeri ise
font icon kullanarak.Tavsiyem font icon olarak kullanmak.Nedeni ise resime göre daha hızlı olması.Çünkü sadece renk değiştireceğiz.Bu tür sistemlerde hız önemlidir.Şimdi örneğe geçelim.
İncele : http://ustaderslik.com/ornek/yildiz.html
İndir : http://ustaderslik.com/dosya/yildiz.zip
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var kontrol=0;//kontrol değişkenimiz.tıklandıktan sonra renkler sıfırlanmasın diye
$("#yildiz i").mouseover(function(){//yıldızların üzerine mouse ile gelinirse
var index=$(this).index();//üzerine gelinenin sayfadaki sırasını al.
$("#yildiz i").css("color","#000")//tüm yıldızları siyah yap
for(i=index;i>=0;i--){//seçtiğimiz yıldız ve altındakileri döngüye alıyoruz.
$("#yildiz i:eq("+i+")").css("color","#15d4f5");//tek tek renklerini değiştiriyoruz.
}
})
$("#yildiz i").mouseout(function(){//yıldızların üzerinden mouse çekilirse
if(kontrol==0){//kontrol 0 ise
$("#yildiz i").css("color","#000");//hepsini siyah yap
}
})
$("#yildiz i").click(function(){//yıldıza tıklanırsa
var index=$(this).index()+1;//seçilen yıldız sayısını buluyoruz.
kontrol=1;//kontrolü 1 yapıyoruz
alert(index+" yıldız verdiniz.");//yıldız sayısını ekrana bastırıyoruz.
})
})
</script>
<style type="text/css">
#yildiz{font-size:30px;}
</style>
</head>
<body>
<div id="yildiz">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</body>
</html>
Görüntüsü :
Örnek üzerinde anlatımı yaptım.Temel mantık üzerine gelinen yıldızın sırasını alıp altındakilerin rengini değiştirmek.Gerisi tıklandığında aldığımız veriyi ajaxla yollayıp veri tabanına eklemek.
Fontawesomeden istediğiniz iconu seçip yıldız yerine kullanabilirsiniz.
UstaDerslik
