Contrôle de l'évaluation des étoiles avec jQuery

Les plats clés

• L'article fournit un guide détaillé sur la façon de créer un widget de notation d'étoile interactif à l'aide de jQuery. Il s'agit de créer un groupe de boutons radio qui est remplacé par des icônes d'étoiles, avec lesquelles l'utilisateur peut interagir pour fournir une note.
• Le système d'évaluation des étoiles est conçu pour être accessible au clavier et permet les notes de demi-étoiles. Ceci est réalisé en utilisant une image CSS Sprite et en manipulant la propriété de position d'arrière-plan pour afficher différents états de l'étoile.
• Le système de notation est conçu pour encourager l'engagement des utilisateurs et la sélection de notation réfléchie en limitant l'échelle à quatre étoiles au lieu de cinq, éliminant ainsi une option centrale. Il permet également des cotes de demi-étoiles pour une plus grande précision.
• Le système utilise jQuery pour gérer les interactions utilisateur, y compris le plan de planage et de cliquer sur les étoiles. Lorsqu'une étoile est cliquée, la valeur du bouton radio correspondant est mise à jour, et l'étoile et toutes les étoiles précédentes sont mises en évidence. Le système met également en œuvre la gestion des erreurs pour gérer les problèmes potentiels.

Notre livre nouvellement sorti, jQuery: Novice to ninja , contient une richesse de grandes solutions prêtes à l'emploi et vous enseigne à la fois les concepts de base et plus avancés de jQuery au fur et à mesure que vous progressez. En tant que dégustateur, voici un extrait où Craig Sharkie nous montre comment construire un widget de notation star robuste et sophistiqué en utilisant jQuery. Il est accessible au clavier, et permet des notes de demi-étoiles.

Si vous n'avez jamais utilisé jQuery auparavant, prenez l'exemple de PDF gratuit et montez à la vitesse avec l'introduction dans le chapitre 2. Le chapitre 7, à partir de laquelle cet article est pris, est également inclus dans le téléchargement, donc si vous préférez lire ce tutoriel hors ligne, vous pouvez faire ce article. Ici.

Contrôle de notation des étoiles

Notre client veut augmenter l'engagement des utilisateurs et aider ses utilisateurs à se sentir importants. Nous avons réfléchi un peu à cela et lui avons lancé une idée de notation des étoiles - après tout, les gens n'aiment rien de plus que d'exprimer leurs sentiments à travers l'affectation des étoiles d'or. Notre nouveau contrôle brillant apparaîtra comme indiqué sur la figure 1, «Contrôle d'évaluation des étoiles».

Figure 1. Contrôle de note d'étoile

La base de notre contrôle de notation d'étoile est un groupe de boutons radio; Il est parfait, car le navigateur applique une seule sélection du groupe. Vous pouvez sélectionner la plage dans laquelle vous souhaitez que l'utilisateur choisisse, simplement en ajoutant le bon nombre de boutons:

Exemple 1. Chapitre_07 / 11_STAR_RATIngs / index.html (Extract)

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

La partie difficile, bien sûr, est de remplacer ces boutons radio par notre contrôle étoile. Vous pouvez essayer de vous attaquer avec le style des commandes HTML avec uniquement CSS, mais ce sera beaucoup plus facile et plus flexible si vous divisez le contrôle en deux parties: le modèle sous-jacent qui stocke les données et la vue brillante avec des étoiles. Le modèle, dans ce cas, est le groupe de boutons radio HTML d'origine. Notre plan d'attaque est de masquer les boutons radio et d'afficher une liste de liens que nous avons ajoutés via jQuery, stylisés pour ressembler à des étoiles. L'interaction avec les liens changera le bouton radio sélectionné. Les utilisateurs sans JavaScript verront simplement les boutons radio eux-mêmes, ce qui est bien pour nous.

Pour les étoiles, nous compterons sur les sprites CSS. De cette façon, notre contrôle ne dépendra que sur une seule image (illustré à la figure 2, «Image de sprite CSS Star»), qui enregistre sur les demandes HTTP et facilite la modification de nos graphismes. Pour se déplacer entre les différents états d'image, nous devons simplement mettre à jour la propriété de position d'arrière-plan:

Exemple 2. Chapitre_07 / 11_STAR_RATIngs / stars.css (Extrat)

