Φόρμα δυναμικής αλλαγής μεγέθους Css. Δυναμική αλλαγή μεγέθους γραμματοσειράς στο jQuery. Κλιμάκωση στο μέγιστο μέγεθος

22.10.2020

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

Λύση
Ένα στοιχείο φόρμας, όπως κάθε άλλο στοιχείο HTML, μπορεί να διαμορφωθεί χρησιμοποιώντας CSS.

Ρύζι. 6.1. Προεπιλεγμένη προβολή φόρμας στο πρόγραμμα περιήγησης Firefoxi

Απεικονίζεται επάνω ρύζι. 6.1Η φόρμα έχει σχεδιαστεί σύμφωνα με τις προεπιλεγμένες ρυθμίσεις που χρησιμοποιούνται από το πρόγραμμα περιήγησης Firefox στα Windows XP. Η εμφάνισή του θα αλλάξει όταν προβάλλεται σε διαφορετικά προγράμματα περιήγησης σε διαφορετικές πλατφόρμες. Παρακάτω είναι μια τυπική φόρμα:

"http://www.w3.org/1999/xhtml" lang = "en-US" > <span>Αλλαγή της εμφάνισης των στοιχείων φόρμας χρησιμοποιώντας CSS</span>

Μπορείτε να αλλάξετε την εμφάνιση αυτής της φόρμας γράφοντας κανόνες στυλ για τα στοιχεία:

φόρμα ( περίγραμμα: 1 εικονοστοιχείο με κουκκίδες #AAAAAA ; πλήρωση: 0 ,5em ; ) φόρμα div (περιθώριο-κάτω: 1em ; ) είσοδος ( χρώμα: #00008B ; χρώμα φόντου: #ADD8E6 ; περίγραμμα: 1 εικονοστοιχείο συμπαγές #00008B ; ) επιλέξτε ( πλάτος: 100 px χρώμα: #00008B;

Τώρα η φόρμα μοιάζει με το Σχ. 6.2.

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

είσοδος (χρώμα: #00008B; χρώμα φόντου: #ADD8E6; περίγραμμα: 1px συμπαγές #00008B; γραμματοσειρά: 0.9em Arial, Helvetica, sans-serif; padding: 0.2em; πλάτος: 200px; )

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

Ας δούμε τις αξίες των ακινήτων με περισσότερες λεπτομέρειες:

Η εμφάνιση μιας φόρμας HTML μπορεί να βελτιωθεί σημαντικά χρησιμοποιώντας CSS:

Στυλ πεδίου εισαγωγής

Χρησιμοποιήστε την ιδιότητα width για να προσδιορίσετε το πλάτος του πεδίου εισαγωγής:

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

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

Πρόσθετες εισροές

Χρησιμοποιήστε την ιδιότητα padding για να προσθέσετε χώρο μέσα σε ένα πεδίο κειμένου.

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

Σημειώστε ότι έχουμε ορίσει την ιδιότητα box-sizing σε border-box . Αυτό διασφαλίζει ότι η ενδεχόμενη επένδυση περιγράμματος περιλαμβάνεται στο συνολικό πλάτος και ύψος των στοιχείων.
Διαβάστε περισσότερα για την ιδιότητα του μεγέθους κουτιού στο κεφάλαιο CSS Boxing Styles.

Όρια εισόδου

Χρησιμοποιήστε την ιδιότητα περιγράμματος για να αλλάξετε το μέγεθος και το χρώμα του περιγράμματος και την ιδιότητα border-radius για να προσθέσετε στρογγυλεμένες γωνίες:

Εάν χρειάζεστε μόνο ένα κάτω περίγραμμα, χρησιμοποιήστε την ιδιότητα περίγραμμα κάτω:

Χρώμα εισαγωγής

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

Εστίαση εισόδου

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

Χρησιμοποιήστε τον επιλογέα: εστίαση για να εστιάσετε στο πεδίο εισαγωγής:

Εικονίδιο εισαγωγής και εικόνα

Εάν θέλετε να ορίσετε ένα εικονίδιο μέσα σε μια είσοδο, χρησιμοποιήστε την ιδιότητα background-image και τοποθετήστε το στην ιδιότητα background-position. Σημειώστε επίσης ότι έχουμε προσθέσει μια μεγάλη αριστερή γέμιση για να κρατήσουμε χώρο για το εικονίδιο:

Παράδειγμα

εισαγωγή(
Χρώμα φόντου: λευκό;
background-image: url("searchicon.png");
φόντο-θέση: 10px 10px;
background-repeat: no-repeat;
padding-αριστερά: 40px;
}

Επεξεργαστής κώδικα »

Μετασχηματισμός αναζήτησης εισόδου

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

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

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

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

Για μένα προσωπικά η χρησιμότητα αυτού του πράγματος πολύ αμφίβολο, και θα προτιμούσα να θεωρήσω μια τέτοια ευκαιρία απλώς ως εισαγωγή. Αλλά ο Σεργκέι, για παράδειγμα, ήθελε από καιρό να κάνει πράξη αυτή την τεχνική και βλέπει νόημα σε αυτήν. Επομένως, ίσως αυτές οι πληροφορίες θα είναι χρήσιμες και σε κάποιον άλλο.
Η λύση είναι αρκετά απλή, λειτουργεί στο αγαπημένο μου jQuery, αλλά χρησιμοποιώντας αυτό το πλαίσιο μόνο για χάρη της ολοκλήρωσης αυτού του καθήκοντος - όχι πολύ σοφό, αφού το πλαίσιο μόνο «ζυγίζει» περίπου 60 KB και το ίδιο το σενάριο αποτελείται από μόνο 10 γραμμές. Πιστεύω ότι στην εγγενή JavaScript, ένα σενάριο που υλοποιεί το ίδιο πράγμα θα είναι πολύ μικρότερο.

Ας ξεκινήσουμε λοιπόν.

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

jQuery

Πήρα ένα πλάτος 1000 pixel ως σημείο εκκίνησης. Κατά κανόνα, αυτό είναι το ελάχιστο πλάτος για το οποίο σχεδιάζονται οι ιστότοποι. Βάζουμε αυτόν τον δείκτη σε μια μεταβλητή:

Var πλάτος = 1000;

Τώρα ορίζουμε το ελάχιστο μέγεθος γραμματοσειράς σε pixel, κάτω από το οποίο δεν θα μειωθεί:

Var bodyWidth = $("html").width();

Καθορίζουμε τον συντελεστή με τον οποίο θα πολλαπλασιαστεί το βασικό (ελάχιστο) μέγεθος γραμματοσειράς ανάλογα με το μέγεθος του παραθύρου του προγράμματος περιήγησης. Το σχήμα προκύπτει διαιρώντας το πλάτος του εγγράφου HTML με το βασικό (ελάχιστο) πλάτος. Δηλαδή, για παράδειγμα, εάν το πλάτος του παραθύρου του προγράμματος περιήγησης είναι 1600 pixel, τότε έχουμε συντελεστή 1,6.

Var πολλαπλασιαστή = bodyWidth / πλάτος;

Εκπληρώνουμε την προϋπόθεση: εάν το πλάτος του εγγράφου HTML είναι μεγαλύτερο από το πλάτος της βάσης, τότε πολλαπλασιάζουμε το μέγεθος της γραμματοσειράς με έναν συντελεστή, στρογγυλοποιώντας το αποτέλεσμα σε έναν ακέραιο αριθμό:

Αν ($("html").width() >= πλάτος) fontSize = Math.floor(fontSize * πολλαπλασιαστής);

Τώρα εφαρμόζουμε το προσαρμοσμένο μέγεθος γραμματοσειράς που προκύπτει στην ετικέτα :

$("body").css((fontSize: fontSize+"px"));

Τοποθετούμε όλες τις παραπάνω γραμμές στη συνάρτηση fontSize() () και, στη συνέχεια, εκτελούμε αυτήν τη συνάρτηση μετά τη φόρτωση του εγγράφου HTML, καθώς και μετά την αλλαγή του μεγέθους του παραθύρου του προγράμματος περιήγησης:

$(function() ( fontSize(); )); $(window).resize(function() ( fontSize(); ));

Εδώ είναι ολόκληρος ο κώδικας σεναρίου jQuery στον οποίο καταλήξαμε:

Συνάρτηση fontSize() ( var πλάτος = 1000; // πλάτος από το οποίο θα μετρηθεί var fontSize = 12; // ελάχιστο μέγεθος γραμματοσειράς var bodyWidth = $("html").width(); Var πολλαπλασιαστή = bodyWidth / πλάτος; εάν ( $("html").width() >= width) fontSize = Math.floor(fontSize * πολλαπλασιαστής) $("body").css((fontSize: fontSize+"px)); )); $(window).resize(function() ( fontSize(); ));

HTML

Ας εξετάσουμε το ενδεχόμενο χρήσης του παραπάνω σεναρίου χρησιμοποιώντας το παράδειγμα μιας διάταξης σελίδας 3 στηλών που έχει την ακόλουθη δομή κώδικα HTML:

CSS

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

Όλα είναι πολύ απλά.

Πρώτα, στη δεξιά στήλη απλώς ορίζουμε το σταθερό μέγεθος γραμματοσειράς και ύψος γραμμής και το σενάριο δεν θα το επηρεάσει:

#right (μέγεθος γραμματοσειράς: 12 εικονοστοιχεία, ύψος γραμμής: 18 εικονοστοιχεία; )

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

#left (μέγεθος γραμματοσειράς: 0,9em; )

Τρίτος, χρειάζεστε είτε στην ετικέτα , ή καθορίστε το ύψος γραμμής σε em για το αντίστοιχο μπλοκ, ώστε να αλλάζει επίσης δυναμικά.

Εάν θέλετε να αλλάξετε το μέγεθος της γραμματοσειράς μόνο για ένα συγκεκριμένο μπλοκ, πείτε #content , τότε θα ήταν πιο λογικό να αλλάξετε το σώμα στο σενάριο (στη γραμμή $("body").css((fontSize: fontSize+"px "))) στο επιθυμητό αναγνωριστικό ή κλάση.

Η εμφάνιση μιας φόρμας HTML μπορεί να βελτιωθεί σημαντικά χρησιμοποιώντας CSS:

Διαμόρφωση του πεδίου εισαγωγής

Χρησιμοποιήστε την ιδιότητα width για να προσδιορίσετε το πλάτος του πεδίου εισαγωγής:

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

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

Πλακόστρωτες Είσοδοι

Χρησιμοποιήστε την ιδιότητα padding για να προσθέσετε χώρο μέσα σε ένα πεδίο κειμένου.

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

Είσοδοι συνόρων

Χρησιμοποιήστε την ιδιότητα περιγράμματος για να αλλάξετε το μέγεθος και το χρώμα του περιγράμματος και χρησιμοποιήστε την ιδιότητα border-radius για να προσθέσετε στρογγυλεμένες γωνίες:

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

Έγχρωμες εισόδους

Χρησιμοποιήστε την ιδιότητα χρώματος φόντου για να προσθέσετε ένα χρώμα φόντου στην είσοδο και την ιδιότητα χρώματος για να αλλάξετε το χρώμα του κειμένου:

Εστίαση εισροών

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

Χρησιμοποιήστε τον επιλογέα:focus για να κάνετε κάτι με το πεδίο εισαγωγής όταν λαμβάνει εστίαση:

Εισαγωγή χρησιμοποιώντας εικονίδιο/εικόνα

Εάν θέλετε ένα εικονίδιο μέσα στην είσοδο, χρησιμοποιήστε την ιδιότητα background-image και τοποθετήστε το με την ιδιότητα background-position. Λάβετε επίσης υπόψη ότι θα προσθέσουμε μια μεγάλη αριστερή γέμιση για να κρατήσουμε χώρο εικονιδίων:

παράδειγμα