it-swarm.com.de

Verwandeln Sie eine Zahl in eine Sternbewertung mit jQuery und CSS

Ich habe mir das Jquery-Plugin angesehen und habe mich gefragt, wie man dieses Plugin anpasst, um eine Zahl (wie 4.8618164) in einen 4.8618164-Stern aus 5 zu verwandeln/JS/CSS. 

Beachten Sie, dass dies nur die Sterne einer bereits verfügbaren Nummer anzeigen/anzeigen würde und keine neuen Einreichungen akzeptiert. 

98
Steve

Hier ist eine Lösung für Sie, die nur ein sehr kleines und einfaches Bild und ein automatisch erzeugtes Bereichselement verwendet:

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;
}

Bild

alter Text http://www.ulmanen.fi/stuff/stars.png

Hinweis: do NICHT Hotlink zum obigen Bild! Kopieren Sie die Datei auf Ihren eigenen Server und verwenden Sie sie von dort aus.

jQuery

$.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);
    });
}

Wenn Sie die Sterne nur auf halbe oder viertel Sterngrößen einschränken möchten, fügen Sie vor der var size-Zeile eine dieser Zeilen ein:

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>

Verwendungszweck

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

Ausgabe

Bild von einem Fugensymbol (www.pinvoke.com) http://www.ulmanen.fi/stuff/stars_output.png

Demo

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

Dies wird wahrscheinlich Ihren Bedürfnissen entsprechen. Bei dieser Methode müssen Sie keine Dreiviertel- oder Nicht-Sternweiten berechnen. Geben Sie dem Float einfach einen Float, und Sie erhalten Ihre Sterne.


Eine kleine Erklärung, wie die Sterne dargestellt werden, ist möglicherweise in Ordnung.

Das Skript erstellt zwei Elemente auf Blockebene. Beide Bereiche haben anfänglich eine Größe von 80px * 16px und ein Hintergrundbild stars.png. Die Felder sind verschachtelt, sodass die Struktur der Felder wie folgt aussieht:

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

Der äußere Bereich erhält einen background-position von 0 -16px. Dadurch werden die grauen Sterne im äußeren Bereich sichtbar. Da der äußere Bereich eine Höhe von 16px und repeat-x hat, werden nur 5 graue Sterne angezeigt.

Der innere Bereich dagegen hat einen background-position von 0 0, der nur die gelben Sterne sichtbar macht.

Dies würde natürlich mit zwei separaten Bilddateien, star_yellow.png und star_gray.png, funktionieren. Da die Sterne jedoch eine feste Höhe haben, können wir sie leicht zu einem Bild kombinieren. Dies verwendet die CSS Sprite-Technik .

Jetzt, da die Bereiche verschachtelt sind, werden sie automatisch übereinander gelegt. In der Standardeinstellung, wenn die Breite beider Bereiche 80 Pixel beträgt, verdunkeln die gelben Sterne die grauen Sterne vollständig.

Wenn Sie jedoch die Breite des inneren Bereichs anpassen, verringert sich die Breite der gelben Sterne, wodurch die grauen Sterne sichtbar werden.

Im Hinblick auf die Zugänglichkeit wäre es klüger gewesen, die Float-Nummer innerhalb des inneren Bereichs zu belassen und sie mit text-indent: -9999px zu verbergen, sodass Personen mit deaktiviertem CSS mindestens die Gleitkommazahl anstelle der Sterne sehen würden.

Hoffentlich ergab das einen Sinn.


Aktualisiert am 2010/10/22

Jetzt noch kompakter und schwieriger zu verstehen! Kann auch zu einem Liner zusammengedrückt werden:

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

Wenn Sie nur moderne Browser unterstützen müssen, können Sie Folgendes erreichen:

  • Nein Bilder;
  • Meistens static css;
  • Fast kein jQuery oder Javascript;

Sie müssen nur die Zahl in ein class umwandeln, z. class='stars-score-50'.

Zuerst eine Demo des "gerenderten" Markups:

body { font-size: 18px; }

.stars-container {
  position: relative;
  display: inline-block;
  color: transparent;
}

.stars-container:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  color: lightgray;
}

.stars-container:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  color: gold;
  overflow: hidden;
}

.stars-0:after { width: 0%; }
.stars-10:after { width: 10%; }
.stars-20:after { width: 20%; }
.stars-30:after { width: 30%; }
.stars-40:after { width: 40%; }
.stars-50:after { width: 50%; }
.stars-60:after { width: 60%; }
.stars-70:after { width: 70%; }
.stars-80:after { width: 80%; }
.stars-90:after { width: 90%; }
.stars-100:after { width: 100; }
Within block level elements:

<div><span class="stars-container stars-0">★★★★★</span></div>
<div><span class="stars-container stars-10">★★★★★</span></div>
<div><span class="stars-container stars-20">★★★★★</span></div>
<div><span class="stars-container stars-30">★★★★★</span></div>
<div><span class="stars-container stars-40">★★★★★</span></div>
<div><span class="stars-container stars-50">★★★★★</span></div>
<div><span class="stars-container stars-60">★★★★★</span></div>
<div><span class="stars-container stars-70">★★★★★</span></div>
<div><span class="stars-container stars-80">★★★★★</span></div>
<div><span class="stars-container stars-90">★★★★★</span></div>
<div><span class="stars-container stars-100">★★★★★</span></div>