Nous avons décidé de faire de l'utilisateur une note de quatre étoiles, plutôt que des cinq usuels. Pourquoi? Psychologie de l'utilisateur! Offrez à une personne une route du milieu et elle le prendra; En n'ayant pas de milieu, nous faisons réfléchir un peu plus les utilisateurs à leur sélection. Nous obtenons de meilleurs résultats, et nous serons mieux en mesure de présenter aux utilisateurs le meilleur contenu (comme choisi par eux)!

Mais quatre est une échelle limitée - c'est pourquoi nous voulons permettre des notes de demi-étoiles. Ceci est implémenté via une illusion d'optique - vous avez probablement remarqué que nos images d'étoiles sont coupées en deux. Notre HTML contiendra huit boutons radio, et ils vaudront chacun une demi-étoile. Il y a deux parties dans le code pour transformer nos huit boutons radio en quatre étoiles. Tout d'abord, la fonction Createstars prendra un conteneur avec des boutons radio et le remplacera par des liens étoiles. Chaque étoile sera ensuite complétée par les gestionnaires d'événements appropriés (dans la méthode AddHandlers) pour permettre à l'utilisateur d'interagir avec le contrôle. Voici le squelette de notre objet de starrating:

.stars div a {  background: transparent url(sprite_rate.png) 0 0 no-repeat;  display: inline-block;  height: 23px;  width: 12px;  text-indent: -999em;  overflow: hidden;}.stars a.rating-right {  background-position: 0 -23px;  padding-right: 6px;}.stars a.rating-over { background-position: 0 -46px; }.stars a.rating-over.rating-right { background-position: 0 -69px; }.stars a.rating { background-position: 0 -92px; }.stars a.rating.rating-right { background-position: 0 -115px; }

Exemple 3. Chapitre_07 / 11_STAR_RATIngs / script.js (Excerpt)

La méthode de création itère à travers chaque conteneur correspondant au sélecteur que nous passons, et créa une liste de liens qui agissent comme un proxy pour les boutons radio. Ces liens sont ce que nous allons style pour ressembler à des étoiles. Il masquera également les éléments de formulaire d'origine, donc l'utilisateur ne voit que nos belles étoiles:

Exemple 4. Chapitre_07 / 11_STAR_RATINGS / Script.js (Extratpt)

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

Nous commençons par créer un conteneur pour les nouveaux liens (un élément div); Nous créerons un nouveau lien pour chacun des boutons radio que nous remplaçons. Après avoir sélectionné tous les boutons radio avec le filtre de sélecteur de radio, nous prenons la note de chaque élément et l'utilisons pour créer un élément hyperlien.

Remarque: affectation conditionnelle avec module

pour l'action addClass, nous spécifions le nom de classe conditionnellement avec un opérateur ternaire, basé sur un peu de mathématiques. Comme nous l'avons fait plus tôt dans le livre, nous utilisons l'opérateur de module (%) pour déterminer si l'indice est uniforme ou impair. Si l'index est impair, nous ajouterons la classe de droite de l'évaluation; Cela fait ressembler le lien à la droite d'une étoile.

Une fois que notre lien est prêt, nous le transmettons à la méthode AddHandlers - c'est là que nous attacherons les événements dont il a besoin pour travailler. Ensuite, nous l'ajoutons au conteneur de la liste. Une fois dans le conteneur, nous voyons si le bouton radio actuel est sélectionné (nous utilisons le filtre de formulaire: vérifié). S'il est vérifié, nous voulons ajouter la classe de notation à cette demi-étoile et à toutes les demi-étoiles avant. Tout lien avec la classe de notation attachée se verra attribuer l'image Gold Star (qui permettra aux utilisateurs de voir la note actuelle).

