Widget valutazione stelle per interfaccia utente jQuery

Question

Mi è stato presentato il Star Rating widget per l'interfaccia utente jQuery. Inizialmente utilizzavo this one.

C'è qualche differenza tra l'utilizzo dei due?

Beh, provando a utilizzare l'interfaccia utente jquery, non riesco a visualizzare i pulsanti di input come stelle. Ho questi js e file CSS incluso:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> 
<script src="ui.stars.js" type="text/javascript"></script> 
<link href="ui.stars.css" type="text/css" rel="stylesheet" /> 

E per il mio codice, semplicemente:

<form> 
    Rating: <span id="stars-cap"></span> 
    <div id="stars-wrapper1"> 
     <input type="radio" name="newrate" value="1" title="Very poor" /> 
     <input type="radio" name="newrate" value="2" title="Poor" /> 
     <input type="radio" name="newrate" value="3" title="Not that bad" /> 
     <input type="radio" name="newrate" value="4" title="Fair" /> 
     <input type="radio" name="newrate" value="5" title="Average" checked="checked" /> 
     <input type="radio" name="newrate" value="6" title="Almost good" /> 
     <input type="radio" name="newrate" value="7" title="Good" /> 
     <input type="radio" name="newrate" value="8" title="Very good" /> 
     <input type="radio" name="newrate" value="9" title="Excellent" /> 
     <input type="radio" name="newrate" value="10" title="Perfect" /> 
    </div> 
</form> 

Tutti i file e le immagini sono nella stessa cartella. Non ho mai usato l'interfaccia utente di jquery prima, quindi non sono sicuro se tutto quello di cui ho bisogno è quel file. Non sono sicuro che sia necessario, l'altro plug-in di stelle che stavo usando non lo richiedeva. Qualcuno sa cosa mi manca qualcosa?

Answer 1

di solito jquery ui css file rimandano le immagini dalla cartella denominata images put è la stessa directory del file css. Quindi è necessario cambiare il percorso delle immagini di riferimento in ui.stars.js.

| 
    --images 
    | 
    ---image files are here 
    | 
    --ui.stars.css 

Answer 2

Quando si utilizza orkans' star_rating è necessario indicare per convertire radiobuttons a stelle in modo esplicito, come questo (io uso la modalità jQuery.noConflict):

jQuery(document).ready(function($){ 
    $("#stars-wrapper1").stars(); 
} 

Answer 3

ho scoperto, che problema con il verso verso il quale ho scaricato è, quell'oggetto o non è inizializzato ok nella funzione _init (i valori di default dalla fine di ui.star.js non sono caricati). Questo oggetto imposta anche i valori CSS (classi). Non ho ancora trovato la soluzione, ma una soluzione semplice sarebbe, per riempire quei valori in fase di inizializzazione di stelle sulla tua pagina:

<script type="text/javascript"> 
    $("#stars-wrapper1").stars({ 
    cancelClass: "ui-stars-cancel", 
    starClass: "ui-stars-star", 
    starOnClass: "ui-stars-star-on", 
    starHoverClass: "ui-stars-star-hover", 
    starDisabledClass: "ui-stars-star-disabled", 
    cancelHoverClass: "ui-stars-cancel-hover", 
    cancelDisabledClass: "ui-stars-cancel-disabled" 
    }); 
    </script>