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!