pour sélectionner tous les éléments dont nous avons besoin pour transformer l'or, nous allons faire appel à quelques nouvelles actions jQuery: Prévall et soi-même. L'action Préquier sélectionne chaque frère avant la sélection actuelle (contrairement à l'action PREV, qui ne sélectionne que le frère immédiatement précédent). Pour notre exemple, nous voulons ajouter la classe aux frères et sœurs précédents et la sélection actuelle. Pour ce faire, nous appliquons l'action et soi-même, qui inclut simplement la sélection d'origine dans la sélection actuelle. Maintenant, nous avons tous les liens qui seront or, nous pouvons donc ajouter la classe.

Astuce: Autres méthodes de traversée

Vous avez peut-être deviné que, avec Prévall, jQuery nous fournit une méthode suivante, qui saisit tous les frères et sœurs d'un élément après dans le même récipient. JQuery 1.4 a également introduit deux nouvelles méthodes compagnons: Prévutil et Nextuntil. Ceux-ci sont appelés avec un sélecteur et scanneront les frères et sœurs d'un élément (en avant ou en arrière, selon celui que vous utilisez) jusqu'à ce qu'ils atteignent un élément qui correspond au sélecteur.

Ainsi, par exemple, $ ('H2: First'). NextUntil ('H2'); vous donnera tous les éléments assis entre le premier H2 sur la page et le H2 suivant dans le même élément de conteneur.

Si vous passez un deuxième paramètre pour Prévutil ou NEXTUNTIL, il sera utilisé comme sélecteur pour filtrer les éléments retournés. Ainsi, par exemple, si nous avions écrit Nexttuntil ('H2', 'Div'), il ne rendrait que des éléments div entre notre sélection actuelle et le prochain H2.

Après avoir fait tout ce travail acharné, nous pouvons maintenant ajouter la nouvelle liste de liens au contrôle et nous débarrasser des boutons d'origine. Maintenant, l'utilisateur n'interagira qu'avec les étoiles:

Exemple 5. Chapitre_07 / 11_STAR_RATIngs / script.js (extrait)

<div >  <label><input  name="rating" type="radio" value="1"/>1 Star</label>  <label><input  name="rating" type="radio" value="2"/>2 Stars</label>  <label><input  name="rating" type="radio" value="3"/>3 Stars</label>  <label><input  name="rating" type="radio" value="4"/>4 Stars</label>  ⋮</div>

Le contrôle semble prendre forme maintenant - mais il ne fait rien. Nous devons attacher certains gestionnaires d'événements et ajouter un comportement. Nous sommes intéressés par trois événements. Lorsque les utilisateurs planent sur une étoile, nous voulons mettre à jour le CSS Sprite pour afficher l'état de survol; Lorsqu'ils s'éloignent, nous voulons revenir sur le sprite CSS à son état d'origine; Et lorsqu'ils cliquent, nous voulons faire de la sélection l'or:

Exemple 6. Chapitre_07 / 11_STAR_RATIngs / script.js (Extrat)

.stars div a {  background: transparent url(sprite_rate.png) 0 0 no-repeat;  display: inline-block;  height: 23px;  width: 12px;  text-indent: -999em;  overflow: hidden;}.stars a.rating-right {  background-position: 0 -23px;  padding-right: 6px;}.stars a.rating-over { background-position: 0 -46px; }.stars a.rating-over.rating-right { background-position: 0 -69px; }.stars a.rating { background-position: 0 -92px; }.stars a.rating.rating-right { background-position: 0 -115px; }

La fonction de planée est la plus simple: lorsque nous leur survenons, nous sélectionnons tous les demi-étoiles avant, y compris le demi-star actuel - et leur donnant la classe Rating en utilisant Avant, et dans le seme la configuration. Lors de la volonté, nous couvrons nos bases et supprimons la classe de note de tous les liens. C'est en planant. Nous le faisons en sélectionnant le bouton radio correct avec: le filtre radio et un sélecteur d'attribut, qui recherche le bouton radio dont la valeur correspond au texte du lien actuel.

Avec le modèle mis à jour, nous pouvons revenir pour jouer avec les sprites CSS. Tout d'abord, nous effacons la classe de notation à partir de tous les liens qui l'ont actuellement, puis l'ajoutons à tous les liens sur et avant celui de l'utilisateur sélectionné. La dernière touche consiste à annuler l'action par défaut du lien, donc cliquer sur l'étoile ne fait pas que le changement de localisation.

Conclusion

var starRating = {  create: function(selector) {    $(selector).each(function() {      // Hide radio buttons and add star links    });  },  addHandlers: function(item) {    $(item).click(function(e) {      // Handle star click    })    .hover(function() {      // Handle star hover over    },function() {      // Handle star hover out    });  }}

J'espère que vous avez apprécié ce goût de toute la bonté jQuery qui est contenue dans
jQuery: Novice to Ninja

. N'oubliez pas de prendre votre échantillon gratuit PDF, qui contient cet exemple ainsi que 150 pages de plus grand matériel d'apprentissage. Si vous êtes déjà vendu, vous pouvez aller de l'avant et acheter le livre directement à SitePoint.

Les questions fréquemment posées (FAQ) sur la notation de JQuery Star

Comment puis-je personnaliser l'apparence de la note d'étoile?

La personnalisation de l'apparence de la note d'étoile peut être obtenue en modifiant le CSS. Vous pouvez modifier la couleur, la taille et l'espacement des étoiles. Par exemple, pour changer la couleur, vous pouvez utiliser la propriété «couleur» dans votre CSS. Pour modifier la taille, vous pouvez ajuster la propriété «taille de police». N'oubliez pas de cibler la classe spécifique de votre cote d'étoile dans votre CSS pour appliquer ces modifications.

Puis-je utiliser des notes de demi-étoile dans la note d'étoile jQuery?

Oui, vous pouvez utiliser des notes de demi-étoile dans la cote JQuery Star. Cela peut être réalisé en définissant l'option «demi» sur true lors de l'initialisation de la note d'étoile. Cela permet des notes plus précises, donnant aux utilisateurs la possibilité d'évaluer avec les demi-étoiles.

Comment puis-je enregistrer la note de l'utilisateur?

Pour enregistrer la note de l'utilisateur, vous pouvez utiliser Ajax pour envoyer la valeur de notation à un script côté serveur. Ce script peut ensuite stocker la note dans une base de données. Lorsque la page est chargée, le script peut récupérer la note stockée et l'afficher.

Comment puis-je afficher la note moyenne?

L'affichage de la note moyenne peut être effectuée en calculant la moyenne de toutes les notes stockées, puis en définissant la valeur de la note d'étoile à cette moyenne. Cela peut être fait à l'aide d'un script côté serveur qui récupère toutes les notes de la base de données, calcule la moyenne, puis renvoie cette moyenne au script côté client.

Puis-je désactiver la note d'étoile?

Oui, vous pouvez désactiver la note d'étoile. Cela peut être utile si vous souhaitez afficher une note, mais que vous ne voulez pas que les utilisateurs puissent le changer. Pour désactiver la note d'étoile, vous pouvez définir l'option «ReadOnly» sur true lors de l'initialisation de la note d'étoile.

Comment puis-je utiliser différentes icônes d'étoiles?

Vous pouvez utiliser différentes icônes d'étoiles en modifiant les options «Staroff» et «Staron» lors de l'initialisation de la note d'étoile. Ces options acceptent les noms des icônes que vous souhaitez utiliser. Les icônes doivent faire partie d'un ensemble d'icônes de police qui est incluse dans votre projet.

Puis-je utiliser la note d'étoile JQuery sans jQuery?

JQuery Star Rating est un plugin jQuery, donc il nécessite que jQuery fonctionne. Si vous souhaitez utiliser une note d'étoile sans jQuery, vous devrez trouver une solution différente, comme une bibliothèque de notation d'étoile JavaScript pure.

Comment puis-je réinitialiser la note d'étoile?

Vous pouvez réinitialiser la note d'étoile en définissant sa valeur à 0. Par exemple, si votre instance de notation Star est stockée dans une variable nommée «Rating», vous pouvez la réinitialiser avec «Rating.rating (0)».

Puis-je utiliser la note d'étoile jQuery sous une forme?

Oui, vous pouvez utiliser la note d'étoile JQuery sous une forme. La note d'étoile peut être liée à un champ de saisie caché dans le formulaire. Lorsque l'utilisateur soumet le formulaire, la valeur de la note d'étoile sera incluse dans les données du formulaire.

Comment puis-je gérer les erreurs dans la note d'étoile jQuery?

Les erreurs de traitement dans la notation de JQuery Star peuvent être effectuées en utilisant l'événement "Erreur". Cet événement est déclenché lorsqu'il y a une erreur dans la note d'étoile, comme lorsqu'une valeur non valide est définie. Vous pouvez écouter cet événement, puis gérer l'erreur d'une manière appropriée pour votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!