Sternbewertungskontrolle mit JQuery

Key Takeaways

• Der Artikel enthält eine detaillierte Anleitung zum Erstellen eines interaktiven Stern -Widgets mit JQuery. Dazu gehört das Erstellen einer Optionsknopfgruppe, die durch Sternsymbole ersetzt wird, mit denen der Benutzer interagieren kann, um eine Bewertung anzugeben.
• Das Sternenbewertungssystem ist so konzipiert, dass er Tastaturen zugänglich ist und Halbsternwerte ermöglicht. Dies wird erreicht, indem ein CSS-Sprite-Bild verwendet und die Eigenschaft von Hintergrundpositionen manipuliert wird, um verschiedene Zustände des Sterns anzuzeigen.
• Das Bewertungssystem soll das Engagement der Benutzer und die nachdenkliche Bewertungsauswahl fördern, indem die Skala auf vier Sterne anstelle von fünf beschränkt wird, wodurch eine mittlere Option beseitigt wird. Es ermöglicht auch Halbsternbewertungen für eine größere Präzision.
• Das System verwendet JQuery, um Benutzerinteraktionen zu verarbeiten, einschließlich Schwebe und Klicken auf die Sterne. Wenn ein Stern angeklickt wird, wird der entsprechende Optionsschaltfläche aktualisiert und der Stern und alle vorhergehenden Sterne hervorgehoben. Das System implementiert auch die Fehlerbehandlung, um potenzielle Probleme zu verwalten.

Unser neu veröffentlichtes Buch, jQuery: Novice to Ninja , enthält eine Fülle von großartigen Lösungen, die Sie sowohl die grundlegenden als auch die fortgeschritteneren Konzepte von JQuery beim Fortschritt unterrichten. Als Taster zeigt uns ein Auszug, bei dem Craig Sharkie uns zeigt, wie man ein robustes, anspruchsvolles Star -Bewertungs -Widget mit JQuery aufbaut. Es ist zugänglich und ermöglicht Halb-Stern-Bewertungen. Hier. Wir haben ein bisschen darüber nachgedacht und ihm eine Starbewertungsidee geworfen - nach allen lieben die Menschen nichts weiter, als ihre Gefühle durch die Aufgabe von Goldstars auszudrücken. Unser glänzendes neues Steuerelement erscheint wie in Abbildung 1, „Sternbewertungskontrolle“. Es ist perfekt, da der Browser eine einzige Auswahl aus der Gruppe erzwingt. Sie können den Bereich auswählen, aus dem der Benutzer auswählen soll, indem Sie einfach die richtige Anzahl von Schaltflächen hinzufügen:

Beispiel 1. Kapitel_07/11_Star_ratings/index.html (Auszug)

<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>

Der schwierige Teil ist natürlich, diese Optionsfelder durch unsere Sternsteuerung zu ersetzen. Sie können versuchen, die HTML -Steuerelemente mit nur CSS zu stylen, aber es ist viel einfacher und flexibler, wenn Sie die Steuerung in zwei Teile aufteilen: das zugrunde liegende Modell, das die Daten speichert, und die glänzende Ansicht mit Sternen. Das Modell ist in diesem Fall die ursprüngliche HTML -Optionsknopfgruppe. Unser Angriffsplan ist es, die Optionsfelder zu verbergen und eine Liste von Links anzuzeigen, die wir über JQuery hinzugefügt haben, um wie Sterne auszusehen. Durch die Interaktion mit den Links wechselt das ausgewählte Optionsfeld. Benutzer ohne JavaScript sehen einfach die Optionsfelder selbst, was von uns in Ordnung ist. Auf diese Weise hängt unsere Kontrolle nur auf ein einzelnes Bild (siehe Abbildung 2, "Stern-CSS-Sprite-Bild") ab, das auf HTTP-Anfragen spart und es unseren Grafikdesignern erleichtert, zu bearbeiten. Um sich zwischen den verschiedenen Bildzuständen zu bewegen, müssen wir nur die Eigenschaft Hintergrundposition aktualisieren:

Beispiel 2. Kapitel_07/11_STAR_RATINGS/STARS.CSS (Auszug)

Wir haben beschlossen, den Benutzer eine Bewertung von vier Sternen zu wählen, eher als fünf. Warum? Benutzerpsychologie! Bieten Sie einer Person eine Mittelstraße an und sie werden sie nehmen. Wenn wir keine Mitte haben, denken wir die Benutzer ein bisschen mehr über ihre Auswahl nach. Wir erzielen bessere Ergebnisse und können Benutzer besser mit dem besten Inhalt vorstellen (wie von ihnen ausgewählt)! Dies wird durch eine optische Illusion implementiert - Sie haben wahrscheinlich festgestellt, dass unsere Sternbilder in zwei Hälften gehackt sind. Unser HTML enthält acht Optionsfelder und sie werden jeweils einen halben Stern wert sein. Der Code gibt zwei Teile, um unsere acht Optionsfelder in vier Sterne zu verwandeln. Zunächst nimmt die Createstars -Funktion einen Container mit Optionsoberflächen und ersetzt ihn durch Sternlinks. Jeder Stern wird dann mit den richtigen Ereignishandlern (in der AddHandlers -Methode) ergänzt, um den Benutzer mit der Steuerung interagieren zu lassen. Hier ist das Skelett unseres zustimmenden Objekts:

Beispiel 3. Kapitel_07/11_Star_ratings/script.js (Auszug)

.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; }

Die Erstellung der Methode erstellen, die den Container übereinstimmt, in dem wir die Selektor übergeben, und erstellt eine Liste von Links, die für die Strotknöpfe handeln. Diese Links sind das, was wir stylen, um wie Sterne auszusehen. Es wird auch die ursprünglichen Formularelemente verbergen, sodass der Benutzer nur unsere schönen Sterne sieht:

Beispiel 4. Kapitel_07/11_Star_ratings/script.js (Auszug)

<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>

Wir erstellen zunächst einen Container für die neuen Links (ein DIV -Element); Wir erstellen einen neuen Link für jedes der von uns ersetzten Optionsfelder. Nachdem wir alle Optionsfelder mit dem: Radio -Selektorfilter ausgewählt haben, nehmen wir die Bewertung jedes Elements an und erstellen es, um ein Hyperlink -Element zu erstellen. Wie wir bereits in diesem Buch getan haben, verwenden wir den Modul (%) -Preiber, um festzustellen, ob der Index gerade oder ungerade ist. Wenn der Index ungerade ist, werden wir die Bewertungsrechtsklasse hinzufügen. Dies lässt den Link wie die rechte Seite eines Sterns aussehen. Dann fügen wir es dem Listencontainer hinzu. Sobald es im Container ist, sehen wir, ob das aktuelle Optionsschalter ausgewählt ist (wir verwenden den folgenden Formularfilter). Wenn es überprüft wird, möchten wir die Bewertungsklasse zu diesem Halbstar und allen Halbstars zuvor hinzufügen. Jeder Link mit der beigefügten Bewertungsklasse wird dem Goldsternbild zugeordnet (mit dem Benutzer die aktuelle Bewertung sehen können). Die prevall -Aktion wählt vor der aktuellen Auswahl

jedes

-Schister aus (im Gegensatz zur Prävaktion, bei der nur das unmittelbar vorherige Geschwister ausgewählt wird). Für unser Beispiel möchten wir die Klasse zu den vorherigen Geschwistern

und

zur aktuellen Auswahl hinzufügen. Dazu wenden wir die und Self -Aktion an, die einfach die ursprüngliche Auswahl in der aktuellen Auswahl enthält. Jetzt haben wir alle Links, die Gold sind, sodass wir die Klasse hinzufügen können. JQuery 1.4 hat auch zwei neue Begleitmethoden eingeführt: Prevuntil und NextunTil. Diese werden mit einem Selektor aufgerufen und scannen die Geschwister eines Elements (vorwärts oder rückwärts, je nachdem, welches Sie verwenden), bis sie ein Element treffen, das dem Selektor entspricht. Geben Sie alle Elemente, die zwischen dem ersten H2 auf der Seite und dem folgenden H2 im selben Containerelement sitzen. Wenn wir beispielsweise NextunTilil ('H2', 'Div') geschrieben hätten, würde es nur Divelemente zwischen unserer aktuellen Auswahl und dem nächsten H2 zurückgeben.

Nach all dieser harten Arbeit können wir jetzt die neue Liste der Links zur Steuerung hinzufügen und die ursprünglichen Schaltflächen loswerden. Jetzt interagiert der Benutzer nur mit den Sternen:

Beispiel 5. Kapitel_07/11_Star_ratings/script.js (Auszug)

<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>

Das Steuerelement sieht so aus, als würde er jetzt Gestalt annehmen - aber es tut noch nichts. Wir müssen einige Event -Handler anschließen und ein gewisses Verhalten hinzufügen. Wir interessieren uns für drei Veranstaltungen. Wenn Benutzer über einen Stern schweben, möchten wir das CSS Sprite aktualisieren, um den Schwebstatus anzuzeigen. Wenn sie weggehen, wollen wir das CSS -Sprite in seinen ursprünglichen Zustand zurückversetzen. Und wenn sie klicken, möchten wir die Selektion Gold machen:

