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 verilen puanların ortalamasını gösteren Rating Stars örneğini yapacağız.
Puan verme örneği için Jquery ile Rating Stars Yapımı – Puan Verme yazımı okuyabilirsiniz.
Yapacağımız örneğin görüntüsü şu şekilde olacak.
Artık kodlarımıza geçelim.
Html Kodları
Dikkat ederseniz en dıştaki span etiketi içerisinde data niteliğini kullanıyoruz.
Data niteliğinin kullanımı ile ilgili daha detaylı bilgi için JQuery data(), removeData() Kullanımı yazımı okuyabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 |
<span class="stars" data-rating-val="3.2"> <i class="star1 fa fa-star-o"></i> <i class="star2 fa fa-star-o"></i> <i class="star3 fa fa-star-o"></i> <i class="star4 fa fa-star-o"></i> <i class="star5 fa fa-star-o"></i> <span class="average"> Ortalama : 3.2 Puan</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 |
<script> $(document).ready(function () { var starValue = $(".stars").attr("data-rating-val"); if (starValue == 1) { $(".star1").removeClass("fa-star-o").addClass("fa-star"); } else if (1 < starValue && starValue < 2) { $(".star1").removeClass("fa-star-o").addClass("fa-star"); $(".star2").removeClass("fa-star-o").addClass("fa-star-half-o"); } else if (starValue == 2) { $(".star1,.star2").removeClass("fa-star-o").addClass("fa-star"); } else if (2 < starValue && starValue < 3) { $(".star1,.star2").removeClass("fa-star-o").addClass("fa-star"); $(".star3").removeClass("fa-star-o").addClass("fa-star-half-o"); } else if (starValue == 3) { $(".star1,.star2,.star3").removeClass("fa-star-o").addClass("fa-star"); } else if (3 < starValue && starValue < 4) { $(".star1,.star2,.star3").removeClass("fa-star-o").addClass("fa-star"); $(".star4").removeClass("fa-star-o").addClass("fa-star-half-o"); } else if (starValue == 4) { $(".star1,.star2,.star3,.star4").removeClass("fa-star-o").addClass("fa-star"); } else if (4 < starValue && starValue < 5) { $(".star1,.star2,.star3,.star4").removeClass("fa-star-o").addClass("fa-star"); $(".star5").removeClass("fa-star-o").addClass("fa-star-half-o"); } else if (starValue == 5) { $(".star1,.star2,.star3,.star4,.star5").removeClass("fa-star-o").addClass("fa-star"); } }); </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.
