Βαθμολογία με τη μορφή αστεριών με υπολογισμό. Πώς χωρίζουμε τα αστέρια της βαθμολογίας. Βασικές απαιτήσεις για το πρόσθετο

Σε αυτό το σεμινάριο, θα μάθουμε για την εντυπωσιακή δύναμη του CSS και θα δημιουργήσουμε μια βαθμολογία με αστέρια χρησιμοποιώντας καθαρό CSS. Δυστυχώς, αυτή η κατάταξη δεν θα λειτουργήσει σε ορισμένα παλαιότερα προγράμματα περιήγησης που υποστηρίζονται από το Webkit λόγω εσφαλμένου χειρισμού αδελφών και γειτονικών επιλογέων. Αλλά λειτουργεί καλά σε όλα τα σύγχρονα προγράμματα περιήγησης.

Κατά τη δημιουργία της βαθμολογίας, είχαμε μια ερώτηση: είναι δυνατόν να μην χρησιμοποιήσουμε καθόλου JavaScript σε αυτήν, περιοριζόμενοι μόνο σε CSS. Και είναι δυνατό. Χρησιμοποιώντας τη μέθοδο του Ryan Seddon για τη δημιουργία προσαρμοσμένων κουμπιών επιλογής χρησιμοποιώντας CSS, μπορείτε να μετατρέψετε πολλαπλά κουμπιά επιλογής σε αστέρια που αλλάζουν χρώμα. δουλειά τελειωμένη χρώματα στα αστέρια.

Τα κουμπιά επιλογής χρησιμοποιούνται συχνά για τη δημιουργία αξιολογήσεων με αστέρια, επομένως η σήμανση μπορεί να μην σας φαίνεται ασυνήθιστη. Το μόνο πράγμα που πρέπει να γίνει διαφορετικά είναι η αντίστροφη σειρά των αστεριών: η υψηλότερη βαθμολογία πρέπει να έρχεται πρώτη λόγω του τρόπου με τον οποίο λειτουργούν οι επιλογείς CSS3, αυτός ο περιορισμός μπορεί να καταργηθεί στο CSS4, αλλά αυτό είναι ακόμα πολύ μακριά.

Φυσικά, θα χρειαστεί JavaScript για να εκχωρήσετε έναν χειριστή συμβάντων εάν τα αποτελέσματα της ψηφοφορίας πρέπει να καταχωρηθούν χρησιμοποιώντας AJAX, αλλά αυτό δεν ισχύει για την ίδια την αξιολόγηση, η οποία μπορεί να λειτουργήσει ως μέρος μιας κανονικής φόρμας.

Σε προγράμματα περιήγησης που δεν υποστηρίζουν την ψευδο-κλάση :checked (επιλεγμένο), ειδικά στον Internet Explorer κάτω από την έκδοση 9, η βαθμολογία θα πρέπει να εμφανίζεται ως κουμπιά επιλογής, αλλά δεν έχουμε δοκιμάσει.

Λοιπόν, ορίστε τι συμβαίνει:

Κώδικας HTML

Παρακαλούμε αξιολογήστε: 5 αστέρια 4 αστέρια 3 αστέρια 2 αστέρια 1 αστέρι

Κωδικός CSS

