Jquery Yıldız ile Oylama Yapımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Yıldız ile Oylama Yapımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3315)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/fg1b120s.png

Ö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.




mnasif
mnasif 3 Yıl Önce Cevaplandı
hocam öncelikle paylaşımınız için teşekkürler ben bu yıldızlı oy sistemini sitemde kullanmak istiyorum bu sistemi <li> içinde kullandığımda diğer li elementlerinin üstüne geldiğimde sadece ilk li nin yıldızları seçiliyor bana bu konuda yardımcı olursanız sevinirim teşekkürler



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol