Cómo hacer una calificación de estrellas increíble

Question

¿Existe una manera simple de generar un elemento de calificación de 5 estrellas en Jquery-mobile? Similar a http://orkans-tmp.22web.net/star_rating/.

Answer 1

Se puede utilizar cualquier plugin de jQuery que cumple con esta tarea. En el pasado, he utilizado el plugin jQuery Clasificación de estrellas en

http://www.fyneworks.com/jquery/star-rating/

La única cosa que hay que pensar es dejar de jQuery Mobile de representar los botones de radio con su propio estilo. Esto se puede conseguir mediante la adición de data-role="none" a la etiqueta de entrada, consulte

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/forms-all-native.html

Answer 2

encuentro la jQuery Raty plugin mucho más fácil de usar!

Nunca pude obtener la clase = "estrella" para trabajar con fyneworks.

Answer 3

Si lo que buscas es un componente calificación móvil, echar un vistazo a la EDITAR http://demo.mobiscroll.com/rating

: Y el desplazador se integra con temas de jQuery Mobile. Tutorial para crear un sistema de clasificación con jQM + Rating & Scroller de graduación here.

Answer 4

he conseguido utilizar http://www.fyneworks.com/jquery/star-rating/ junto con jquery-Mobile (versión 1.4.5)

el truco mencionado anteriormente con data-role = "none" en el campo de entrada no funciona. necesita representar una etiqueta propia. He utilizado el ejemplo más sencillo en la página http://www.fyneworks.com/jquery/star-rating/#tab-Testing

<div data-role="none"> 
    <input name="star1" type="radio" class="star" value="1"/> 
    <input name="star1" type="radio" class="star" value="2"/> 
    <input name="star1" type="radio" class="star" value="3"/> 
    <input name="star1" type="radio" class="star" value="4"/> 
    <input name="star1" type="radio" class="star" value="5"/> 
</div> 

ajustes en el color y el tamaño es bastante difícil y necesita cambios en el archivo .css y star.gif

Answer 5

aquí está mi solución con jQuery Mobile. espero que les guste:

<style> 
    .rated { background-color: yellow !important; } 
    .rating a { border: 0px !important; } 
</style> 

<div class="rating" id="first"> 
    <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="1" data-iconpos="notext"></a> 
    <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="2" data-iconpos="notext"></a> 
    <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="3" data-iconpos="notext"></a> 
    <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="4" data-iconpos="notext"></a> 
    <a href="#" data-role="button" data-inline="true" data-icon="star" data-vote="5" data-iconpos="notext"></a> 
</div> 

$(".rating a").on("vmouseover", function() { 

    var id = $(this).parent().attr("id"); 
    $("#" + id + ".rating a").each(function (i, v) { 
    $(v).removeClass("rated"); 
    }); 

    $(this).prevAll().each(function (i, v) { 
    $(v).addClass("rated"); 
    }); 
    $(this).addClass("rated"); 

    $("#" + id).data("vote", $(this).data("vote")); 
}); 

https://jsfiddle.net/lgrillo/cz7z479j/