Jquery ile Rating Stars Yapımı – Puan Verme

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.

jquery-rating-stars-ornegi-2-gif

Artık kodlarımıza geçelim.

Html Kodları

Css Kodları

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. 

Jquery Kodları

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

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link