<p>Or use it in a sentence: <span class="stars-container stars-70">★★★★★</span> (cool, huh?).</p>

Dann eine Demo, die ein bisschen Code verwendet:

$(function() {
  function addScore(score, $domElement) {
    $("<span class='stars-container'>")
      .addClass("stars-" + score.toString())
      .text("★★★★★")
      .appendTo($domElement);
  }

  addScore(70, $("#fixture"));
});
body { font-size: 18px; }

.stars-container {
  position: relative;
  display: inline-block;
  color: transparent;
}

.stars-container:before {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  color: lightgray;
}

.stars-container:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  color: gold;
  overflow: hidden;
}

.stars-0:after { width: 0%; }
.stars-10:after { width: 10%; }
.stars-20:after { width: 20%; }
.stars-30:after { width: 30%; }
.stars-40:after { width: 40%; }
.stars-50:after { width: 50%; }
.stars-60:after { width: 60%; }
.stars-70:after { width: 70%; }
.stars-80:after { width: 80%; }
.stars-90:after { width: 90%; }
.stars-100:after { width: 100; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Generated: <div id="fixture"></div>

Die größten Nachteile dieser Lösung sind:

  1. Sie benötigen die Sterne im Element, um die korrekte Breite zu erzeugen.
  2. Es gibt kein semantisches Markup, z. Sie möchten die Bewertung als Text innerhalb des Elements bevorzugen.
  3. Es erlaubt nur so viele Noten, wie Sie Klassen haben (weil wir nicht verwenden können, um ein genaues width für ein Pseudoelement festzulegen).

Um dies zu beheben, kann die Lösung oben leicht angepasst werden. Die :before- und :after-Bits müssen zu tatsächlichen Elementen im DOM werden (daher benötigen wir dazu JS).

Letzteres bleibt dem Leser als Übung überlassen.

25
Jeroen

Versuchen Sie diese Jquery-Funktion

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">

<span class="stars" data-rating="4" data-num-stars="5" ></span>

<script>
    $.fn.stars = function() {
        return $(this).each(function() {

            var rating = $(this).data("rating");

            var numStars = $(this).data("numStars");

            var fullStar = new Array(Math.floor(rating + 1)).join('<i class="fa fa-star"></i>');

            var halfStar = ((rating%1) !== 0) ? '<i class="fa fa-star-half-empty"></i>': '';

            var noStar = new Array(Math.floor(numStars + 1 - rating)).join('<i class="fa fa-star-o"></i>');

            $(this).html(fullStar + halfStar + noStar);

        });
    }

    $('.stars').stars();

 Screenshot

FontAwesome CSS

Sie können FontAwesome unter http://fontawesome.io/ herunterladen.

18
Rajasekar D

Warum nicht einfach fünf separate Bilder eines Sterns (leer, viertel voll, halb voll, dreiviertel voll und voll) haben, dann die Bilder einfach in Ihr DOM einfügen, abhängig von dem mit 4 multiplizierten abgeschnittenen oder geruderten Wert der Bewertung ( um eine ganze Zahl für die Quartale zu bekommen)?

Beispielsweise ist 4.8618164, multipliziert mit 4 und gerundet, 19, was 4 und 3 Viertelsterne sein würde.

Alternativ (wenn Sie faul sind wie ich), lassen Sie einfach ein Bild aus 21 (0 Sterne durch 5 Sterne in Schritten von einem Viertel) auswählen und wählen Sie das einzelne Bild basierend auf dem oben genannten Wert aus. Dann ist es nur eine Berechnung, gefolgt von einer Bildänderung im DOM (anstatt zu versuchen, fünf verschiedene Bilder zu ändern).

7
paxdiablo

Am Ende war ich völlig JS-frei, um clientseitige Renderverzögerungen zu vermeiden. Um dies zu erreichen, generiere ich HTML folgendermaßen:

<span class="stars" title="{value as decimal}">
    <span style="width={value/5*100}%;"/>
</span>

Um die Zugänglichkeit zu verbessern, füge ich sogar den Wert für die reine Bewertung im Titelattribut hinzu.

5
Tim Schmidt

wenn Sie jquery ohne Prototyp verwenden, aktualisieren Sie den js-Code auf 

$( ".stars" ).each(function() { 
    // Get the value
    var val = $(this).data("rating");
    // 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);
});

Ich habe auch ein Datenattribut mit dem Namen der Datenbewertung in der Spanne hinzugefügt.

<span class="stars" data-rating="4" ></span>
4
Galuga

DEMO

Sie können dies nur mit 2 Bildern machen. 1 leere Sterne, 1 gefüllte Sterne.

Überlagern Sie das gefüllte Bild auf dem anderen. und konvertieren Sie die Bewertungszahl in Prozent und verwenden Sie sie als Breite des Füllbildes.

 enter image description here

.containerdiv {
  border: 0;
  float: left;
  position: relative;
  width: 300px;
} 
.cornerimage {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
 } 
 img{
   max-width: 300px;
 }
1
Elyor

Hier ist mein Take mit JSX und Font awesome, allerdings nur auf eine Genauigkeit von 0,5 begrenzt:

       <span>
          {Array(Math.floor(rating)).fill(<i className="fa fa-star"></i>)}
          {(rating) - Math.floor(rating)==0 ? ('') : (<i className="fa fa-star-half"></i>)}
       </span>

Erste Reihe steht für ganzen Stern und zweite Reihe für halben Stern (falls vorhanden)

0
Ardhi