Οι γκουρού της διάταξης είναι απίθανο να βρουν κάτι νέο για τον εαυτό τους σε αυτήν την ανάρτηση. Αυτή η ανάρτηση απευθύνεται περισσότερο σε αρχάριους σχεδιαστές διάταξης που, όπως εγώ, αντιμετώπισαν προβλήματα με τη δημιουργία και το στυλ των καθολικών συμβουλών εργαλείων.
Πρόσφατα, όταν έφτιαχνα ένα μικρό blog, ήρθα αντιμέτωπος με το καθήκον να φτιάξω κομψές, αλλά ταυτόχρονα απλές συμβουλές για εργαλεία. Αφού δοκίμασα διαφορετικούς τρόπους δημιουργίας ξεχωριστών κοντέινερ div για συμβουλές εργαλείων ή δημιουργία επεξηγήσεων εργαλείων με καθαρό CSS, βρήκα μια καθολική λύση που δεν θα γεμίζει τον κώδικα, θα είναι συμβατή με προγράμματα περιήγησης και ταυτόχρονα θα είναι πολύ απλή στην εφαρμογή.
Όποιος ενδιαφέρεται για τη δική μου μέθοδο επίλυσης αυτού του απλού προβλήματος, ρωτάω under cat.
Σύνδεσμος συμβουλών εργαλείων
Όπως ίσως έχετε ήδη παρατηρήσει από την καταχώριση, χρησιμοποιώ τον προεπεξεργαστή LESS css.
Συμπεριλάβαμε στυλ και σενάρια CSS σε ξεχωριστά αρχεία. Έχουμε επίσης έναν σύνδεσμο και ένα μπλοκ div, το οποίο θα είναι το κοντέινερ για την επεξήγηση εργαλείου.
Η προδιαγραφή HTML5 επιτρέπει τη χρήση προσαρμοσμένων χαρακτηριστικών του τύπου data-atribute, τα οποία μπορούν να αποθηκεύσουν ορισμένες πληροφορίες σχετικά με ένα στοιχείο ή μπλοκ. Είναι στα χαρακτηριστικά δεδομένων που θα αποθηκεύσουμε το κείμενο των συμβουλών εργαλείων.
Σύνδεσμος
Για αποθήκευση χρησιμοποιώ το χαρακτηριστικό data-tooltip.
Τελειώσαμε με την HTML - μπορούμε να προχωρήσουμε σε στυλ CSS Χρησιμοποιώ τη βιβλιοθήκη LESS Elements και την προτείνω σε όλους, επομένως θα γράψω μερικές ιδιότητες χρησιμοποιώντας αυτό το πλαίσιο.
@import "css/elements.less"; #tooltip ( z-index: 9999; position: absolute; display: none; top:0px; left:0px; background-color: #000; padding: 5px 10px 5px 10px; color: white; .opacity(0.5); . στρογγυλεμένο (5 εικονοστοιχεία)
Από την καταχώριση είναι ξεκάθαρο ότι στην πρώτη γραμμή συνδέουμε το LE, ορίζουμε το μπλοκ div#tooltip σε απόλυτη θέση και το αποκρύπτουμε. Στη συνέχεια δίνουμε στο μπλοκ ένα χρώμα φόντου και ένα χρώμα κειμένου, στρογγυλοποιούμε τις γωνίες (5 εικονοστοιχεία) και ορίζουμε την τιμή διαφάνειας στο 50%.
$.jQuery(document).ready(function() ( $("").mousemove(function (eventObject) ( $data_tooltip = $(this).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "top" : eventObject.pageY + 5, "left" : eventObject.pageX + 5 )) .show( )).mouseout(function () ( $("#tooltip.) ").hide() .text("") .css(( "top" : 0, "left" : 0 )); )); ));// Έτοιμο τέλος.
Τώρα προσθέτουμε όλα τα στοιχεία με το χαρακτηριστικό data-tooltip στην επιλογή και, όταν τοποθετούμε το δείκτη του ποντικιού πάνω από το επιθυμητό στοιχείο με το ποντίκι, παίρνουμε την τιμή συμβουλής εργαλείου και την αποθηκεύουμε σε μια μεταβλητή. Στη συνέχεια, προσθέτουμε το κείμενο υπόδειξης στο μπλοκ #tooltip, του δίνουμε τις συντεταγμένες του δρομέα από την άκρη της σελίδας + 5 px και τέλος εμφανίζουμε το μπλοκ με την επεξήγηση εργαλείου στη σωστή θέση. Αφού το ποντίκι φύγει από το στοιχείο, κρύβουμε το μπλοκ #tooltip, διαγράφουμε τα περιεχόμενά του και το επιστρέφουμε στο 0;0;.
Αυτό είναι όλο!
Ως αποτέλεσμα, θα έχουμε κάτι σαν αυτό: Επίδειξη
Χάρη σε αυτό το απλό σενάριο, όλα τα στοιχεία της σελίδας που έχουν το χαρακτηριστικό data-tooltip θα λάβουν μια επεξήγηση εργαλείου.
Σας ευχαριστώ για την προσοχή σας!
Η παροχή πρόσθετων πληροφοριών σχετικά με δυνητικά πολύπλοκα στοιχεία διεπαφής χρήστη είναι ένα πολύ σημαντικό μέρος της δουλειάς ενός σχεδιαστή ιστοσελίδων για την ανάπτυξη ενός φιλικού προς τον χρήστη και προσβάσιμου ιστότοπου.
Ένας συνήθως χρησιμοποιούμενος μηχανισμός για την εμφάνιση πρόσθετων πληροφοριών πέρα από αυτό που είναι ορατό στη σελίδα είναι οι συμβουλές εργαλείων (στοιχεία σχεδίασης για την εμφάνιση υποδείξεων σχετικά με ορισμένα στοιχεία στην οθόνη).
Παρόλο που υπάρχουν πολλές καινοτόμες λύσεις που χρησιμοποιούν CSS και JavaScript (με ή χωρίς τη χρήση ενός πλαισίου JavaScript όπως το jQuery), μερικές φορές είναι χρήσιμο να δούμε πώς οι νέες τεχνολογίες ανακινούν τις μακροχρόνιες τεχνικές.
Αυτό το σεμινάριο θα σας δείξει πώς μπορείτε να δημιουργήσετε εκπληκτικές συμβουλές εργαλείων μεταξύ προγραμμάτων περιήγησης χρησιμοποιώντας μόνο CSS.
 |
 |
