Πώς να δημιουργήσετε μενού με μεσαίες επιδράσεις
Η δημοτικότητα του μενού επιπλεόντων ενεργειών έχει αυξηθεί, ειδικά αφού το Medium.com έφερε το στυλ στη μόδα. Εν συντομία, το μενού επιπλεόντων ενεργειών πετάγεται όταν εσύ επιλέξτε κάποιο κείμενο σε μια ιστοσελίδα. Το μενού εμφανίζεται κοντά στην επιλογή, παρουσιάζοντας διαφορετικές ενέργειες που σας επιτρέπουν να μορφοποιήσετε, να επισημάνετε ή να μοιραστείτε γρήγορα το επιλεγμένο κείμενο.
Σε αυτό το σεμινάριο, θα σας δείξω πώς να εμφανίσετε ένα για ένα επιλεγμένο απόσπασμα κειμένου σε μια ιστοσελίδα. Το μενού δράσης μας θα επιτρέψει στους χρήστες να τιτλοποιήστε το επιλεγμένο κείμενο στους οπαδούς τους.
1. Δημιουργήστε το HTML
ο η εκκίνηση HTML είναι απλή, Χρειαζόμαστε μόνο κάποιο κείμενο ο χρήστης μπορεί να επιλέξει. Για το demo, θα το χρησιμοποιήσω “Ο Χαρτ και ο κυνηγός” παραμύθι ως δείγμα κειμένου.
Ο Χαρτ και ο κυνηγός
Ο Χαρτ ήταν κάποτε ...
...
2. Δημιουργήστε το πρότυπο μενού δράσης
Είμαι προσθέτοντας τον κώδικα HTML που ανήκουν στο μενού δράσης μέσα σε α στοιχείο. Ό, τι βρίσκεται μέσα στο ετικέτα, αυτό δεν θα αποδοθεί από τα προγράμματα περιήγησης μέχρι να προστεθεί στο έγγραφο χρησιμοποιώντας JavaScript.
Μην αφήνετε περιττό χώρο μεσα στην ετικέτα, καθώς αυτό θα μπορούσε να διαταράξει τη διάταξη μενού δράσης μετά την τοποθέτησή της στο έγγραφο. Αν θέλεις, προσθέστε περισσότερα κουμπιά μέσα #shareBox για περισσότερες επιλογές.
3. Δημιουργήστε το CSS
Το CSS για το #shareBox inline δοχείο πηγαίνει έτσι:
#shareBox πλάτος: 30px; ύψος: 30px; θέση: απόλυτη;
ο θέση: απόλυτη; κανόνας θα μας αφήσει τοποθετήστε το μενού όπου θέλουμε στη σελίδα.
Επίσης, χαρακτήρισα το κουμπί δράσης μέσα #shareBox με χρώμα φόντου και εικόνα και με το ::μετά ψευδο στοιχείο Ι πρόσθεσε ένα τρίγωνο για ένα κάτω βέλος.
#shareBox> κουμπί πλάτος: 100%; ύψος: 100%. φόντο-χρώμα: # 292A2B; σύνορα: κανένα · ακτίνα ακτίνων: 2px; περίγραμμα: κανένας. δρομέας: δείκτης; εικόνα-φόντου: url ('share.png'); αναπαράσταση φόντου: όχι-επανάληψη φόντο-θέση: κέντρο μέγεθος φόντου: 70%. #shareBox> κουμπί :: μετά από position: absolute; Περιεχόμενο: "· κορυφή περιθωρίου: 10px στερεά # 292A2B · όριο-αριστερά: 10px στερεά διαφανή · περιθώριο-δεξιά: 10px στερεά διαφανή · αριστερά: 5px · κορυφή: 30px · 4. Προσθέστε χειριστές συμβάντων με το JS
Προχωρώντας στο JavaScript, πρέπει να το κάνουμε προσθέστε χειριστές συμβάντων για το ποντικιού και ποντίκι γεγονότα για συλλάβει την αρχή και το τέλος της επιλογής κειμένου.
Μπορείτε επίσης να κάνετε έρευνα για άλλα συμβάντα επιλογής όπως επιλέξτεεκκίνηση και να τα χρησιμοποιήσετε αντί των γεγονότων του ποντικιού (το οποίο θα ήταν ιδανικό αλλά από την στιγμή που η υποστήριξη του προγράμματος περιήγησης δεν είναι πολύ καλή).
Επίσης προσθέστε μια αναφορά στο χρησιμοποιώντας το στοιχείο querySelector () μέθοδος.
document.addEventListener ('mousedown', onMouseDown) document.addEventListener ('mouseup', onMouseUp); var temp = document.querySelector ('# shareBoxTemplate'); λειτουργία onMouseDown () λειτουργία onMouseUp () 5. Διαγράψτε τις προηγούμενες επιλογές
Στο ποντικιού γεγονός, εμείς εκτελέστε κάποιο καθαρισμό, δηλ. διαγράψτε οποιαδήποτε προηγούμενη επιλογή και το μενού δράσης που ανήκει.
λειτουργία onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ('# shareBox'); αν (shareBox! == null) shareBox.remove (); ο getSelection () η μέθοδος επιστρέφει α Επιλογή αντικείμενο που αντιπροσωπεύει τις περιοχές του κειμένου που έχουν επιλεγεί από το χρήστη και το removeAllRange () μέθοδοςκαταργεί όλες τις περιοχές από το ίδιο Επιλογή αντικείμενο, έτσι εκκαθάριση οποιασδήποτε προηγούμενης επιλογής.
6. Εμφανίστε το μενού δράσης
Είναι κατά τη διάρκεια του ποντίκι περίπτωση, όταν το κάνουμε επιβεβαιώστε εάν έγινε μια επιλογή κειμένου και να λάβουν περαιτέρω μέτρα.
λειτουργία onMouseUp () var sel = document.getSelection (), txt = sel.toString (); αν (txt! == "") var περιοχή = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "article" || range.startContainer.parentElement.localName === "άρθρο") // επιλέχθηκε κάποιο κείμενο στο άρθρο
Αποκτήστε την επιλεγμένη σειρά κειμένου καλώντας το toString () μέθοδος του Επιλογή αντικείμενο. Αν το επιλεγμένο κείμενο δεν είναι κενό, προχωρήστε και πάρτε την πρώτη σειρά από το Επιλογή αντικείμενο.
Εύρος είναι το επιλεγμένο τμήμα του εγγράφου. Συνήθως, οι χρήστες θα κάνουν ένα ενιαία επιλογή μόνο, όχι πολλαπλάσια (πατώντας το πλήκτρο ctrl / cmd), οπότε μόλις φτάσετε το αντικείμενο της πρώτης περιοχής (στο δείκτη 0) από την επιλογή χρησιμοποιώντας getRangeAt (0).
Μόλις λάβετε το εύρος, δείτε εάν η επιλογή ξεκίνησε από ένα μέρος που είναι μέσα στο άρθρο. ο startContainer η ιδιότητα της περιοχής επιστρέφει τον κόμβο DOM από όπου ξεκίνησε η επιλογή.
Μερικές φορές (όταν εσύ επιλέξτε μέσα σε μια παράγραφο), η αξία του είναι απλά κόμβο κειμένου, στην περίπτωση αυτή γονικό στοιχείο θα είναι και τον γονέα του στοιχείο θα είναι (στο δείγμα κώδικα σε αυτό το post).
Άλλες φορές, όταν επιλέγετε σε πολλαπλές παραγράφους, ο startContainer θα είναι και ο γονικός κόμβος θα είναι . Εξ ου και το δύο συγκρίσεις στο δεύτερο αν κατάσταση στον παραπάνω κώδικα.
Μόλις το αν προϋπόθεση περάσει, ήρθε η ώρα να φέρε το μενού ενέργειας από το πρότυπο και προσθέστε το στο έγγραφο. Τοποθετήστε τον παρακάτω κώδικα μέσα στο δεύτερο αν δήλωση.
document.body.insertBefore (document.importNode (temp.content, true), temp))).
ο importNode () μέθοδος επιστρέφει κόμβους από εξωτερικά έγγραφα (στην περίπτωσή μας, κόμβοι από το ). Όταν καλείται με τη δεύτερη παράμετρο (αληθής), το εισαγόμενο στοιχείο / κόμβος θα έρχονται με τα παιδικά του στοιχεία.
Μπορείτε να εισάγετε #shareBox οπουδήποτε στο σώμα του εγγράφου, Το έχω προσθέσει πριν από το στοιχείο του προτύπου.
7. Τοποθετήστε το μενού δράσης
Θέλουμε να τοποθετήσουμε το μενού δράσης ακριβώς επάνω & & στο μέσο της επιλεγμένης περιοχής. Να το πράξουν, πάρτε τις τιμές ορθογωνίου της επιλεγμένης περιοχής χρησιμοποιώντας το getBoundingClientRect () που επιστρέφει το μέγεθος και τη θέση ενός στοιχείου.
Στη συνέχεια, ενημερώστε το μπλουζα και αριστερά τιμές της #shareBox με βάση τις τιμές ορθογωνίου. Στους υπολογισμούς του νέου μπλουζα και αριστερά αξίες, τις οποίες χρησιμοποίησα ES6 πρότυπα literals.
var rect = range.getBoundingClientRect (); var shareBox = document.querySelector ('# shareBox'); shareBox.style.top = 'Υπολογισμός ($ rect.top px - 38px)'; shareBox.style.left = 'calc ($ rect.left px + calc ($ rect.width px / 2) - 30px)'; 8. Προσθέστε λειτουργικότητα
Τώρα που προσθέσαμε το μενού δράσης κοντά στο επιλεγμένο κείμενο, ήρθε η ώρα να κάνουμε το επιλεγμένο κείμενο διαθέσιμες για τις επιλογές μενού ώστε να μπορέσουμε να προβούμε σε κάποια ενέργεια σε αυτό.
Εκχωρήστε το επιλεγμένο κείμενο σε ένα προσαρμοσμένη ιδιότητα του κουμπιού κοινής χρήσης που ονομάζεται 'shareTxt' και προσθέστε a ποντικιού ακρόαση συμβάντος στο κουμπί.
var shareBtn = shareBox.querySelector ('κουμπί'); shareBtn ['shareTxt'] = txt; shareBtn.addEventListener ('mousedown', onShareClick, true); ο αληθής παράμετρος του addEventListener () εμποδίζει το ποντικιού από την εμφάνιση φυσαλίδων.
μεσα στην onShareClick () χειριστής συμβάντων, εμείς εισαγάγετε το επιλεγμένο κείμενο σε ένα τιτίβισμα με την πρόσβαση στο shareTxt ιδιοκτησίας του κουμπιού.
λειτουργία onShareClick () window.open ('https://twitter.com/intent/tweet?text=$ this.shareTxt')? this.remove (); document.getSelection (). removeAllRanges () Μόλις το πατήστε το κουμπί, κάνει ό, τι πρέπει να κάνει, στη συνέχεια αφαιρέστε τον εαυτό του από τη σελίδα. Θα είναι επίσης διαγράψτε οποιαδήποτε επιλογή στο έγγραφο.
Κωδικός πηγής & επίδειξη
Στο demo του Codepen παρακάτω, μπορείτε δοκιμή πώς λειτουργεί το μενού δράσης. Μπορείτε επίσης να βρείτε το πλήρες πηγαίο κώδικα στο Github repo.
