fonticons - ¿Cómo usar la calificación de estrellas de Font-awesome con Django?
fontawesome io 3.2 1 icons (11)
Fontawesome tiene una gran extensión css de clasificación de estrellas, que se ve realmente increíble.
Sin embargo, hacer clic en cualquiera de los elementos del tramo realmente no haría nada. No sé cómo conectar esto con mi modelo de base de datos. Digamos que tengo un campo entero de 0-5 en Django. ¿Cómo podría establecer el valor de acuerdo con la selección del usuario dentro de la plantilla?
<span class="rating">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</span>
Aquí hay una mejor solución. Las estrellas se basan solo en los números, por lo que el motor de búsqueda y el navegador solo leen 4.5 de 5 y eso es todo. Utiliza mi propia fuente personalizada ; sin JS, sin SVG, sin Flash, sin Canvas. También está disponible como una barra de progreso .
Aquí el código, sin las etiquetas de microformato para hacerlo más simple:
Rating: <span class="star-rating-icons">
<strong>3.5</strong> out of <i>5</i>
</span>
Y aquí está el CSS que incluye la fuente y el estilo relevante:
.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;
}
Básicamente, la primera letra de la calificación está formateada con un carácter con esa cantidad de estrellas completas y el decimal con las estrellas parciales. El contorno de las estrellas está hecho fuera del período, aunque podría aplicarse a cualquier otro personaje presente. (Al editar la fuente o simplemente con un pseudo elemento)
Considere la calificación de estrellas con muy poco CSS de CssTricks. No usa imágenes, ni Bootstrap, ni Javascript. CSS puro y estrellas Unicode, mira this . Compatible con todos los navegadores excepto IE <= 6.
Nota: Javascript no es necesario para la interfaz de usuario, pero es necesario para enviar datos al servidor y conservar la selección de clasificación después de que el elemento pierda el foco.
También eche un vistazo al widget de clasificación de estrellas Accesible con CSS puro . Es un CSS puro también. Utiliza una técnica que se analiza aquí: entradas de radio y casillas de verificación personalizadas mediante CSS . Es diferente del primero en que la calificación permanece seleccionada después de que el elemento pierde el enfoque. Desafortunadamente, es soportado por menos navegadores.
Una nota rápida sobre los selectores de CSS puede ser útil al leer eso.
ACTUALIZAR:
Acabo de volver a leer la publicación y hacer clic en el enlace. El primer enlace en mi respuesta es el mismo que el tema de inicio. Disculpas
De todos modos, elegí no eliminar la respuesta, ya que contiene algunos enlaces que me complació mucho encontrar y que podrían ser útiles para otros.
Echa un vistazo a django-ratings , eso es lo que estás buscando.
Este es el mejor complemento para la calificación de estrellas si está utilizando bootstrap:
- 2Kb minificado
- Utilice Glyphicons Bootstrap
- Sin CSS extra
- Solo tienes que agregar
class="rating"a la entrada
He visto esta publicación, pero no quería usar un complemento con más de lo que necesitaba. Entonces, junté esto para un pequeño proyecto en el que estoy trabajando. No necesitas bootstrap para usar esto.
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();
No vi una respuesta simple utilizando solo glifos de arranque y jQuery. Estoy seguro de que otras personas han venido aquí en busca de una copia rápida y pegar, así que acabo de escribir una.
$(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>
Para establecer el valor predeterminado de la base de datos utilizando la plantilla django, para cada estrella haga:
<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>
Puede consultar el complemento de calificación de Bootstrap JQuery Star que creé con varias opciones configurables (las demos para los escenarios están incluidas). Utiliza CSS3 tanto como sea posible, pero también usa JQuery (si estás de acuerdo con eso). Puede obtener los números de estrellas o establecerlos fácilmente a través de los métodos del complemento.
Usa glifos de Bootstrap 3.x, incluye soporte RTL, admite métodos y eventos de complementos. El plugin también soporta cualquier estrella fraccionada. Puede consultar la fuente aquí .
Si está interesado en usar Font-Awesome, puede anular el complemento CSS para usar Font-Awesome en lugar de Bootstrap Glyphicons en su proyecto.
Terminé usando Raty . Si está buscando una solución simple y limpia, encontré que esto es lo más fácil.
$(''#star'').raty(''score''); // Get the current score.
Un método más interesante. Pure CSS, mantiene el valor seleccionado, usa botones de radio (¡genial!) Y fuentes FA
Tomado de este 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";
}
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"> de <b>10</b> estrellas </span>
</div>
JavaScript
$(''#rating_1'').RatingStar(
{callback:function(val){$(''#result_1'').html(" "+val+" estrella(s).")}}
);
$(''#rating_2'').RatingStar();
$(''#rating_3'').RatingStar();
$(''#rating_4'').RatingStar({
val:4.95,
stars:10,
input:''#rating_val'',
change:true
});
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>