web-dev-qa-db-fra.com

Comment utiliser le classement par étoiles de Font-awesome avec Django?

Fontawesome a une grande extension CSS de classement par étoiles, qui a l'air vraiment génial. 

Cependant, cliquer sur l'un des éléments de la travée ne ferait rien. Je ne sais pas comment mettre cela en relation avec mon modèle de base de données. Disons que j'ai un champ entier de 0 à 5 dans Django. Comment définir la valeur en fonction de la sélection de l'utilisateur dans le modèle?

enter image description here

<span class="rating">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</span>
djangotwitter-bootstrapfont-awesome
24
Houman

J'ai fini par utiliser Raty . Si vous cherchez une solution simple et propre, je l’ai trouvée la plus simple.

$('#star').raty('score');                   // Get the current score.
19
Houman

J'ai vu ce post, mais je ne voulais pas utiliser un plugin avec plus que ce dont j'avais besoin. Alors, j’ai mis cela ensemble pour un petit projet sur lequel je travaille. Vous n'avez pas besoin de bootstrap pour l'utiliser.

HTML

<div class="star-rating"> 
  <span class="fa fa-star-o" data-rating="1"></span>
  <span class="fa fa-star-o" data-rating="2"></span>
  <span class="fa fa-star-o" data-rating="3"></span>
  <span class="fa fa-star-o" data-rating="4"></span>
  <span class="fa fa-star-o" data-rating="5"></span>
  <input type="hidden" name="whatever" class="rating-value" value="3">
</div>

CSS

.star-rating {
  line-height:32px;
  font-size:1.25em;
  cursor: pointer;
}

CoffeeScript

$star_rating = $('.star-rating .fa')

SetRatingStar = ->
  $star_rating.each ->
    if parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))
      $(this).removeClass('fa-star-o').addClass('fa-star')
    else
      $(this).removeClass('fa-star').addClass('fa-star-o')

$star_rating.on 'click', ->
    $star_rating.siblings('input.rating-value').val $(this).data('rating')
    SetRatingStar()

SetRatingStar()

Javascript:

var $star_rating = $('.star-rating .fa');

var SetRatingStar = function() {
  return $star_rating.each(function() {
    if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
      return $(this).removeClass('fa-star-o').addClass('fa-star');
    } else {
      return $(this).removeClass('fa-star').addClass('fa-star-o');
    }
  });
};

$star_rating.on('click', function() {
  $star_rating.siblings('input.rating-value').val($(this).data('rating'));
  return SetRatingStar();
});

SetRatingStar();
16
TylerJPresley

Ceci est le meilleur plugin pour le classement par étoiles si vous utilisez bootstrap:

  • 2 Ko minifiés
  • Utiliser des glyphiques bootstrap
  • Pas de CSS supplémentaire
  • Il suffit d'ajouter class="rating" à l'entrée

Projet Github

12
Tom Sarduy

Je n'ai pas vu de réponse simple utilisant uniquement des glyphicons bootstrap et jquery. Je suis sûr que d'autres personnes sont venues ici pour chercher un copier-coller rapide, alors je viens d'en écrire un. 

$(function(){
    $('.rating-select .btn').on('mouseover', function(){
        $(this).removeClass('btn-default').addClass('btn-warning');
        $(this).prevAll().removeClass('btn-default').addClass('btn-warning');
        $(this).nextAll().removeClass('btn-warning').addClass('btn-default');
    });

    $('.rating-select').on('mouseleave', function(){
        active = $(this).parent().find('.selected');
        if(active.length) {
            active.removeClass('btn-default').addClass('btn-warning');
            active.prevAll().removeClass('btn-default').addClass('btn-warning');
            active.nextAll().removeClass('btn-warning').addClass('btn-default');
        } else {
            $(this).find('.btn').removeClass('btn-warning').addClass('btn-default');
        }
    });

    $('.rating-select .btn').click(function(){
        if($(this).hasClass('selected')) {
            $('.rating-select .selected').removeClass('selected');
        } else {
            $('.rating-select .selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating-select">
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
    <div class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
</div>

Pour définir la valeur par défaut de la base de données utilisant le modèle Django, procédez comme suit pour chaque étoile:

<div class="btn btn-{% if rate.value > 0 %}warning{% else %}default{% endif %}{% if rate.value == 1 %} selected{% endif %} btn-sm"><span class="glyphicon glyphicon-star-empty"></span></div>
8
dotcomly

Une méthode plus intéressante. CSS pur, conserve la valeur sélectionnée, utilise des boutons radio (cool!) Et des polices FA

Voir la démo

Tiré de ce post

HTML

<div class="star-rating">
  <div class="star-rating__wrap">
    <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
    <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1">
    <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
  </div>
</div>

CSS

.star-rating{
    font-size: 0;
}
.star-rating__wrap{
    display: inline-block;
    font-size: 1rem;
}
.star-rating__wrap:after{
    content: "";
    display: table;
    clear: both;
}
.star-rating__ico{
    float: right;
    padding-left: 2px;
    cursor: pointer;
    color: #FFB300;
}
.star-rating__ico:last-child{
    padding-left: 0;
}
.star-rating__input{
    display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before
{
    content: "\f005";
}
7
ymakux

Vous pouvez vérifier mon Bootstrap JQuery Star rating plugin j’ai créé avec diverses options configurables (des démonstrations de scénarios sont incluses dans). Il utilise CSS3 autant que possible, mais aussi JQuery (si vous êtes d'accord avec ça). Vous pouvez obtenir les numéros d’étoiles OR le régler facilement à l’aide des méthodes du plug-in.

Utilise les glyphiques Bootstrap 3.x, inclut le support RTL, prend en charge les événements et les méthodes du plugin. Le plugin prend également en charge toutes les étoiles partiellement remplies. Vous pouvez consulter la source ici .

Si vous souhaitez utiliser Font-Awesome, vous pouvez remplacer le CSS du plug-in par Font-Awesome au lieu de Bootstrap Glyphicons dans votre projet.

6
Kartik V

Font Awesome et JQuery DEMO

HTML

<div>Rating Star - Function CallBack onChange</div>
<div class="well well-sm">
    <span id="rating_1" class="rating" ></span>
    <span id="result_1"></span> 
</div>
<div>Rating Star - No Editable</div>
<div class="well well-sm">
    <span id="rating_2" class="rating" data-val="2.49" data-stars='6' data-change="false"></span>
    <span>Calificaste con <b>2.49</b> de <b>6</b> Estrellas</span> 
</div>
<div>Rating Star - Tamaño - Data Html options -- Hidden input</div>
<div class="well well-sm">
   <span id="rating_3" class="rating" data-val="2.49" data-stars='10' data-input=".rating-value" data-change="true" style="font-size:35px;" >
        <input type="hidden" name="whatever3" class="rating-value" size="5"  />
   </span>
</div>
<div>Rating Star - javascript Options - input text</div>
<div class="well well-sm">
   <span id="rating_4" class="rating">
       <input type="text" name="whatever4" id="rating_val" size="1" readOnly="readOnly" />    
   </span>
    <span id="result_4"> &nbsp;&nbsp;de <b>10</b> estrellas </span> 
</div>

JavaScript

 $('#rating_1').RatingStar(
   {callback:function(val){$('#result_1').html(" &nbsp;"+val+" estrella(s).")}}
 );

 $('#rating_2').RatingStar();

 $('#rating_3').RatingStar();

 $('#rating_4').RatingStar({
     val:4.95,
     stars:10,
     input:'#rating_val',
     change:true
 });
2
EpNiebla
var $star_rating = $('.rating .star');

var SetRatingStar = function() {
  return $star_rating.each(function() {


var puan = document.formname.whatever.value;



    if ( parseInt($(this).data('rating')) <= puan) {
      return $(this).removeClass('star').addClass('star filled');
    } else {
      return $(this).removeClass('star filled').addClass('star');
    }
  });
};

$star_rating.on('click', function() { 

  document.formname.whatever.value=$(this).data('rating');

  return SetRatingStar();
});



.rating{unicode-bidi:bidi-override;direction:rtl;font-size:10px;}
.rating span.star{font-family:FontAwesome;font-weight:normal;font-style:normal;display:inline-block}
.rating span.star:hover{cursor:pointer}
.rating span.star:before{content:"\f006";padding-right:5px;color:#999}
.rating span.star:hover:before,.rating span.star:hover~span.star:before{content:"\f005";color:#e3cf7a}
.rating span.star.filled {}
.rating span.star.filled:before{content:"\f005";color:#e3cf7a; }



<span class="rating" style="font-size:20px;">
<span class="star" data-rating="5"></span><span class="star" data-rating="4"></span><span class="star" data-rating="3"></span><span class="star" data-rating="2"></span><span class="star" data-rating="1"></span></span>
1
alpc

Voici une meilleure solution. Les étoiles n'étant basées que sur les chiffres, le moteur de recherche et le navigateur ne lisent que 4,5 sur 5 et c'est tout. Il utilise ma propre police personnalisée ; pas de JS, pas de SVG, pas de Flash, pas de toile. C'est aussi disponible sous forme de barre de progression .

DEMO/CODE

Voici le code, sans les balises microformat pour le rendre plus simple:

Rating: <span class="star-rating-icons">
<strong>3.5</strong> out of <i>5</i>
</span>

Et voici le CSS qui comprend la police et le style correspondant:

.star-rating-icons {
    font-family: seostars;
  font-size: 1.2em;
    line-height: .6em;
    position: relative;
    width: 5em;
    text-indent: -5000px;
    display: inline-block;
    font-style: normal;
}
.star-rating-icons strong {
    font-weight: normal;
    display: block;
    position: absolute;
    left: 0px;
    color: #FC0;
    font-family: seostars;
    text-indent: 0;
}
.star-rating-icons strong:first-letter {
    font-weight: bold;
    position: absolute;
    left: 0px;
    font-style: normal;
}
.star-rating-icons i {
    color: #666;
    position: absolute;
    text-indent: 0;
    color: #666;
    left: 0;
}

Fondamentalement, la première lettre de la note est formatée avec un caractère avec cette quantité d'étoiles entières et la décimale avec les étoiles partielles. Le contour des étoiles est fait à partir de la période, bien qu'il puisse être appliqué à tout autre personnage présent. (En modifiant la police ou simplement avec un pseudo élément)

0
sergio

Considérez Classement par étoiles avec très peu de CSS de CssTricks. Il n'utilise pas d'images, pas de Bootstrap, pas de Javascript. Étoiles Pure CSS et Unicode, voir this . Pris en charge par tous les navigateurs sauf IE <= 6. 

Remarque: Javascript n'est pas requis pour l'interface utilisateur, mais pour l'envoi de données au serveur et la préservation de la sélection de classement après la perte de focus de l'élément.

Jetez également un coup d'œil à Widget de classement par étoiles accessible avec du CSS pur . C'est aussi un pur CSS. Utilise une technique décrite ici - Entrées radio et case à cocher personnalisées utilisant CSS . C'est différent du premier en ce sens que la note reste sélectionnée après que l'élément ait perdu le focus. Malheureusement, il est supporté par moins de navigateurs.

Une petite note sur CSS Selectors pourrait être utile lors de la lecture de cela.

METTRE À JOUR:

Je viens de relire le message et de cliquer sur le lien. Le premier lien de ma réponse est identique à celui du sujet. Excuses.

Quoi qu’il en soit, j’ai choisi de ne pas supprimer la réponse car elle contient quelques liens que j’ai été très heureux de trouver et qui pourraient être utiles à d’autres.

0
Sergey Markelov

Regardez Django-ratings - c'est ce que vous recherchez.

0
Thomas Schwärzl