Maison > interface Web > tutoriel CSS > Comment puis-je générer dynamiquement des notes par étoiles à partir d'une saisie numérique à l'aide de jQuery et CSS ?

Comment puis-je générer dynamiquement des notes par étoiles à partir d'une saisie numérique à l'aide de jQuery et CSS ?

Susan Sarandon
Libérer: 2024-12-14 15:39:21
original
805 Les gens l'ont consulté

How Can I Dynamically Generate Star Ratings from Numerical Input Using jQuery and CSS?

Transformer des nombres en affichages de notes par étoiles à l'aide de jQuery et CSS

Dans le domaine de l'affichage des notes, transformer des valeurs numériques en notes par étoiles est un défi commun. Comment pouvons-nous générer dynamiquement des notes par étoiles basées sur une saisie numérique à l'aide de jQuery et CSS ?

Solution :

Voici une solution innovante qui exploite une seule image et CSS :

CSS


<br>span.stars, span.stars span {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
Copier après la connexion

}

span.stars span {

background-position: 0 0;
Copier après la connexion

}

Image :


Une seule image (stars.png) avec des étoiles jaunes en haut et des étoiles grises en haut en bas.

jQuery:


<br>$.fn.stars = function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return $(this).each(function() {
    var val = parseFloat($(this).html());
    var size = Math.max(0, (Math.min(5, val))) * 16;
    var $span = $('<span />').width(size);
    $(this).html($span);
});
Copier après la connexion

}

HTML :


<br><span> <envergure class="étoiles">2.6545344</span><br><span><span class="stars">8</span><br>

Utilisation :


<br>$(fonction () {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$('span.stars').stars();
Copier après la connexion

});

Sortie :


Cette solution utilise des sprites CSS pour combiner les deux jaunes et des étoiles grises en une seule image, nous permettant de contrôler la largeur des étoiles jaunes pour représenter l'image souhaitée.

Avantages :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Article précédent:Comment puis-je créer des listes multi-colonnes avec CSS ? Article suivant:Comment puis-je définir la hauteur d'un élément à 100 % moins une valeur de pixel fixe ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal