Forum : Système de notation jquery

Bonjour,
heu bah là...:s sans plus de précisions , code etc.. c'est pas évident de t'aider

Auteur

Merci votre réponse, voici mon code :

le code css et jquery :

<style type="text/css">
ul.notes-echelle {
    margin:0;
    padding:0;
    font:.75em/1.2 Arial, Helvetica, sans-serif;
}
ul.notes-echelle li {
    float:left;
    margin:0;
    padding:0;
    list-style:none;
    min-width:20px;
    min-height:20px;
}
/* Correctif IE6 sur min-width & min-height */
* html ul.notes-echelle.js li {
    width:20px;
    height:20px;
}
ul.notes-echelle li label {
    display:block;
    text-align:center;
    line-height:20px;
    background:url(<?php echo $this->webroot;?>img/images/etoiles.gif) center top no-repeat;
    cursor:pointer;
}
ul.notes-echelle li.note-off label {
    background-position:center -60px;
}
ul.notes-echelle.js input {
    position:absolute;
    left:-999%;
}
// On simule un survol souris des boutons cochés par défaut
$("ul.notes-echelle input:checked").parent("li").trigger("mouseover");
// On simule un click souris des boutons cochés
$("ul.notes-echelle input:checked").trigger("click");
</style>
</head>
<body>
<script>
// Lorsque le DOM est chargé on applique le Javascript
$(function() {
    // On ajoute la classe "js" à la liste pour mettre en place par la suite du code CSS uniquement dans le cas où le Javascript est activé
    $("ul.notes-echelle").addClass("js");
    // On passe chaque note à l'état grisé par défaut
    $("ul.notes-echelle li").addClass("note-off");
    // Au survol de chaque note à la souris
    $("ul.notes-echelle li").mouseover(function() {
        // On passe les notes supérieures à l'état inactif (par défaut)
        $(this).nextAll("li").addClass("note-off");
        // On passe les notes inférieures à l'état actif
        $(this).prevAll("li").removeClass("note-off");
        // On passe la note survolée à l'état actif (par défaut)
        $(this).removeClass("note-off");
    });
    // Lorsque l'on sort du sytème de notation à la souris
    $("ul.notes-echelle").mouseout(function() {
        // On passe toutes les notes à l'état inactif
        $(this).children("li").addClass("note-off");
        // On simule (trigger) un mouseover sur la note cochée s'il y a lieu
        $(this).find("li input:checked").parent("li").trigger("mouseover");
    });
});
</script>

et le code php, j'utilise le framework cakephp :

voici la partie ou j'affiche plusieurs avis

<?php $j = 1; ?>
<?php foreach($avis as $avi) {?>
<div>
<ul class="notes-echelle" id="<?php echo $j; ?>">
<?php for($i = 1; $i < 6; $i++){ ?>
<?php if($i == $avi'Note']'note'])
{?>
<li>
<label for="note0<?php echo $j.$i; ?>"> </label>
<input type="radio" name="data[Note][note]" id="note0<?php echo $j.$i; ?>" value="<?php echo $i; ?>" checked />
</li>
<?php }
else{
?>
<li>
<label for="note0<?php echo $j.$i; ?>"> </label>
<input type="radio" name="data[Note][note]" id="note0<?php echo $j.$i; ?>" value="<?php echo $i; ?>"/>
</li>
<?php } ?>
<?php } ?>
<?php $j++; ?>
</ul>
</div>
<?php } ?>
et voici la partie ou j'ajoute une note :

<ul class="notes-echelle">
<li>
<label for="note01" title="Horrible"> </label>
<input type="radio" name="data[Note][note]" id="note01" value="1" />
</li>
<li>
<label for="note02" title="Médiocre"> </label>
<input type="radio" name="data[Note][note]" id="note02" value="2" />
</li>
<li>
<label for="note03" title="Bien"> </label>
<input type="radio" name="data[Note][note]" id="note03" value="3"/>
</li>
<li>
<label for="note04" title="Très bien"> </label>
<input type="radio" name="data[Note][note]" id="note04" value="4" />
</li>
<li>
<label for="note05" title="Excellent"> </label>
<input type="radio" name="data[Note][note]" id="note05" value="5" />
</li>
</ul>

Merci

antho07

Bonjour,
désolé un peu très occupé en ce moment:s

Pourquoi cette partie du code est dans la balise style??:

// On simule un survol souris des boutons cochés par défaut
$("ul.notes-echelle input:checked").parent("li").trigger("mouseover");
// On simule un click souris des boutons cochés
$("ul.notes-echelle input:checked").trigger("click");
</style>

tina

Auteur

c'est juste une erreur de copier coller, normalement c'est dans la balise script,

antho07

Bonsoir, plusieurs pistes possibilités etc... mais dans un premier temps , est ce que le coude source est correct?
Est ce bien celui attendu par ton système js ?

tina

Auteur

Oui mon code source est correct, est ce que je dois par exemple créer une classe css et l'utiliser dans les ul que je veux afficher?

et merci encore une fois

antho07

Faudra que j'étudie plus en détail la question .. ya pas de messages privés , faut qu'on capite un soir en meme temps sur le forum, à un message tous les 3 jours, ça va pas être pratique pour le dialogue:s

Système de notation jquery

7 réponses