Beispiel 6. Kapitel_07/11_Star_ratings/Skript.js (Auszug)

.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; }

Die Schwebefunktion ist am einfachsten. das Setup. Wenn wir ausgehen, decken wir unsere Stützpunkte ab und entfernen die Bewertungsklasse von allen Links. Das ist schwebend, um zu sorgen. Dies tun wir, indem wir das korrekte Optionsfeld mit dem: Radiofilter und einem Attribut -Selektor auswählen, der nach dem Optionsfeld sucht, dessen Wert mit dem Text des aktuellen Links übereinstimmt. Zunächst löschen wir die Bewertungsklasse von allen Links, die sie derzeit haben, und fügen sie dann zu allen Links auf und vor dem aus, den der Benutzer ausgewählt hat. Die letzte Berührung besteht darin, die Standardaktion des Links zu stornieren. Wenn Sie auf den Stern klicken, wird dies nicht zu einer Änderung der Position abgefeuert. Denken Sie daran, Ihr kostenloses Beispiel für PDF zu schnappen, das dieses Beispiel sowie 150 Seiten mit mehr großartigem Lernmaterial enthält. Wenn Sie bereits verkauft sind, können Sie das Buch direkt von SitePoint kaufen.

häufig gestellte Fragen (FAQs) zu JQuery Star Bewertung

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    });  }}

Wie kann ich das Erscheinungsbild der Sternenbewertung anpassen? Sie können die Farbe, Größe und Abstand der Sterne ändern. Um beispielsweise die Farbe zu ändern, können Sie die Eigenschaft "Farbe" in Ihrem CSS verwenden. Um die Größe zu ändern, können Sie die Eigenschaft „Schriftgröße“ einstellen. Denken Sie daran, die spezifische Klasse Ihrer Sternbewertung in Ihrem CSS anzusprechen, um diese Änderungen anzuwenden.

Kann ich Halbstar-Bewertungen in JQuery Star-Bewertung verwenden? Dies kann erreicht werden, indem die Option „Halb“ bei der Initialisierung der Sternenbewertung auftrennt. Dies ermöglicht genauere Bewertungen und bietet den Benutzern die Möglichkeit, mit halben Sternen zu bewerten.

Wie kann ich die Bewertung des Benutzers speichern? Dieses Skript kann dann die Bewertung in einer Datenbank speichern. Wenn die Seite geladen wird, kann das Skript die gespeicherte Bewertung abrufen und anweisen.

Wie kann ich die durchschnittliche Bewertung anzeigen? Dies kann mit einem serverseitigen Skript erfolgen, das alle Bewertungen aus der Datenbank abruft, den Durchschnitt berechnet und dann diesen Durchschnitt an das clientseitige Skript zurücksendet.

Kann ich die Sternbewertung deaktivieren? Dies kann nützlich sein, wenn Sie eine Bewertung anzeigen möchten, aber nicht möchten, dass Benutzer sie ändern können. Um die Sternenbewertung zu deaktivieren, können Sie die Option "Readonly" bei der Initialisierung der Sternbewertung auf True einstellen.

Wie kann ich verschiedene Sternsymbole verwenden? Diese Optionen akzeptieren die Namen der Symbole, die Sie verwenden möchten. Die Symbole sollten Teil eines in Ihrem Projekt enthaltenen Schriftsatzessatzes sein. Wenn Sie eine Sternbewertung ohne JQuery verwenden möchten, müssen Sie eine andere Lösung finden, z. Wenn Ihre Star -Bewertungsinstanz beispielsweise in einer Variablen mit dem Namen "Bewertung" gespeichert ist, können Sie sie mit "Rating.rating (0)" zurücksetzen. Die Sternbewertung kann mit einem versteckten Eingangsfeld im Formular verknüpft werden. Wenn der Benutzer das Formular einreicht, wird der Wert der Sternenbewertung in den Formulardaten enthalten. Dieses Ereignis wird ausgelöst, wenn ein Fehler in der Sternbewertung vorliegt, z. B. wenn ein ungültiger Wert festgelegt wird. Sie können auf dieses Ereignis zuhören und dann den Fehler auf eine für Ihre Anwendung geeignete Weise bewältigen.

Das obige ist der detaillierte Inhalt vonSternbewertungskontrolle mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!