Βαθμολογία ( float:left ; ) /* Η κατασκευή :not(:checked) λειτουργεί ως φίλτρο για να αποτρέψει τα προγράμματα περιήγησης που δεν υποστηρίζουν την ψευδοκλάση :checked να εφαρμόσουν αυτές τις ιδιότητες. Όλα τα προγράμματα περιήγησης που υποστηρίζουν την :checked pseudo-class υποστηρίζουν επίσης την ψευδο-κλάση :not(), επομένως το φίλτρο θα πρέπει να λειτουργεί σωστά. */ .rating :not (:checked ) > input ( position:absolute ; top:-9999px ; clip:rect (0 ,0 ,0 ,0 ) ; ) .rating :not (:checked ) > label (float:right ;πλάτος:1em ;nowrap ;size:1 :not (:checked ) > label:before ( content : "★ " ; ) .rating > input:checked ~ label ( color : #f70 ; text-shadow:1px 1px #c60 , 2px 2px #940 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ) .rating :not ( :checked ) > label:hover , .rating :not (:checked ) > label:hover ~ label ( color : gold; text-shadow ) . :1px .1em .1em .2em rgba(0 ,0 ,0 ,.5 ) ) .rating > input:checked + label:hover , .rating > input:checked + label:hover ~ label, .rating > input: επιλεγμένο ~ label:hover , .rating > input:checked ~ label:hover ~ label, . label:hover ~ input:checked ~ label ( color : #ea0 ;

text-shadow:1px 1px goldenrod, 2px 2px #B57340 , .1em .1em .2em rgba(0 ,0 ,0 ,.5 ); ) .rating > label:active ( position:relative ; top:2px ; left:2px ; )

Όλα ξεκίνησαν όταν αποφάσισα να αλλάξω τη βαθμολογία για τις αναρτήσεις στο ιστολόγιό μου.

Ο κύριος λόγος για την αλλαγή της βαθμολογίας ήταν ότι η βαθμολογία εμφανιζόταν ως "ακέραια" αστέρια, λοιπόν, το μέγιστο που μπορούσατε να εμφανίσετε ήταν μισό αστέρι. Δηλαδή, αν η βαθμολογία για ένα άρθρο ήταν 4,75, τότε ήταν απαραίτητο να εμφανίσω είτε 4,5 αστέρια είτε 5, κάτι που δεν μου ταίριαζε πολύ.

Ως εκ τούτου, αποφασίστηκε να γράψω το δικό μου πρόσθετο στο jQuery για να δημιουργήσω μια βαθμολογία με τη μορφή αστεριών.

• Βασικές απαιτήσεις για το πρόσθετο:
• Η βαθμολογία θα έπρεπε να έχει εμφανιστεί σωστά, δηλαδή εάν η βαθμολογία μου ήταν 4,78, τότε ο αριθμός των σκιασμένων αστεριών θα πρέπει να είναι κατάλληλος.
• Δυνατότητα επιλογής εφέ όταν τοποθετείτε το ποντίκι πάνω από ένα αστέρι. Αυτό σημαίνει τι είδους βαθμολογία μπορεί να δώσει ο χρήστης. δηλ. όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τα αστέρια, θα πρέπει να έχουν ζωγραφιστεί είτε με ολόκληρα αστέρια, είτε με μισό αστέρι, είτε σε απόλυτες τιμές ακολουθώντας τον δείκτη του ποντικιού
• Δυνατότητα καθορισμού της διεύθυνσης URL στην οποία θα σταλεί το αποτέλεσμα της ψηφοφορίας
• Δυνατότητα καθορισμού του αριθμού των αστεριών που εμφανίζονται στην βαθμολογία
• Αυτόματη πτώση των αποτελεσμάτων της ψηφοφορίας. (Για παράδειγμα: 1 ψήφος, 2 ψήφοι, 5 ψήφοι)
• Δυνατότητα να ορίσετε τα δικά σας ουσιαστικά για τα αποτελέσματα της ψηφοφορίας
• Δυνατότητα ορισμού ελάχιστης τιμής αξιολόγησης κάτω από την οποία ο χρήστης δεν θα μπορεί να ψηφίσει
• Δυνατότητα εκτέλεσης προσαρμοσμένης συνάρτησης όταν κάνετε κλικ σε ένα αστέρι

Αφού αναπτύχθηκαν οι απαιτήσεις για πρόσθετα, άρχισα να προγραμματίζω. Ως αποτέλεσμα, κατέληξα σε αυτό που πιστεύω ότι είναι ένα πολύ καλό πρόσθετο jQuery για σημειώσεις αξιολόγησης με τη μορφή αστεριών, το οποίο είμαι στην ευχάριστη θέση να μοιραστώ μαζί σας.

Για να χρησιμοποιήσετε αυτό το πρόσθετο στον ιστότοπό σας, το πρώτο πράγμα που πρέπει να κάνετε είναι να συνδέσετε την ίδια τη βιβλιοθήκη jQuery και την ίδια την προσθήκη. Θα συνδέσουμε τη βιβλιοθήκη jQuery όχι με τον συνηθισμένο τρόπο, αλλά από το αποθετήριο της Google.

window.jQuery || document.write("");

Αυτός ο κώδικας πρέπει να τοποθετηθεί μεταξύ ετικετών στον ιστότοπό σας.

Μπορείτε να διαβάσετε γιατί πρέπει να συνδέσετε το jQuery από το αποθετήριο Google.

Επίσης, για να λειτουργεί σωστά η προσθήκη, πρέπει να συνδέσετε τα ακόλουθα στυλ:

Όλα αυτά θα τα βρείτε στον πηγαίο κώδικα.

Αφού συνδεθούν όλα τα απαραίτητα στυλ και βιβλιοθήκες, μπορείτε να καλέσετε την ίδια την προσθήκη. Για να το κάνετε αυτό, πρέπει να εισαγάγετε ένα div στη σωστή θέση στη σελίδα σας, για παράδειγμα, με την κατηγορία αξιολόγησης:

Τώρα μπορείτε να καλέσετε την προσθήκη σε αυτό το στοιχείο ως εξής:

$("div.rating").rating();

Σε αυτήν την περίπτωση, το πρόσθετο θα κληθεί με προεπιλεγμένες ρυθμίσεις, με αποτέλεσμα να δημιουργηθούν 5 μη συμπληρωμένα αστέρια.

Για να ορίσετε έναν συγκεκριμένο αριθμό σκιασμένων αστεριών, πρέπει να εισαγάγετε ένα κρυφό πεδίο εισαγωγής με την κλάση val μέσα στο στοιχείο μας, το οποίο θα περιέχει την τιμή της βαθμολογίας σας:

Εάν καλέσετε τώρα την προσθήκη, θα δημιουργηθεί η ακόλουθη βαθμολογία:

Αφού ο χρήστης κάνει κλικ στο επιθυμητό αστέρι, η βαθμολογία θα επανυπολογιστεί αυτόματα (ο αριθμός των σκιασμένων αστεριών θα αλλάξει) λαμβάνοντας υπόψη την επιλογή που έκανε και θα αλλάξει επίσης ο αριθμός των ψήφων.

Εάν υπάρχουν πολλές αξιολογήσεις σε μια σελίδα και πρέπει να στείλετε δεδομένα στον διακομιστή, τότε χρησιμοποιείται ένα άλλο κρυφό πεδίο εισαγωγής με την κλάση vote-id για τον προσδιορισμό της βαθμολογίας:

Η τιμή αυτού του πεδίου θα σταλεί στον διακομιστή μαζί με το αποτέλεσμα της ψηφοφορίας. Με αυτόν τον τρόπο μπορείτε να προσδιορίσετε τη βαθμολογία και να ενημερώσετε την αξία της βαθμολογίας που χρειάζεστε!

Τώρα ας μιλήσουμε για το τι ρυθμίσεις έχει το πρόσθετο και πώς μπορείτε να τις αλλάξετε!

Προσαρμοσμένη μορφή εξόδου μηνύματος

Ας υποθέσουμε ότι επεξεργάζεστε ένα αίτημα στον διακομιστή και ενημερώνετε τη βαθμολογία μιας σημείωσης. Σε αυτήν την περίπτωση, μπορείτε να εμφανίσετε το μήνυμα «Ευχαριστώ. Η ψήφος σας έχει καταμετρηθεί», δημιουργήστε ξανά την αξιολόγηση με αστέρια και ενημερώστε τον αριθμό των ψηφοφόρων στο πρόγραμμα περιήγησης του χρήστη.

Αλλά τις περισσότερες φορές, πριν ενημερώσετε την αξιολόγηση, πρέπει να ελέγξετε αν αυτό το άτομο ψήφισε για αυτό το άρθρο ή όχι. Και αν ένα άτομο έχει ήδη ψηφίσει για αυτήν τη σημείωση, τότε θα πρέπει να εμφανίζεται μια προειδοποίηση στο πρόγραμμα περιήγησης του χρήστη και να μην ενημερώνεται η τιμή αξιολόγησης και ο αριθμός των ψηφοφόρων.

Επομένως, για να λειτουργήσει σωστά η προσθήκη, ο διακομιστής πρέπει να επιστρέψει ένα αντικείμενο json της ακόλουθης μορφής:

Εάν η κατάσταση είναι ίση με την τιμή - ΟΚ, τότε η βαθμολογία με αστέρι θα ενημερωθεί και ο αριθμός των ψηφοφόρων θα υπολογιστεί εκ νέου, διαφορετικά θα εμφανιστεί απλώς ένα προειδοποιητικό μήνυμα.

Αυτή είναι η καθολική προσθήκη που ανακάλυψα για την εμφάνιση της βαθμολογίας των σημειώσεων με τη μορφή αστεριών.

Μπορείτε να δείτε το demo

Καλησπέρα φίλοι!

Συνεχίζουμε να μένουμε στο ίδιο θέμα των εκτεταμένων αποσπασμάτων, που αυξάνουν τον αριθμό των επισκεπτών από τα αποτελέσματα των μηχανών αναζήτησης.

Σήμερα δημοσιεύω το δεύτερο υλικό για αυτό το θέμα, μετά το πρώτο, όπου το φτιάξαμε για έναν ιστότοπο WordPress χρησιμοποιώντας το πρόσθετο Wp-PostRatigns.

Η βαθμολογία θα εμφανίζεται επίσης στα αποτελέσματα αναζήτησης, διαφορετικά δεν θα ήταν πολύ χρήσιμη. Είναι η επιλογή χωρίς πρόσθετο που χρησιμοποιώ αυτή τη στιγμή. Μπορείτε να δείτε ένα παράδειγμα υλοποίησης αμέσως μετά το κείμενο του άρθρου.

Δεν είχα κανένα λόγο να διαγράψω την προσθήκη και να μεταβώ στη μέθοδο δέσμης ενεργειών έως ότου ανακάλυψα ότι κάποια λειτουργικότητα του ιστότοπου σταμάτησε να λειτουργεί όταν ήταν ενεργή η προσθήκη WP-PostRatings.

Έχω εφαρμόσει τις ακόλουθες λύσεις στο ιστολόγιό μου χωρίς πρόσθετο:

• Σενάριο για μεγέθυνση εικόνων κάνοντας κλικ.
• Σχόλια από το Cackle.
• Αναπτυσσόμενο spoiler για απόκρυψη κειμένου.

Όλες αυτές οι λειτουργίες σταμάτησαν να λειτουργούν αμέσως μετά την ενεργοποίηση του πρόσθετου. Το γεγονός είναι ότι τέτοια πρόσθετα λειτουργούν στην τεχνολογία Ajax, η οποία μπορεί να έρχεται σε σύγκρουση με ορισμένα σενάρια.

Φυσικά, αυτό δεν μου ταιριάζει. Προσπάθησα να εγκαταστήσω άλλα πρόσθετα αξιολόγησης, αλλά η κατάσταση δεν άλλαξε καθόλου. Υπήρχαν 2 λύσεις: είτε να καταργήσω όλα τα σενάρια μου είτε να τα αντικαταστήσω με ανάλογα, είτε να εφαρμόσω την αξιολόγηση με άλλο τρόπο, για παράδειγμα χωρίς πρόσθετο, κάτι που έκανα.

Συνιστώ ανεπιφύλακτα να χρησιμοποιήσετε την προσθήκη εάν δεν υπάρχουν διενέξεις όταν εργάζεστε με σενάρια τρίτων, καθώς η προσθήκη είναι πολύ πιο κινητή και σε αυτήν μπορείτε να παρακολουθείτε στατιστικά αξιολόγησης, καθώς και να αλλάξετε ρυθμίσεις απευθείας μέσω του πίνακα διαχείρισης του WordPress.

Επιπλέον, το πρόσθετο σάς επιτρέπει να ορίσετε πιο αυστηρά τις επιλογές ψηφοφορίας. Για παράδειγμα, μπορείτε να ρυθμίσετε την αξιολόγηση του χρήστη ώστε να απομνημονεύεται από το cookie και τη διεύθυνση IP του, προκειμένου να προστατευτείτε από την εξαπάτηση αξιολογήσεων για μια πιο ρεαλιστική εικόνα της αξιολόγησης.

Εάν υπάρχουν διενέξεις, σας προτείνω να διαβάσετε τις λεπτομερείς οδηγίες σχετικά με τον τρόπο υλοποίησης μιας αξιολόγησης με αστέρι χωρίς προσθήκη, οι οποίες θα εμφανίζονται στο απόσπασμα και θα προσελκύσουν περισσότερη προσοχή στον πόρο σας στα αποτελέσματα αναζήτησης.

Για να εφαρμόσετε αυτήν την επιλογή, χρειάζεστε αρχεία σεναρίων, εικόνων και στυλ. Μπορείτε να κατεβάσετε το αρχείο με τον φάκελο στον οποίο βρίσκονται όλα τα αρχεία παρακάτω. Τα αρχεία στο αρχείο έχουν ρυθμιστεί για μεγάλα εικονίδια, όπως το δικό μου. Μπορείτε να φτιάξετε μικρά, θα σας δείξω αργότερα.

Ανεβάζουμε τον φάκελο που βρίσκεται στο αρχείο στη φιλοξενία του φακέλου με το πρότυπο για την υλοποίηση αυτής της διαδρομής: site.ru/wp-content/themes/theme name/ratings.

require_once("ratings/rating.php");

Μπορείτε να το τοποθετήσετε στην ενότητα head του ιστότοπου, αλλά δεν μου αρέσει αυτή η επιλογή, καθώς κάνει την κεφαλίδα του ιστότοπου ογκώδη και ο ιστότοπος φορτώνει πιο αργά.