Günümüzde birçok web sitesinde Rating Stars örneklerini görüyoruz. Rating Stars ile puan verme işlemini yapabildiğimiz gibi verilen puanların ortalamasını da hesaplayıp gösterebiliriz.
Örneğin bir blog sitesi düşünelim. Her yazının sonuna Rating Stars ekleyerek blog ziyaretçilerinin o yazı ile ilgili bir puan vermesini sağlayabiliriz. Yada E-Ticaret sitelerinde olduğu gibi her ürünün altına Rating Stars ekleyerek o ürünü alan kişilerin ürün hakkında değerlendirme puanı vermelerini sağlayabiliriz.
Böylece verilen tüm değerlendirme puanlarının ortalamasını ziyaretçiye göstererek, ziyaretçinin o ürün hakkında genel bir fikir edinmesini sağlarız.
Bu yazımda yıldız üzerinden puan verme uygulamasını yapacağız.
Verilen puanların ortalamasını gösteren uygulama için Jquery ile Rating Stars Yapımı – Verilen Puanların Ortalamasını Gösterme yazımı okuyabilirsiniz.
Yapacağımız örneğin görüntüsü şu şekilde olacak.
Artık kodlarımıza geçelim.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 |
<span class="stars"> <i class="star1-hover fa fa-star-o"></i> <i class="star2-hover fa fa-star-o"></i> <i class="star3-hover fa fa-star-o"></i> <i class="star4-hover fa fa-star-o"></i> <i class="star5-hover fa fa-star-o"></i> <span class="average"></span> </span> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.fa-star-o { font-size: 20px; color: #808080; } .fa-star-half-o { font-size: 20px; color: #EDB867; } .fa-star { font-size: 20px; color: #EDB867; } .average { font-size: 18px; color: #808080; padding-left: 10px; } |
CDN olarak eklediğimiz Framework veya Kütüphaneler
İlk olarak Jquery‘i CDN olarak ekliyoruz.
Daha sonra ise ikonlar için Fontawesome‘ı CDN olarak ekliyoruz.
Fontawesome’ın son sürümünü CDN olarak kullanabilmek için sitesinden kayıt olup sonrasında gerekli CDN kodunu alabiliyoruz.
Siz kayıt olup size verilen CDN kodunu sayfanıza eklemelisiniz.
|
1 2 3 4 5 |
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/sizin-id-niz-gelecek.js" crossorigin="anonymous"></script> |
Jquery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<script> $(document).ready(function () { $(".star1-hover").hover(function () { $(".star1-hover").removeClass("fa-star-o").addClass("fa-star"); $(".star2-hover,.star3-hover,.star4-hover,.star5-hover").removeClass("fa-star").addClass("fa-star-o"); }, function () { $(".star1-hover,.star2-hover,.star3-hover,.star4-hover,.star5-hover").removeClass("fa-star").addClass("fa-star-o"); }); $(".star2-hover").hover(function () { $(".star1-hover,.star2-hover").removeClass("fa-star-o").addClass("fa-star"); $(".star3-hover,.star4-hover,.star5-hover").removeClass("fa-star").addClass("fa-star-o"); }, function () { $(".star1-hover,.star2-hover,.star3-hover,.star4-hover,.star5-hover").removeClass("fa-star").addClass("fa-star-o"); }); $(".star3-hover").hover(function () { $(".star1-hover,.star2-hover,.star3-hover").removeClass("fa-star-o").addClass("fa-star"); $(".star4-hover,.star5-hover").removeClass("fa-star").addClass("fa-star-o"); }, function () { $(".star1-hover,.star2-hover,.star3-hover,.star4-hover,.star5-hover").removeClass("fa-star").addClass("fa-star-o"); }); $(".star4-hover").hover(function () { $(".star1-hover,.star2-hover,.star3-hover,.star4-hover").removeClass("fa-star-o").addClass("fa-star"); $(".star5-hover").removeClass("fa-star").addClass("fa-star-o"); }, function () { $(".star1-hover,.star2-hover,.star3-hover,.star4-hover,.star5-hover").removeClass("fa-star").addClass("fa-star-o"); }); $(".star5-hover").hover(function () { $(".star1-hover,.star2-hover,.star3-hover,.star4-hover,.star5-hover").removeClass("fa-star-o").addClass("fa-star"); }, function () { $(".star1-hover,.star2-hover,.star3-hover,.star4-hover,.star5-hover").removeClass("fa-star").addClass("fa-star-o"); }); $(".star1-hover").click(function () { $(".average").text("1 puan verdiniz...") }); $(".star2-hover").click(function () { $(".average").text("2 puan verdiniz...") }); $(".star3-hover").click(function () { $(".average").text("3 puan verdiniz...") }); $(".star4-hover").click(function () { $(".average").text("4 puan verdiniz...") }); $(".star5-hover").click(function () { $(".average").text("5 puan verdiniz...") }); }); </script> |
Örnek uygulamamızın kodları bu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
Peki her kullanıcı 1 adet mi oy vericek ve bu verdikleri oy nerde saklanıcak ?