Όπου χρειάζεται να εξηγήσετε μια συντομογραφία ή αρκτικόλεξο, να εξηγήσετε τη σημασία μιας λέξης ή να δώσετε πρόσθετες πληροφορίες για κάτι, οι συμβουλές εργαλείων είναι μια απλή αλλά αποτελεσματική λύση.
Από το μικρό κίτρινο μπλοκ κειμένου που εμφανίζεται πάνω από ένα στοιχείο όπως μια εικόνα και εμφανίζει τα περιεχόμενα του χαρακτηριστικού τίτλου (ή του χαρακτηριστικού alt, εάν ατυχείτε να χρησιμοποιείτε τον Internet Explorer) έως εξελιγμένες λύσεις που βασίζονται σε σενάρια χρησιμοποιώντας συμβουλές εργαλείων, Οι συμβουλές εργαλείων είναι ένα φανταστικό εργαλείο που φαίνεται να έχει μικρή δημοτικότητα στην κοινότητα του σχεδιασμού.
Τα περισσότερα προγράμματα περιήγησης έχουν προεπιλεγμένα στυλ για συμβουλές εργαλείων, αν και δεν φαίνονται πολύ όμορφα.
Ενώ τα ταχέως εξελισσόμενα πρότυπα με νέες τεχνικές αρχίζουν να υποστηρίζονται όλο και καλύτερα από νέα προγράμματα περιήγησης, η άνοδος του CSS μας επιτρέπει επίσης να κάνουμε συμβουλές εργαλείων (που χρησιμεύουν ως αντικατάσταση για βαρετές προεπιλογές προγράμματος περιήγησης όπως το παραπάνω) σε ένα νέο επίπεδο λεπτομέρεια και σχέδιο.
Εάν έχετε χρησιμοποιήσει στο παρελθόν λύσεις που βασίζονται σε jQuery, σίγουρα θα σημειώσετε ότι η JavaScript μπορεί να κάνει πολλά πράγματα που το CSS δεν μπορεί (όπως να καθυστερήσει να εξαφανιστεί η συμβουλή εργαλείου). Αλλά η επισήμανση και το στυλ μπορούν να γίνουν με το CSS, το οποίο βελτιώνει το σχέδιό σας και εμπνέει άλλα υπέροχα σχέδια που ξεπερνούν τις συμβουλές εργαλείων.
Σε αυτό το σεμινάριο θα δημιουργήσουμε συμβουλές εργαλείων χρησιμοποιώντας καθαρό CSS.
Αυτό σημαίνει ότι θα λειτουργούν σε προγράμματα περιήγησης που δεν υποστηρίζουν CSS3 (όπως ο Internet Explorer 8 και παλαιότερα) - δεν θα φαίνονται τόσο καλά σε αυτά όσο σε νεότερα προγράμματα περιήγησης.
Η εμφάνιση εφέ όπως χρώματα, γραμματοσειρές, εικόνες και πλαίσια συμβουλών εργαλείων θα εξαρτηθεί από το τι χρησιμοποιείται στον υπολογιστή του τελικού χρήστη (πρόγραμμα περιήγησης, εγκατεστημένες γραμματοσειρές ή αντίθεση οθόνης).
Επεκτάσεις CSS3Χρησιμοποιώντας απλές αλλά αποτελεσματικές επεκτάσεις, όπως οι ιδιότητες ακτίνας περιγράμματος και σκιάς πλαισίου, μπορείτε να δώσετε σε ένα απλό ορθογώνιο μηνύματος μπαλονιού μια νέα και όμορφη εμφάνιση.
Τι έχουμε κάτω από την κουκούλα μας;Ας ξεκινήσουμε με τον κώδικα HTML για το παράδειγμά μας.
διαφορετικών τύπων συμβουλές εργαλείωνΓια να σας δώσουμε αρκετές ιδέες για τα δικά σας έργα, θα φτιάξουμε πέντε διαφορετικούς τύπους συμβουλές εργαλείων.
Καθένα από αυτά μοιάζει πολύ με τα άλλα προκειμένου να τυποποιηθεί η έξοδος της οθόνης. Στη συνέχεια, όμως, μπορείτε να πειραματιστείτε μαζί τους για να τα μελετήσετε λεπτομερώς και να αλλάξετε την εμφάνιση.
Αυτός ο μηχανισμός θα πρέπει να λειτουργεί σε όλα τα προγράμματα περιήγησης, ωστόσο, εάν χρειάζεστε, μπορείτε να τον αλλάξετε σύμφωνα με τις προτιμήσεις σας.
Βασική σήμανσηΣτον παρακάτω κώδικα, χρησιμοποιούμε το γενικό πρότυπο XHTML 1.0 με ένα κανονικό στοιχείο.
Εφόσον χρησιμοποιούμε CSS για να δημιουργήσουμε τα στοιχεία μας, για λόγους μάθησης το CSS ενσωματώνεται στο έγγραφο χρησιμοποιώντας το .
Μπορείτε επίσης να προσθέσετε κώδικα jQuery ή JavaScript για να βελτιώσετε τα εφέ και τη λειτουργικότητα αν θέλετε!
Συμβουλές εργαλείων σήμανσης HTML Ένα παράδειγμα συμβουλών εργαλείων που έγιναν με CSS!Περάστε το ποντίκι σας πάνω από το κείμενο για να δείτε: κλασική υπόδειξη, κρίσιμο μήνυμα 
Κρίσιμη ανάρτησηΑυτό είναι απλώς ένα παράδειγμα του τρόπου δημιουργίας συμβουλών εργαλείων χρησιμοποιώντας CSS!, βοήθεια 
HelpΑυτό είναι απλώς ένα παράδειγμα του τρόπου δημιουργίας συμβουλών εργαλείων χρησιμοποιώντας CSS!, πληροφορίες 
InfoThis είναι απλώς ένα παράδειγμα του τρόπου δημιουργίας συμβουλών εργαλείων χρησιμοποιώντας CSS! και προειδοποίηση 
Προειδοποίηση: Αυτό είναι απλώς ένα παράδειγμα του τρόπου δημιουργίας συμβουλών εργαλείων χρησιμοποιώντας CSS!.
Αυτό είναι απλώς ένα παράδειγμα του τρόπου δημιουργίας συμβουλών εργαλείων χρησιμοποιώντας CSS!
Ο κώδικας χρησιμοποιεί ένα στοιχείο (τίποτα ιδιαίτερο που σχετίζεται με αυτό) και παραγράφους (
) για κείμενο που περιέχει στοιχεία συνδέσμου (για την οποία έχει οριστεί η κλάση "tooltip").
Γιατί χρησιμοποιείται μια ετικέτα για συμβουλές εργαλείων; ?Ο λόγος που χρησιμοποιούμε την ετικέτα a αντί για abbr , dfn ή span είναι ότι ο IE6 έχει κακή υποστήριξη για τον ψευδο-επιλογέα:hover για στοιχεία εκτός του a .
Εάν δεν σκοπεύετε να υποστηρίξετε τον IE6, μπορείτε να χρησιμοποιήσετε διαφορετική ετικέτα.
Κάθε στοιχείο span στο παράδειγμα έχει οριστεί στην κατηγορία classic (για μια κανονική επεξήγηση εργαλείου) ή προσαρμοσμένο (με κρίσιμο , βοήθεια , πληροφορίες ή προειδοποίηση για να ταιριάζει με το συνδυασμό χρωμάτων που χρησιμοποιείται).
Αυτή η χρήση του στυλ έχει επίσης μερικά μπόνους με τη μορφή ενός στοιχείου em (που ορίζει τον τίτλο της επεξήγησης εργαλείου) και μιας εικόνας (η οποία χρησιμοποιείται ως εικονίδιο στην επεξήγηση εργαλείου, μπορείτε να χρησιμοποιήσετε τις δικές σας εικόνες).
CSSΈχουμε γράψει τον κώδικα HTML για τη σελίδα και ήρθε η ώρα να κάνουμε τις συμβουλές εργαλείων να κάνουν τη δουλειά τους.
Ο παρακάτω κώδικας, ο οποίος προστίθεται σε μια ενότητα της σελίδας, ορίζει κάθε σύνδεσμο που περιέχει την επεξήγηση εργαλείου σε ένα ωραίο στυλ με μια υπογράμμιση με διακεκομμένη γραμμή (για να τον διαφοροποιεί από έναν κανονικό σύνδεσμο, ο οποίος έχει μια συμπαγή υπογράμμιση γραμμής) και ορίζει τον κέρσορα με ερωτηματικό (και για οπτική διαφοροποίηση).
Αφαιρεί επίσης την υπογράμμιση και ορίζει το χρώμα (έτσι το στοιχείο μοιάζει λιγότερο με κανονικό σύνδεσμο).
Το δεύτερο μέρος του κώδικα απλώς κρύβει την επεξήγηση εργαλείου μέχρι να χρειαστεί.
Όλα είναι πολύ απλά!
Στυλ CSS για class.tooltip .tooltip ( border-bottom: 1px διάστικτη #000000; χρώμα: #000000; περίγραμμα: κανένα; δρομέας: βοήθεια; κείμενο-διακόσμηση: κανένα; θέση: σχετική; ) .διάστημα επεξήγησης εργαλείου (περιθώριο-αριστερό: -999em θέση: απόλυτη)Το περιεχόμενο επεξήγησης εργαλείου αφαιρείται από την προβολή χρησιμοποιώντας μια ιδιότητα αρνητικού περιθωρίου αντί για εμφάνιση: κανένα ή ορατότητα: κρυφό επειδή ορισμένα προγράμματα ανάγνωσης οθόνης αγνοούν αυτές τις ιδιότητες.
Στυλ CSS για συμβουλές εργαλείωνΣύντομα θα κάνουμε τις συμβουλές εργαλείων να λειτουργούν με τον ίδιο τρόπο σε διαφορετικά προγράμματα περιήγησης. Τώρα ας προσθέσουμε μερικές γραμμές κώδικα CSS.
Προσθέτοντας το ακόλουθο κομμάτι κώδικα, θα εμφανίσουμε συμβουλές εργαλείων στην οθόνη, αν και θα φαίνονται απλές και θα είναι δύσκολο να διαχωριστούν οπτικά από το υπόλοιπο κείμενο.
CSS για εμφάνιση επεξήγησης εργαλείου .tooltip:hover span ( γραμματοσειρά-οικογένεια: Calibri, Tahoma, Geneva, sans-serif; θέση: απόλυτη; αριστερά: 1em; επάνω: 2em; z-index: 99; περιθώριο-αριστερό: 0; πλάτος: 250 pixel; ;μέγεθος γραμματοσειράς: 1,2em, padding: 0,2em 0,6em 0; ( φόντο: διαφανές; ) Απαιτείται γραμμή * htmlΊσως αναρωτιέστε γιατί περιλαμβάνεται η τελευταία γραμμή στον παραπάνω κώδικα; Ορίζει τη διαφάνεια για το φόντο του συνδέσμου. Κατά τη δοκιμή συμβουλών εργαλείων, ανακάλυψα ένα περίεργο εφέ στον IE6 που δεν μπορούσε να αφαιρεθεί όσο υπήρχε το φόντο του συνδέσμου!
Ο παραπάνω κώδικας διασφαλίζει τη λειτουργικότητα των συμβουλών εργαλείων. Εμφανίζονται στην οθόνη, αλλά είναι αρκετά δύσκολο να διαχωριστούν από το γενικό κείμενο. Δεν υπάρχουν συνδυασμοί χρωμάτων που κάνουν το κείμενο συμβουλής εργαλείου να ξεχωρίζει στη σελίδα.
Ορίστε το συνδυασμό χρωμάτων για συμβουλές εργαλείων/Ο ακόλουθος κώδικας ορίζει έναν συνδυασμό χρωμάτων για καθένα από τα πέντε στυλ συμβουλών εργαλείων.
Μετά την αλλαγή του κώδικα της σελίδας και την ενημέρωση του στο πρόγραμμα περιήγησης, θα εμφανιστούν συμβουλές εργαλείων όταν τοποθετείτε το ποντίκι πάνω από τον σύνδεσμο σχεδόν το ίδιο σε όλα τα προγράμματα περιήγησης.
Κωδικός CSS για το συνδυασμό χρωμάτων .classic ( φόντο: #FFFFAA; περίγραμμα: 1px συμπαγές #FFAD33; ) .critical ( φόντο: #FFCCAA; περίγραμμα: 1px συμπαγές #FF3334; ) .help ( φόντο: #9FDAEE; περίγραμμα: 1px συμπαγές # 2BB0D7;Ο κώδικας CSS είναι πολύ απλός, αλλά δίνει υπέροχη εμφάνιση στις συμβουλές εργαλείων και κάνει τη δουλειά του παντού. Ο συνδυασμός χρωμάτων μπορεί να αλλάξει κατά την κρίση σας.
Μερικές πινελιές CSS3 για προηγμένη εμφάνιση συμβουλών εργαλείωνΠριν ολοκληρώσουμε αυτό το σεμινάριο, θα προσθέσουμε μερικές γραμμές κώδικα CSS3 για να προσθέσουμε οπτικά εφέ στις συμβουλές εργαλείων μας. Ας ορίσουμε στρογγυλεμένες γωνίες χρησιμοποιώντας την ιδιότητα border-radius και προσθέτουμε κάποια διάσταση χρησιμοποιώντας την ιδιότητα box-shadow.
Δεδομένου ότι καμία από αυτές τις ιδιότητες δεν υποστηρίζεται παγκοσμίως, θα λειτουργούν μόνο σε ορισμένες από τις πιο πρόσφατες εκδόσεις του προγράμματος περιήγησης. Αλλά όπου λειτουργούν, οι συμβουλές εργαλείων θα φαίνονται κομψές και σέξι!
Ας προσθέσουμε τον παρακάτω κώδικα στο selector.tooltip:hover span και ας ανανεώσουμε τη σελίδα.
Τα οπτικά εφέ για περίγραμμα, σκίαση και διαφάνεια ανυψώνουν την επεξήγηση εργαλείου πάνω από το κείμενο της σελίδας και κάνουν τις πληροφορίες αντίθετες και ευανάγνωστες.
Μπορεί να παρατηρήσετε ότι δεν χρησιμοποιούνται μόνο οι επίσημες ιδιότητες CSS3, αλλά και επεκτάσεις για το Mozilla και το WebKit.
Πρόσθετες ιδιότητες CSS για νέα προγράμματα περιήγησης border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0,1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0,1);
Αυτό το σεμινάριο δείχνει ότι η βελτίωση της διεπαφής δεν απαιτεί μεγάλη προσπάθεια. Επιπλέον, αξίζει να επανεξεταστεί η εμπειρία χρήσης CSS, η οποία μπορεί να είναι χρήσιμη για τον καθορισμό ενός νέου επιπέδου διαδραστικότητας για μια διαδικτυακή εφαρμογή.
Σε αυτό το σεμινάριο θα δημιουργήσουμε μια επεξήγηση εργαλείου όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα εικονίδιο χρησιμοποιώντας καθαρό CSS. Η ίδια ακριβώς αρχή μπορεί να εφαρμοστεί σε μια εικόνα. Μεταβείτε για να δείτε τη σελίδα επίδειξης.
Σήμανση HTML
Ας δημιουργήσουμε μια λίστα με πέντε στοιχεία. Μέσα σε κάθε στοιχείο θα τοποθετήσουμε μια ετικέτα i με το επιθυμητό εικονίδιο, αντιγράφοντας απλώς τον κώδικα για ένα συγκεκριμένο εικονίδιο από τον ιστότοπο Font Awesome.
Κάτω από την ετικέτα εικονιδίου θα γράψουμε μια ετικέτα span με το αντίστοιχο σύντομο κείμενο υπόδειξης.
Άνετα δωμάτια
Πιστωτικές κάρτες
Ντους στο δωμάτιο
Περιλαμβάνεται το πρωινό
Τα κατοικίδια είναι εντάξει
Μετά από αυτό, συμπεριλαμβάνουμε το αρχείο στυλ - style.css. Αλλάξτε τη θέση των εικονιδίων από κάθετη σε οριζόντια.
Για να γίνει αυτό, εκχωρούμε την τιμή - flex στο γονικό κοντέινερ.
Ul(
οθόνη: flex;
}
Χρωματίζουμε το φόντο κάτω από τα εικονίδια και το χρώμα των ίδιων των εικονιδίων.
Ulli (
φόντο: #cecfcf;
χρώμα: #fff;
}
Το μέγεθος του εικονιδίου ρυθμίζεται χρησιμοποιώντας το μέγεθος γραμματοσειράς.
Ulli (
μέγεθος γραμματοσειράς: 40 px;
}
Η εμφάνιση της σειράς εικονιδίων έχει ήδη διαμορφωθεί.
Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα εικονίδιο, το χρώμα του εικονιδίου και η εμφάνιση του δρομέα αλλάζουν.
Ul li:hover (
χρώμα: #03a9f4;
δρομέας: δείκτης;
}
Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από το εικονίδιο, μια επεξήγηση εργαλείου κειμένου θα εμφανιστεί σε ένα ορθογώνιο μπλοκ στη σήμανση HTML, αυτό είναι το κείμενο στην ετικέτα span. Ας τοποθετήσουμε υποδείξεις πάνω από τα εικονίδια.
Ulli span (
θέση: απόλυτη;
κορυφή: -30px;
αριστερά: 50%;
transform: translateX(-50%) translateY(-20px);
}
Ας ορίσουμε τα μεγέθη κουτιών στα ακόλουθα σταθερά μεγέθη.
Ulli span (
πλάτος: 120 px;
ύψος: 24 px;
}
Ευθυγραμμίζει το κείμενο στο κέντρο κάθετα και οριζόντια.
Ulli span (
Ύψος γραμμής: 24 px;
text-align: κέντρο;
}
Χρώμα φόντου, χρώμα κειμένου και μέγεθος κειμένου.
Ulli span (
φόντο: #03a9f4;
χρώμα: #fff;
μέγεθος γραμματοσειράς: 14 px;
}
Στρογγυλοποιήστε τις γωνίες κατά 4 pixel και κάντε μια ομαλή μετάβαση όταν αιωρείστε.
Ulli span (
περίγραμμα-ακτίνα: 4px;
μετάβαση: .5s;
}
Το εργαλείο είναι αόρατο και διαφανές.
Ulli span (
αδιαφάνεια: 0;
ορατότητα: κρυφό;
}
Για να σχεδιάσουμε ένα μικρό βέλος κάτω από το μπλοκ, θα χρησιμοποιήσουμε το ::before pseudo-στοιχείο, που στην πράξη σημαίνει ότι το βέλος δεν υπάρχει στην πραγματικότητα στο αρχείο HTML (κενό περιεχόμενο ), αλλά υπάρχει μόνο στο αρχείο CSS. Ένα βέλος που δείχνει προς ένα εικονίδιο δεν είναι τίποτα άλλο από ένα τετράγωνο σχήμα 10x10 pixel, περιστρεφόμενο κατά 45 μοίρες και πιεσμένο πάνω σε ένα τμήμα ανοίγματος με αρνητική τιμή. Ως αποτέλεσμα, το τετράγωνο μετασχηματίζεται σε τρίγωνο και βρίσκεται σε ένα επίπεδο χαμηλότερο δείκτη z: -1 από τη μητρική του ετικέτα span.
Η παροχή πρόσθετων πληροφοριών σχετικά με δυνητικά πολύπλοκα στοιχεία διεπαφής χρήστη είναι ένα πολύ σημαντικό μέρος της δουλειάς ενός σχεδιαστή ιστοσελίδων για την ανάπτυξη ενός φιλικού προς τον χρήστη και προσβάσιμου ιστότοπου.
Ένας συνήθως χρησιμοποιούμενος μηχανισμός για την εμφάνιση πρόσθετων πληροφοριών πέρα από αυτό που είναι ορατό στη σελίδα είναι οι συμβουλές εργαλείων (στοιχεία σχεδίασης για την εμφάνιση υποδείξεων σχετικά με ορισμένα στοιχεία στην οθόνη).
Παρόλο που υπάρχουν πολλές καινοτόμες λύσεις που χρησιμοποιούν CSS και JavaScript (με ή χωρίς τη χρήση ενός πλαισίου JavaScript όπως το jQuery), μερικές φορές είναι χρήσιμο να δούμε πώς οι νέες τεχνολογίες ανακινούν τις μακροχρόνιες τεχνικές.
Αυτό το σεμινάριο θα σας δείξει πώς μπορείτε να δημιουργήσετε εκπληκτικές συμβουλές εργαλείων μεταξύ προγραμμάτων περιήγησης χρησιμοποιώντας μόνο CSS.
|
|
Όπου χρειάζεται να εξηγήσετε μια συντομογραφία ή αρκτικόλεξο, να εξηγήσετε τη σημασία μιας λέξης ή να δώσετε πρόσθετες πληροφορίες για κάτι, οι συμβουλές εργαλείων είναι μια απλή αλλά αποτελεσματική λύση.
Από το μικρό κίτρινο μπλοκ κειμένου που εμφανίζεται πάνω από ένα στοιχείο όπως μια εικόνα και εμφανίζει τα περιεχόμενα του χαρακτηριστικού τίτλου (ή του χαρακτηριστικού alt, εάν ατυχείτε να χρησιμοποιείτε τον Internet Explorer) έως εξελιγμένες λύσεις που βασίζονται σε σενάρια χρησιμοποιώντας συμβουλές εργαλείων, Οι συμβουλές εργαλείων είναι ένα φανταστικό εργαλείο που φαίνεται να έχει μικρή δημοτικότητα στην κοινότητα του σχεδιασμού.
Τα περισσότερα προγράμματα περιήγησης έχουν προεπιλεγμένα στυλ για συμβουλές εργαλείων, αν και δεν φαίνονται πολύ όμορφα.
Ενώ τα ταχέως εξελισσόμενα πρότυπα με νέες τεχνικές αρχίζουν να υποστηρίζονται όλο και καλύτερα από νέα προγράμματα περιήγησης, η άνοδος του CSS μας επιτρέπει επίσης να κάνουμε συμβουλές εργαλείων (που χρησιμεύουν ως αντικατάσταση για βαρετές προεπιλογές προγράμματος περιήγησης όπως το παραπάνω) σε ένα νέο επίπεδο λεπτομέρεια και σχέδιο.
Εάν έχετε χρησιμοποιήσει στο παρελθόν λύσεις που βασίζονται σε jQuery, σίγουρα θα σημειώσετε ότι η JavaScript μπορεί να κάνει πολλά πράγματα που το CSS δεν μπορεί (όπως να καθυστερήσει να εξαφανιστεί η συμβουλή εργαλείου). Αλλά η επισήμανση και το στυλ μπορούν να γίνουν με το CSS, το οποίο βελτιώνει το σχέδιό σας και εμπνέει άλλα υπέροχα σχέδια που ξεπερνούν τις συμβουλές εργαλείων.
Σε αυτό το σεμινάριο θα δημιουργήσουμε συμβουλές εργαλείων χρησιμοποιώντας καθαρό CSS.
Αυτό σημαίνει ότι θα λειτουργούν σε προγράμματα περιήγησης που δεν υποστηρίζουν CSS3 (όπως ο Internet Explorer 8 και παλαιότερα) - δεν θα φαίνονται τόσο καλά σε αυτά όσο σε νεότερα προγράμματα περιήγησης.
Η εμφάνιση εφέ όπως χρώματα, γραμματοσειρές, εικόνες και πλαίσια συμβουλών εργαλείων θα εξαρτηθεί από το τι χρησιμοποιείται στον υπολογιστή του τελικού χρήστη (πρόγραμμα περιήγησης, εγκατεστημένες γραμματοσειρές ή αντίθεση οθόνης).
Επεκτάσεις CSS3Χρησιμοποιώντας απλές αλλά αποτελεσματικές επεκτάσεις, όπως οι ιδιότητες ακτίνας περιγράμματος και σκιάς πλαισίου, μπορείτε να δώσετε σε ένα απλό ορθογώνιο μηνύματος μπαλονιού μια νέα και όμορφη εμφάνιση.
Τι έχουμε κάτω από την κουκούλα μας;Ας ξεκινήσουμε με τον κώδικα HTML για το παράδειγμά μας.
διαφορετικών τύπων συμβουλές εργαλείωνΓια να σας δώσουμε αρκετές ιδέες για τα δικά σας έργα, θα φτιάξουμε πέντε διαφορετικούς τύπους συμβουλές εργαλείων.
Καθένα από αυτά μοιάζει πολύ με τα άλλα προκειμένου να τυποποιηθεί η έξοδος της οθόνης. Στη συνέχεια, όμως, μπορείτε να πειραματιστείτε μαζί τους για να τα μελετήσετε λεπτομερώς και να αλλάξετε την εμφάνιση.
Αυτός ο μηχανισμός θα πρέπει να λειτουργεί σε όλα τα προγράμματα περιήγησης, ωστόσο, εάν χρειάζεστε, μπορείτε να τον αλλάξετε σύμφωνα με τις προτιμήσεις σας.
Βασική σήμανσηΣτον παρακάτω κώδικα, χρησιμοποιούμε το γενικό πρότυπο XHTML 1.0 με ένα κανονικό στοιχείο.
Εφόσον χρησιμοποιούμε CSS για να δημιουργήσουμε τα στοιχεία μας, για λόγους μάθησης το CSS ενσωματώνεται στο έγγραφο χρησιμοποιώντας το .
Μπορείτε επίσης να προσθέσετε κώδικα jQuery ή JavaScript για να βελτιώσετε τα εφέ και τη λειτουργικότητα αν θέλετε!
Συμβουλές εργαλείων σήμανσης HTML Ένα παράδειγμα συμβουλών εργαλείων που έγιναν με CSS!Περάστε το ποντίκι σας πάνω από το κείμενο για να δείτε: κλασική υπόδειξη, κρίσιμο μήνυμα Κρίσιμη ανάρτησηΑυτό είναι απλώς ένα παράδειγμα του τρόπου δημιουργίας συμβουλών εργαλείων χρησιμοποιώντας CSS!, βοήθεια HelpΑυτό είναι απλώς ένα παράδειγμα του τρόπου δημιουργίας συμβουλών εργαλείων χρησιμοποιώντας CSS!, πληροφορίες InfoThis είναι απλώς ένα παράδειγμα του τρόπου δημιουργίας συμβουλών εργαλείων χρησιμοποιώντας CSS! και προειδοποίηση Προειδοποίηση: Αυτό είναι απλώς ένα παράδειγμα του τρόπου δημιουργίας συμβουλών εργαλείων χρησιμοποιώντας CSS!.
Αυτό είναι απλώς ένα παράδειγμα του τρόπου δημιουργίας συμβουλών εργαλείων χρησιμοποιώντας CSS!
Ο κώδικας χρησιμοποιεί ένα στοιχείο (τίποτα ιδιαίτερο που σχετίζεται με αυτό) και παραγράφους (
) για κείμενο που περιέχει στοιχεία συνδέσμου (για την οποία έχει οριστεί η κλάση "tooltip").
Γιατί χρησιμοποιείται μια ετικέτα για συμβουλές εργαλείων; ?Ο λόγος που χρησιμοποιούμε την ετικέτα a αντί για abbr , dfn ή span είναι ότι ο IE6 έχει κακή υποστήριξη για τον ψευδο-επιλογέα:hover για στοιχεία εκτός του a .
Εάν δεν σκοπεύετε να υποστηρίξετε τον IE6, μπορείτε να χρησιμοποιήσετε διαφορετική ετικέτα.
Κάθε στοιχείο span στο παράδειγμα έχει οριστεί στην κατηγορία classic (για μια κανονική επεξήγηση εργαλείου) ή προσαρμοσμένο (με κρίσιμο , βοήθεια , πληροφορίες ή προειδοποίηση για να ταιριάζει με το συνδυασμό χρωμάτων που χρησιμοποιείται).
Αυτή η χρήση του στυλ έχει επίσης μερικά μπόνους με τη μορφή ενός στοιχείου em (που ορίζει τον τίτλο της επεξήγησης εργαλείου) και μιας εικόνας (η οποία χρησιμοποιείται ως εικονίδιο στην επεξήγηση εργαλείου, μπορείτε να χρησιμοποιήσετε τις δικές σας εικόνες).
CSSΈχουμε γράψει τον κώδικα HTML για τη σελίδα και ήρθε η ώρα να κάνουμε τις συμβουλές εργαλείων να κάνουν τη δουλειά τους.
Ο παρακάτω κώδικας, ο οποίος προστίθεται σε μια ενότητα της σελίδας, ορίζει κάθε σύνδεσμο που περιέχει την επεξήγηση εργαλείου σε ένα ωραίο στυλ με μια υπογράμμιση με διακεκομμένη γραμμή (για να τον διαφοροποιεί από έναν κανονικό σύνδεσμο, ο οποίος έχει μια συμπαγή υπογράμμιση γραμμής) και ορίζει τον κέρσορα με ερωτηματικό (και για οπτική διαφοροποίηση).
Αφαιρεί επίσης την υπογράμμιση και ορίζει το χρώμα (έτσι το στοιχείο μοιάζει λιγότερο με κανονικό σύνδεσμο).
Το δεύτερο μέρος του κώδικα απλώς κρύβει την επεξήγηση εργαλείου μέχρι να χρειαστεί.
Όλα είναι πολύ απλά!
Στυλ CSS για class.tooltip .tooltip ( border-bottom: 1px διάστικτη #000000; χρώμα: #000000; περίγραμμα: κανένα; δρομέας: βοήθεια; κείμενο-διακόσμηση: κανένα; θέση: σχετική; ) .διάστημα επεξήγησης εργαλείου (περιθώριο-αριστερό: -999em θέση: απόλυτη)Το περιεχόμενο επεξήγησης εργαλείου αφαιρείται από την προβολή χρησιμοποιώντας μια ιδιότητα αρνητικού περιθωρίου αντί για εμφάνιση: κανένα ή ορατότητα: κρυφό επειδή ορισμένα προγράμματα ανάγνωσης οθόνης αγνοούν αυτές τις ιδιότητες.
Στυλ CSS για συμβουλές εργαλείωνΣύντομα θα κάνουμε τις συμβουλές εργαλείων να λειτουργούν με τον ίδιο τρόπο σε διαφορετικά προγράμματα περιήγησης. Τώρα ας προσθέσουμε μερικές γραμμές κώδικα CSS.
Προσθέτοντας το ακόλουθο κομμάτι κώδικα, θα εμφανίσουμε συμβουλές εργαλείων στην οθόνη, αν και θα φαίνονται απλές και θα είναι δύσκολο να διαχωριστούν οπτικά από το υπόλοιπο κείμενο.
CSS για εμφάνιση επεξήγησης εργαλείου .tooltip:hover span ( γραμματοσειρά-οικογένεια: Calibri, Tahoma, Geneva, sans-serif; θέση: απόλυτη; αριστερά: 1em; επάνω: 2em; z-index: 99; περιθώριο-αριστερό: 0; πλάτος: 250 pixel; ;μέγεθος γραμματοσειράς: 1,2em, padding: 0,2em 0,6em 0; ( φόντο: διαφανές; ) Απαιτείται γραμμή * htmlΊσως αναρωτιέστε γιατί περιλαμβάνεται η τελευταία γραμμή στον παραπάνω κώδικα; Ορίζει τη διαφάνεια για το φόντο του συνδέσμου. Κατά τη δοκιμή συμβουλών εργαλείων, ανακάλυψα ένα περίεργο εφέ στον IE6 που δεν μπορούσε να αφαιρεθεί όσο υπήρχε το φόντο του συνδέσμου!
Ο παραπάνω κώδικας διασφαλίζει τη λειτουργικότητα των συμβουλών εργαλείων. Εμφανίζονται στην οθόνη, αλλά είναι αρκετά δύσκολο να διαχωριστούν από το γενικό κείμενο. Δεν υπάρχουν συνδυασμοί χρωμάτων που κάνουν το κείμενο συμβουλής εργαλείου να ξεχωρίζει στη σελίδα.
Ορίστε το συνδυασμό χρωμάτων για συμβουλές εργαλείων/Ο ακόλουθος κώδικας ορίζει έναν συνδυασμό χρωμάτων για καθένα από τα πέντε στυλ συμβουλών εργαλείων.
Μετά την αλλαγή του κώδικα της σελίδας και την ενημέρωση του στο πρόγραμμα περιήγησης, θα εμφανιστούν συμβουλές εργαλείων όταν τοποθετείτε το ποντίκι πάνω από τον σύνδεσμο σχεδόν το ίδιο σε όλα τα προγράμματα περιήγησης.
Κωδικός CSS για το συνδυασμό χρωμάτων .classic ( φόντο: #FFFFAA; περίγραμμα: 1px συμπαγές #FFAD33; ) .critical ( φόντο: #FFCCAA; περίγραμμα: 1px συμπαγές #FF3334; ) .help ( φόντο: #9FDAEE; περίγραμμα: 1px συμπαγές # 2BB0D7;Ο κώδικας CSS είναι πολύ απλός, αλλά δίνει υπέροχη εμφάνιση στις συμβουλές εργαλείων και κάνει τη δουλειά του παντού. Ο συνδυασμός χρωμάτων μπορεί να αλλάξει κατά την κρίση σας.
Μερικές πινελιές CSS3 για προηγμένη εμφάνιση συμβουλών εργαλείωνΠριν ολοκληρώσουμε αυτό το σεμινάριο, θα προσθέσουμε μερικές γραμμές κώδικα CSS3 για να προσθέσουμε οπτικά εφέ στις συμβουλές εργαλείων μας. Ας ορίσουμε στρογγυλεμένες γωνίες χρησιμοποιώντας την ιδιότητα border-radius και προσθέτουμε κάποια διάσταση χρησιμοποιώντας την ιδιότητα box-shadow.
Δεδομένου ότι καμία από αυτές τις ιδιότητες δεν υποστηρίζεται παγκοσμίως, θα λειτουργούν μόνο σε ορισμένες από τις πιο πρόσφατες εκδόσεις του προγράμματος περιήγησης. Αλλά όπου λειτουργούν, οι συμβουλές εργαλείων θα φαίνονται κομψές και σέξι!
Ας προσθέσουμε τον παρακάτω κώδικα στο selector.tooltip:hover span και ας ανανεώσουμε τη σελίδα.
Τα οπτικά εφέ για περίγραμμα, σκίαση και διαφάνεια ανυψώνουν την επεξήγηση εργαλείου πάνω από το κείμενο της σελίδας και κάνουν τις πληροφορίες αντίθετες και ευανάγνωστες.
Μπορεί να παρατηρήσετε ότι δεν χρησιμοποιούνται μόνο οι επίσημες ιδιότητες CSS3, αλλά και επεκτάσεις για το Mozilla και το WebKit.
Πρόσθετες ιδιότητες CSS για νέα προγράμματα περιήγησης border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0,1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0,1);
Αυτό το σεμινάριο δείχνει ότι η βελτίωση της διεπαφής δεν απαιτεί μεγάλη προσπάθεια. Επιπλέον, αξίζει να επανεξεταστεί η εμπειρία χρήσης CSS, η οποία μπορεί να είναι χρήσιμη για τον καθορισμό ενός νέου επιπέδου διαδραστικότητας για μια διαδικτυακή εφαρμογή.
Σε αυτό το άρθρο θέλω να συζητήσω διάφορες επιλογές για την οργάνωση μιας τέτοιας δυνατότητας σε οποιαδήποτε διάταξη. Παρεμπιπτόντως, έχω ήδη ένα ζωντανό παράδειγμα μιας τέτοιας υλοποίησης στον ιστότοπό μου. Εάν κάνετε κύλιση προς τα κάτω στα σχόλια αυτής της σελίδας και τοποθετήσετε το δείκτη του ποντικιού πάνω από την ημερομηνία του σχολίου, θα γίνει αμέσως σαφές τι ακριβώς λέγεται. Λοιπόν, αν δεν υπάρχουν ακόμη σχόλια, μπορείτε να αφήσετε ένα ταυτόχρονα.
Βλέπω δύο κύριες μεθόδους για την εφαρμογή μιας επεξήγησης εργαλείου, αυτή είναι κατά την τοποθέτηση του δείκτη, η οποία είναι επίσης η πιο δημοφιλής και η λιγότερο δημοφιλής όταν κάνετε κλικ σε ένα στοιχείο. Ας ξεκινήσουμε φυσικά με την εμφάνιση μιας συμβουλής εργαλείου όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο.
Σε αυτό το άρθρο, σκέφτηκα να ξεκινήσω με το πιο πρωτόγονο πράγμα, την εμφάνιση μιας επεξήγησης εργαλείου χρησιμοποιώντας τον τίτλο , η οποία δεν μπορεί να μορφοποιηθεί με κανέναν τρόπο, αλλά νομίζω ότι μπορείτε να το παραλείψετε, καθώς είναι ήδη σαφές. Εάν τα παραπάνω δεν σας είναι απολύτως ξεκάθαρα, νομίζω ότι αφού μελετήσετε το βίντεο σχετικά, όλα θα γίνουν πολύ πιο ξεκάθαρα.
Ένας απλός τρόπος με ντιζάιν, on hover.Δεν είναι πιο περίπλοκη από τη μέθοδο που έχασα. Μόνο αντί για το χαρακτηριστικό title θα χρησιμοποιήσω data-title και σχεδίαση χρησιμοποιώντας στυλ css. Στην πραγματικότητα, δίνω παρακάτω τον κώδικα html:
?
/* Χρησιμοποιούμε το after pseudo-στοιχείο για να σχεδιάσουμε την ίδια τη γραμμή, αλλά ταυτόχρονα την αποκρύπτουμε, καθώς θα πρέπει να εμφανίζεται μόνο στο hover */ .hover:after (content: attr(data-title); display: none ;θέση: απόλυτο: 130%: 0px-color: -moz-box-shadow: 0,0,0, -webkit; box-shadow: 0 1px rgba(0,0,0,.16); έτσι ώστε όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο, να εμφανίζεται ένα πλαίσιο υπόδειξης */ .hover:hover:after(display: block;)
Εδώ θα ήθελα να επιστήσω την προσοχή σας στο γεγονός ότι αυτό είναι μόνο ένα παράδειγμα ιδιοτήτων σχεδιασμού. Μπορείτε φυσικά να σχεδιάσετε την εμφάνιση της μήτρας όπως θέλετε.
Επεξήγηση εργαλείου κατά την τοποθέτηση του δείκτη.Αυτός είναι ίσως ο πιο δημοφιλής τρόπος εφαρμογής αυτής της δυνατότητας. Τουλάχιστον αυτό χρησιμοποιώ πιο συχνά.
? αυτή είναι μια συμβουλή σχεδιασμού
Σε αυτό το παράδειγμα, επίσης δεν βλέπω κάτι ιδιαίτερο, αλλά περισσότερο, αλλά το αποτέλεσμα θα είναι καλύτερο ακόμη και χωρίς τη χρήση του χαρακτηριστικού data-title. Το δοχείο σε αυτή την περίπτωση χρησιμεύει ως περιτύλιγμα για τα στοιχεία μας που θα χρησιμοποιηθεί για την εφαρμογή της επεξήγησης εργαλείου. Και επίσης η ίδια η μήτρα θα τοποθετηθεί σε σχέση με το δοχείο.
/* ορίστε τη σχετική θέση στο κοντέινερ */ .block(position:relative;) /* Σχεδιάστε το προεπιλεγμένο κρυφό στοιχείο */ .hidden (εμφάνιση: καμία; θέση: απόλυτη; κάτω: 130%; αριστερά: 0 εικονοστοιχεία; χρώμα φόντου : # fff color: #3aaeda: -moz-box-shadow: 0 1px rgba(0,0,0,.16); σκιά: 0 1px rgba(0,0,0,.16 μέγεθος γραμματοσειράς: 12px;) /* Πρόσθετη διακόσμηση για το κρυφό στοιχείο (προαιρετικό) */ .hover + .hidden:before (περιεχόμενο: " "); θέση: απόλυτο: 10% περιθώριο-πλάτος: πλάτος: 0; : 7px στερεό #fff; απόλυτο: 100% περιθώριο-αριστερό: -5 px: πλάτος; περίγραμμα: 7px στερεά διαφανή. περίγραμμα-δεξιά: 7px συμπαγές #fff; χρώμα περιγράμματος: rgba(0,0,0,.16) διαφανές διαφανές; z-index: 1;) /* Εμφάνιση κρυφού στοιχείου στο hover */ .hover:hover + .hidden(display: block;)
Αυτές οι δύο επιλογές μπορούν να χρησιμοποιηθούν στον ιστότοπό σας για να εμφανίσετε μια επεξήγηση εργαλείου όταν τοποθετείτε το δείκτη του ποντικιού.
Υπάρχουν δύο ακόμη μέθοδοι, αλλά είναι σχεδόν πανομοιότυπες, εκτός από το ότι το στοιχείο θα εμφανιστεί όταν κάνετε κλικ σε ένα στοιχείο που εμφανίζεται πάντα στον ιστότοπο.
Ένας απλός τρόπος με εγγραφή, με κλικ.Σε περίπτωση κλικ, ο κωδικός θα φαίνεται ακριβώς ο ίδιος. Το μόνο πράγμα είναι ότι για ευκολία αντικατέστησα την κατηγορία ορισμένων στοιχείων. Η ψευδοκλάση εστίασης χρησιμοποιείται επίσης αντί για το hover . Αξίζει επίσης να σημειωθεί εδώ ότι για να λειτουργήσει αυτή η μέθοδος, είναι απαραίτητο να την αντικαταστήσετε με , δηλαδή με υπερσύνδεσμο.
?
Ο κώδικας CSS σε αυτήν την περίπτωση είναι παρόμοιος με την εμφάνιση ενός μπλοκ κατά την αιώρηση, μόνο άλλες κλάσεις χρησιμοποιούνται για ευκολία. Και για σωστή λειτουργία, αλλάζουμε την ψευδο-κλάση σε εστίαση .
/* Χρησιμοποιούμε την after pseudo-class για να σχεδιάσουμε το ίδιο το σημείο, αλλά ταυτόχρονα το αποκρύπτουμε, καθώς θα πρέπει να εμφανίζεται μόνο όταν κάνετε κλικ στο */ .focus:after (content: attr(data-title); display: none Θέση: απόλυτο: 130%: 0px-color: box-shadow: 0 1px rgba(0,0,0,.16); έτσι ώστε όταν κάνετε κλικ σε ένα στοιχείο, να εμφανίζεται ένα πλαίσιο υπόδειξης */ .focus:focus:after(display: block;)
Όπως μπορείτε να δείτε, πρακτικά δεν υπάρχει διαφορά.
Επεξήγηση εργαλείου όταν κάνετε κλικ.Αυτή η μέθοδος κλικ θα είναι επίσης πιο σχετική εάν χρειαστεί να μορφοποιήσετε την επεξήγηση εργαλείου λίγο καλύτερα από ό,τι είναι δυνατό στην προηγούμενη επιλογή.
? αυτή είναι μια συμβουλή σχεδιασμού
Και ο πραγματικός σχεδιασμός της μήτρας:
/* ορίστε τη σχετική θέση στο κοντέινερ */ .block(position:relative;) /* Σχεδιάστε το προεπιλεγμένο κρυφό στοιχείο */ .hidden (εμφάνιση: καμία; θέση: απόλυτη; κάτω: 130%; αριστερά: 0 εικονοστοιχεία; χρώμα φόντου : # fff color: #3aaeda: -moz-box-shadow: 0 1px rgba(0,0,0,.16); shadow: 0 1px 1px rgba(0,0,0,.16 font-size: 12px;) /* Πρόσθετη διακόσμηση για το κρυφό στοιχείο (προαιρετικό) */ .focus + .hidden:before (περιεχόμενο: " "); θέση: απόλυτο: 10% περιθώριο-πλάτος: πλάτος: 0; : 7px στερεό #fff; απόλυτο: 100% περιθώριο-αριστερό: -5 px: πλάτος; περίγραμμα: 7px στερεό διαφανές. περίγραμμα-δεξιά: 7px συμπαγές #fff; χρώμα περιγράμματος: rgba(0,0,0,.16) διαφανές διαφανές; z-index: 1;) /* Εμφάνιση ενός κρυφού στοιχείου όταν κάνετε κλικ στο */ .focus:focus + .hidden(display: block;)
Όπως μπορείτε να δείτε, δεν υπάρχει τίποτα περίπλοκο. Επιπλέον, μπορείτε να οργανώσετε τις αλλαγές κατάστασης τόσο με το δείκτη του ποντικιού όσο και με κλικ. Αν και, για να είμαι ειλικρινής, δεν μπορώ να πω πόσο σχετική είναι η μέθοδος κλικ σε κλικ.
Υπάρχει επίσης μια απομίμηση του τελευταίου παραδείγματος χρησιμοποιώντας το , αλλά η χρήση του μου φαίνεται ότι δεν είναι απολύτως σωστή ειδικά για την οργάνωση μιας επεξήγησης εργαλείου στον ιστότοπό σας. Εάν διαφωνείτε έντονα μαζί μου, καλώς ήρθατε στα σχόλια.
Μάθημα βίντεο - Επεξήγηση εργαλείου χωρίς σενάρια.Αυτό είναι όλο για μένα. Καλή τύχη σε όλους.
Φόρτωση...