Αυτό το άρθρο θα παρουσιάσει την επεξήγηση εργαλείου χρησιμοποιώντας απλή JavaScript.
Πώς να δημιουργήσετε μια απλή επεξήγηση εργαλείου JavaScript;
Για να δημιουργήσετε μια συμβουλή εργαλείου χρησιμοποιώντας JavaScript, χρησιμοποιήστε το ' το ποντίκι ' και ' ποντίκι ” εκδηλώσεις. Ακολουθήστε τα παρακάτω παραδείγματα για καλύτερη κατανόηση.
Παράδειγμα 1: Επεξήγηση εργαλείου με χρήση JavaScript
Στο συγκεκριμένο παράδειγμα, θα δημιουργήσουμε μια επεξήγηση εργαλείου σε καθαρή JavaScript και θα διαμορφώσουμε επίσης την επεξήγηση εργαλείου χρησιμοποιώντας το ' στυλ ' Χαρακτηριστικό.
Αρχικά, δημιουργήστε ένα κείμενο όπου θέλουμε να εμφανίσουμε μια επεξήγηση εργαλείου στο συμβάν με το ποντίκι:
< h5 id = 'κείμενο' > Linux h5 >
Λάβετε το κείμενο όπου θα εμφανιστεί η επεξήγηση εργαλείου χρησιμοποιώντας το ' getElementById() 'μέθοδος:
όπου lh = έγγραφο. getElementById ( 'κείμενο' ) ;
Τώρα, καλέστε το ' addEventListener() ' μέθοδος περνώντας το ' το ποντίκι ” συμβάν και μια συνάρτηση() ως παράμετρος. Στην καθορισμένη συνάρτηση, πρώτα, θα δημιουργήσουμε μια επεξήγηση εργαλείου δημιουργώντας ένα « div ', ορίστε το κείμενο που θα εμφανίζεται στο δείκτη του ποντικιού και ορίστε κάποιο στυλ της επεξήγησης εργαλείου χρησιμοποιώντας το ' στυλ ' Χαρακτηριστικό. Τέλος, προσθέστε την επεξήγηση εργαλείου χρησιμοποιώντας το ' appendChild() 'μέθοδος:
lh. addEventListener ( 'ποντίκι πάνω' , λειτουργία ( ) {ήταν συμβουλή εργαλείου = έγγραφο. ΔημιουργίαΣτοιχείου ( 'div' ) ;
συμβουλή εργαλείου. innerHTML = 'Ένας καλύτερος ιστότοπος για εκμάθηση δεξιοτήτων' ;
συμβουλή εργαλείου. στυλ . ορατότητα = 'ορατός' ;
συμβουλή εργαλείου. στυλ . θέση = 'απόλυτος' ;
συμβουλή εργαλείου. στυλ . χρώμα του φόντου = 'rgb(107, 101, 101)' ;
συμβουλή εργαλείου. στυλ . υλικό παραγεμίσματος = '5 px' ;
συμβουλή εργαλείου. στυλ . συνοριακή ακτίνα = '3 px' ;
συμβουλή εργαλείου. στυλ . χρώμα = 'άσπρο' ;
συμβουλή εργαλείου. στυλ . αριστερά = 'πενήντα%' ;
συμβουλή εργαλείου. στυλ . πλάτος = '200px' ;
έγγραφο. σώμα . appendChild ( συμβουλή εργαλείου ) ;
} ) ;
Εδώ, χρησιμοποιήστε το ' ποντίκι συμβάν που θα αφαιρέσει την επεξήγηση εργαλείου ενώ ο κέρσορας θα απομακρύνεται από το κείμενο:
lh. addEventListener ( 'έξω το ποντίκι' , λειτουργία ( ) {
έγγραφο. σώμα . αφαιρέστε το παιδί ( συμβουλή εργαλείου ) ;
} ) ;
Παραγωγή
Παράδειγμα 2: Επεξήγηση εργαλείου με χρήση JavaScript με CSS
Μπορείτε επίσης να δημιουργήσετε μια επεξήγηση εργαλείου σε JavaScript με CSS.
Για να το κάνετε αυτό, δημιουργήστε μια περιοχή για να εμφανιστεί το κείμενο της συμβουλής εργαλείου χρησιμοποιώντας την ετικέτα και εκχωρήστε ένα αναγνωριστικό ' #myTooltip ”:
< αναγνωριστικό εύρους = 'myTooltip' σπιθαμή >Λάβετε τις αναφορές του κειμένου και την επεξήγηση εργαλείου χρησιμοποιώντας το ' getElementById() 'μέθοδος:
όπου lh = έγγραφο. getElementById ( 'κείμενο' ) ;ήταν συμβουλή εργαλείου = έγγραφο. getElementById ( 'myTooltip' ) ;
Καλέστε την επεξήγηση εργαλείου στο ' το ποντίκι ' συμβάν ρυθμίζοντας το κείμενο στη συνάρτηση χρησιμοποιώντας το ' innerHTML ” ιδιοκτησία:
lh. addEventListener ( 'ποντίκι πάνω' , λειτουργία ( ) {συμβουλή εργαλείου. στυλ . ορατότητα = 'ορατός' ;
συμβουλή εργαλείου. innerHTML = 'Ένας καλύτερος ιστότοπος για εκμάθηση δεξιοτήτων' ;
} ) ;
Απόκρυψη της επεξήγησης εργαλείου στο ' ποντίκι ' συμβάν ορίζοντας το ' ορατότητα ' ιδιοκτησία σε ' κρυμμένος ”:
lh. addEventListener ( 'έξω το ποντίκι' , λειτουργία ( ) {συμβουλή εργαλείου. στυλ . ορατότητα = 'κρυμμένος' ;
} ) ;
Δημιουργήστε ένα αναγνωριστικό ' #myTooltip ” στο φύλλο στυλ που θα διαμορφώσει την επεξήγηση εργαλείου:
#myTooltip {ορατότητα : κρυμμένος ;
πλάτος : 200 px ;
Με - δείκτης : 1 ;
Ιστορικό - χρώμα : rgb ( 107 , 101 , 101 ) ;
κείμενο - ευθυγραμμίζω : κέντρο ;
χρώμα : άσπρο ;
υλικό παραγεμίσματος : 5 εικονοστοιχεία 0 ;
σύνορο - ακτίνα κύκλου : 3 εικονοστοιχεία ;
αριστερά : πενήντα %;
}
Όπως μπορείτε να δείτε ότι η επεξήγηση εργαλείου έχει εφαρμοστεί με επιτυχία στο κείμενο:
Πώς να δημιουργήσετε επεξήγηση εργαλείου χρησιμοποιώντας HTML και CSS;
Μπορείτε επίσης να δημιουργήσετε μια επεξήγηση εργαλείου χωρίς JavaScript. Στο αρχείο HTML, δημιουργήστε το κείμενο ' Linux ”, όπου η επεξήγηση εργαλείου θα εμφανίζεται ενώ τοποθετείτε το δείκτη του ποντικιού πάνω της. Δημιουργήστε στοιχείο για να ορίσετε το κείμενο για την επεξήγηση εργαλείου μέσα στην ετικέτα επικεφαλίδα/κείμενο :
Linux
< σπιθαμή τάξη = 'εργαλειοθήκη' >
Μια πλατφόρμα για την εκμάθηση δεξιοτήτων
σπιθαμή >
h5 >
Στο φύλλο στυλ, δημιουργήστε μια κλάση ή ένα αναγνωριστικό που θα εκχωρηθεί στα στοιχεία HTML. Εδώ, θα δημιουργήσουμε μια τάξη ' συμβουλή εργαλείου ' που αντιστοιχίζεται στην επικεφαλίδα:
. συμβουλή εργαλείου {θέση : συγγενής ;
απεικόνιση : στη γραμμή - ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ;
}
Ορίστε μια τάξη ' επεξήγηση εργαλείου ' για να διαμορφώσετε το κείμενο της επεξήγησης εργαλείου και να του αντιστοιχίσετε το HTML ' Ετικέτα ':
. επεξήγηση εργαλείου {ορατότητα : κρυμμένος ;
πλάτος : 150 εικονοστοιχεία ;
Ιστορικό - χρώμα : rgb ( 107 , 101 , 101 ) ;
χρώμα : #fff ;
κείμενο - ευθυγραμμίζω : κέντρο ;
υλικό παραγεμίσματος : 5 εικονοστοιχεία 0 ;
σύνορο - ακτίνα κύκλου : 3 εικονοστοιχεία ;
θέση : απόλυτος ;
Με - δείκτης : 1 ;
κάτω μέρος : 125 %;
αριστερά : πενήντα %;
περιθώριο - αριστερά : - 60 εικονοστοιχεία ;
αδιαφάνεια : 0 ;
μετάβαση : αδιαφάνεια 0,3s ;
}
Σετ ' φτερουγίζω 'εφέ με το ' συμβουλή εργαλείου ” τάξη για εμφάνιση της επεξήγησης εργαλείου στο εφέ αιώρησης:
. συμβουλή εργαλείου : αιωρούνται . επεξήγηση εργαλείου {ορατότητα : ορατός ;
αδιαφάνεια : 1 ;
}
Παραγωγή
Έχουμε συγκεντρώσει όλες τις απαραίτητες οδηγίες σχετικά με την απλή επεξήγηση εργαλείου JavaScript.
συμπέρασμα
Για να δημιουργήσετε μια συμβουλή εργαλείου χρησιμοποιώντας JavaScript, χρησιμοποιήστε το ' το ποντίκι ' και ' ποντίκι ' συμβάντα, που εμφανίζει την επεξήγηση εργαλείου κατά την τοποθέτηση του δείκτη του ποντικιού στο στοιχείο και την αποκρύπτει όταν ενεργοποιείται το συμβάν εξόδου του ποντικιού. Για το στυλ της επεξήγησης εργαλείου, χρησιμοποιήστε το ' στυλ ” χαρακτηριστικό σε JavaScript. Σε αυτό το άρθρο, παρουσιάσαμε τα καλύτερα δυνατά παραδείγματα δημιουργίας επεξήγησης εργαλείου χρησιμοποιώντας απλή JavaScript, JavaScript με CSS και επεξήγηση εργαλείου χωρίς JavaScript.