Jquery eklentisi bakıyordum ve eklenti sayısı (4.8618164 gibi) 4.8618164 bir yıldız 5 doldurmuş haline uyum nasıl merak ediyorum. Yıldızlar 5-yıldızlı derecelendirme sistemi dolu jQuery/JS/CSS. kullanarak temelde bir dizi çeviri&; 5 lt

Bu sadece/zaten mevcut bir dizi yıldız derecelendirmesi gösterilir ve yeni derecelendirme başvuru kabul olmayan görüntüler unutmayın.

İşte sana bir çözüm, sadece bir çok küçük ve basit bir resim ve bir otomatik olarak oluşturulan span öğesi kullanarak:

CSS

span.stars, span.stars span {
    display: block;
    background: url(stars.png) 0 -16px repeat-x;
    width: 80px;
    height: 16px;
}

span.stars span {
    background-position: 0 0;
}

Resim

Not:yapınDEĞİLyukarıdaki resim için hotlink! Kendi sunucunuza kopyalayın ve oradan kullanın.

bir WordPress kullanmak

$.fn.stars = function() {
    return $(this).each(function() {
        // Get the value
        var val = parseFloat($(this).html());
        // Make sure that the value is in 0 - 5 range, multiply to get width
        var size = Math.max(0, (Math.min(5, val))) * 16;
        // Create stars holder
        var $span = $('<span />').width(size);
        // Replace the numerical value with stars
        $(this).html($span);
    });
}

Eğer sadece yarım veya çeyrek star boyutlarda yıldızlar kısıtlamak istiyorsanız, var size satır önce bu satırları ekleyin:

val = Math.round(val * 4) / 4; /* To round to nearest quarter */
val = Math.round(val * 2) / 2; /* To round to nearest half */

HTML

<span class="stars">4.8618164</span>
<span class="stars">2.6545344</span>
<span class="stars">0.5355</span>
<span class="stars">8</span>

Kullanımı

$(function() {
    $('span.stars').stars();
});

Çıktı

Demo

http://www.ulmanen.fi/stuff/stars.php

Bu muhtemelen sizin ihtiyaçlarınıza uygun olacaktır. Bu yöntem ile herhangi bir üç çeyrek hesaplamak veya yıldız genişlikleri falan gerek yok, sadece bir şamandıra verecek ve yıldız verecek.

Yıldızlar sunulan hakkında küçük bir açıklama olabilir.

Senaryoyu iki blok seviyesi span elementleri oluşturur. Hem yayılan başlangıçta 80px * 16px ve bir arka plan görüntüsü yıldız bir boyutu.png. Yayılan yayılan yapısı bu gibi görünüyor, böylece iç içe

<span class="stars">
    <span></span>
</span>

Dış span 0 -16px background-position alır. Dış span gri yıldızlar görünür hale getirir. Dış span 16px repeat-x, yüksekliği sadece 5 gri yıldız gösterecektir.

Öte yandan iç span yalnızca sarı yıldızlar görünür yapar 0 0 background-position vardır.

Bu ders iki ayrı imagefiles, star_yellow ile çalışmaya devam eder.png ve star_gray.png. Ama yıldızlar sabit bir yüksekliğe sahip olarak, kolayca bir görüntü içine ikisini birleştirebiliriz. Bu CSS sprite technique kullanır.

Yayılan iç içe geçmiş, birbiri üzerine otomatik olarak yerleştirilmiştir. Her iki yayılma genişliği 80px, sarı yıldızlar olduğunda varsayılan durumda, tamamen gri yıldız belirsiz.

Ama iç span genişliğini ayarlarız, sarı yıldızlar genişliği, gri yıldızlar açığa düşürür.

Erişilebilirlik açısından daha akıllıca olurdu bırakın kaydır sayısı içindeki iç parçası ve Sakla text-indent: -9999px, böylece insanlar ile CSS kapalı olur en azından gördüğüm kayan nokta sayısı yerine yıldızlar.

Umarım bu bana mantıklı geldi.

2010/10/22 güncellendi

Şimdi anlamak için daha kompakt ve daha sert! Ayrıca bir liner için sıkılmış olabilir

$.fn.stars = function() {
    return $(this).each(function() {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}