usuario - quitar el javascript que bloquea la visualización de contenido: jquery
Convierta un número en la visualización de clasificación de estrellas usando jQuery y CSS (7)
¿Por qué no tener cinco imágenes separadas de una estrella (vacía, cuarto llena, medio llena, tres cuartas partes llena y llena) y luego solo inyectar las imágenes en su DOM dependiendo del valor truncado o enrutado de la calificación multiplicada por 4 ( para obtener un número entero para los cuartos)?
Por ejemplo, 4.8618164 multiplicado por 4 y redondeado es 19, que serían cuatro y tres estrellas cuartas.
Alternativamente (si eres perezoso como yo), solo tienes una imagen seleccionada de 21 (0 estrellas a 5 estrellas en incrementos de un cuarto) y selecciona la imagen individual basada en el valor antes mencionado. Entonces es solo un cálculo seguido de un cambio de imagen en el DOM (en lugar de tratar de cambiar cinco imágenes diferentes).
He estado buscando el plugin jquery y me preguntaba cómo adaptar ese complemento para convertir un número (como 4.8618164) en 4.8618164 estrellas llenas de 5. Interpretar básicamente un número <5 en estrellas con un sistema de calificación de 5 estrellas usando jQuery / JS / CSS.
Tenga en cuenta que esto solo mostrará / mostrará la calificación de estrellas de un número ya disponible y no aceptará nuevos envíos de calificaciones.
Aquí hay una solución para ti, usando solo una imagen muy pequeña y simple y un elemento span generado automáticamente:
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;
}
Imagen
Nota: ¡ NO enlace a la imagen de arriba! Copie el archivo en su propio servidor y utilícelo desde allí.
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);
});
}
Si desea restringir las estrellas a solo la mitad o el cuarto de estrellas, agregue una de estas filas antes de la fila de var size :
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>
Uso
$(function() {
$(''span.stars'').stars();
});
Salida
Imagen del conjunto de iconos de fuga (www.pinvoke.com) http://www.ulmanen.fi/stuff/stars_output.png
Manifestación
Esto probablemente se adapte a tus necesidades. Con este método no tienes que calcular ningún ancho de tres cuartos o de otro tipo, simplemente dale un flotador y te dará tus estrellas.
Una pequeña explicación sobre cómo se presentan las estrellas podría estar en orden.
La secuencia de comandos crea dos elementos de tramo de nivel de bloque. Ambos tramos obtienen inicialmente un tamaño de 80 px * 16 px y una imagen de fondo stars.png. Los tramos están anidados, por lo que la estructura de los tramos se ve así:
<span class="stars">
<span></span>
</span>
El tramo exterior obtiene una background-position de background-position de 0 -16px . Eso hace que las estrellas grises en el tramo exterior sean visibles. Como el tramo exterior tiene una altura de 16px y repeat-x , solo mostrará 5 estrellas grises.
El tramo interior, por otro lado, tiene una background-position de background-position de 0 0 que hace visibles solo las estrellas amarillas.
Por supuesto, esto funcionaría con dos archivos de imagen separados, star_yellow.png y star_gray.png. Pero como las estrellas tienen una altura fija, podemos combinarlas fácilmente en una sola imagen. Esto utiliza la técnica de sprite de CSS .
Ahora, como los tramos están anidados, se superponen automáticamente uno sobre el otro. En el caso predeterminado, cuando el ancho de ambos tramos es 80px, las estrellas amarillas oscurecen por completo las estrellas grises.
Pero cuando ajustamos el ancho del espacio interior, el ancho de las estrellas amarillas disminuye, revelando las estrellas grises.
En cuanto a la accesibilidad, hubiera sido más sensato dejar el número flotante dentro del tramo interior y ocultarlo con text-indent: -9999px , para que las personas con CSS apagadas verían al menos el número de punto flotante en lugar de las estrellas.
Espero que tenga algo de sentido.
Actualizado 2010/10/22
¡Ahora aún más compacto y más difícil de entender! También se puede exprimir a un trazador de líneas:
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($(''<span />'').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
Si solo tiene que admitir navegadores modernos, puede salirse con la suya:
- Sin imágenes;
- Mayormente estático css;
- Casi no jQuery o Javascript;
Solo necesita convertir el número a una class , por ejemplo, class=''stars-score-50'' .
Primero una demostración de marcado "prestado":
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>
Luego, una demostración que usa un poquito de código:
$(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>
Los mayores inconvenientes de esta solución son:
- Necesitas las estrellas dentro del elemento para generar el ancho correcto;
- No hay marcas semánticas, por ejemplo, prefieres el puntaje como texto dentro del elemento;
- Solo permite tantos puntajes como clases (porque no podemos usar Javascript para establecer un
widthpreciso en un pseudo-elemento).
Para solucionar esto, la solución anterior se puede ajustar fácilmente. Los bits :before y :after deben convertirse en elementos reales del DOM (por lo que necesitamos algunos JS para eso).
El último se deja como un ejercicio para el lector.
Terminé yendo totalmente libre de JS para evitar el retraso del renderizado del lado del cliente. Para lograr eso, genero HTML de esta manera:
<span class="stars" title="{value as decimal}">
<span style="width={value/5*100}%;"/>
</span>
Para ayudar con la accesibilidad, incluso agrego el valor nominal bruto en el atributo de título.
usando jquery sin prototipo, actualice el código js a
$( ".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);
});
También agregué un atributo de datos con el nombre de clasificación de datos en el lapso.
<span class="stars" data-rating="4" ></span>
Puedes hacerlo solo con 2 imágenes. 1 estrellas en blanco, 1 estrellas llenas.
Imagen superpuesta llena en la parte superior de la otra. y convierta el número de calificación en porcentaje y úselo como ancho de la imagen de relleno.
.containerdiv {
border: 0;
float: left;
position: relative;
width: 300px;
}
.cornerimage {
border: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
img{
max-width: 300px;
}
Prueba esta función jquery
<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();
FontAwesome CSS
Puede descargar FontAwesome en http://fontawesome.io/