Η απλούστερη αναπτυσσόμενη λίστα σε HTML είναι εύκολο να δημιουργηθεί χρησιμοποιώντας την ετικέτα select. Αυτή είναι μια ετικέτα κοντέινερ, οι ετικέτες επιλογών είναι ενσωματωμένες σε αυτήν - καθορίζουν τα στοιχεία της λίστας.
Υπάρχουν πολλές επιλογές λίστας που μπορείτεΚάντε χρήση της ετικέτας επιλογής: μια αναπτυσσόμενη λίστα (οι επιλογές εγκαταλείπονται αφού κάνετε κλικ στο κύριο πεδίο ή αιωρείται πάνω από αυτό) και μια λίστα πολλαπλών επιλογών - σε αυτήν ο χρήστης μπορεί να επιλέξει πολλά στοιχεία. Τα πρώτα είναι πιο συνηθισμένα · αποτελούν σημαντικό στοιχείο στην πλοήγηση σύγχρονων ιστότοπων. Η αναπτυσσόμενη λίστα πολλαπλών επιλογών μπορεί να εφαρμοστεί, για παράδειγμα, σε καταλόγους, όπου είναι απαραίτητο να επιλέξετε πολλά χαρακτηριστικά προϊόντος.
Μπορείτε να αλλάξετε την εμφάνιση και τις ιδιότητες των λιστών χρησιμοποιώντας καθολικά και ειδικά χαρακτηριστικά.
Επιλέξτε χαρακτηριστικά ετικέτας
1. Πολλαπλές - ορίζει μια πολλαπλή επιλογή.
2.Μέγεθος - ορίζει τον αριθμό των ορατών γραμμών στη λίστα, δηλαδή το ύψος. Και εδώ όλα εξαρτώνται από το αν το πολλαπλό χαρακτηριστικό υπάρχει ή όχι. Εάν ναι, και δεν ορίσετε μέγεθος, τότε εάν υπάρχει πολλαπλό, ο χρήστης θα δει όλες τις πιθανές επιλογές, εάν απουσιάζει το πολλαπλό, τότε θα εμφανιστεί μόνο μία γραμμή και ο επισκέπτης θα μπορεί να διαβάσει τα υπόλοιπα όταν κάνει κλικ στο εικονίδιο ανελκυστήρα στη δεξιά πλευρά. Εάν το μέγεθος ύψους έχει οριστεί και είναι μικρότερο από τον αριθμό των επιλογών, θα εμφανιστεί μια γραμμή κύλισης στα δεξιά.
3. Όνομα - όνομα. Η αναπτυσσόμενη λίστα μπορεί να κάνει χωρίς αυτήν, αλλά μπορεί να είναι απαραίτητη για αλληλεπίδραση με το πρόγραμμα χειρισμού στον διακομιστή. Κατά κανόνα, το όνομα εξακολουθεί να αναφέρεται.
Η ετικέτα select δεν έχει απαιτούμενα χαρακτηριστικά, σε αντίθεση με την ετικέτα επιλογής.
Χαρακτηριστικά της ένθετης ετικέτας επιλογής
- Επιλεγμένο - σχεδιασμένο για να επισημάνει ένα στοιχείο λίστας. Ο χρήστης θα μπορεί να επιλέξει περισσότερα από ένα στοιχεία εάν έχει καθοριστεί το πολλαπλό χαρακτηριστικό (βλ. Παραπάνω).
- Αξία - τιμή. Αυτό το χαρακτηριστικό απαιτείται. Ο διακομιστής ιστού πρέπει να κατανοήσει ακριβώς ποια στοιχεία λίστας έχει επιλέξει ο χρήστης.
- ΕπιγραφήΧρησιμοποιώντας αυτό το χαρακτηριστικό, μπορείτε να συντομεύσετε τα στοιχεία λίστας που είναι πολύ μεγάλα. Για παράδειγμα, το "Μιλάνο" θα εμφανίζεται στην οθόνη, αντί για αυτό που ορίζεται στην ετικέτα επιλογής, "Το Μιλάνο είναι το διοικητικό κέντρο της Λομβαρδίας. Βόρεια Ιταλία ". Αυτό το χαρακτηριστικό χρησιμοποιείται επίσης για την ομαδοποίηση στοιχείων σε μια λίστα.
Όσον αφορά το πλάτος της λίστας, ορίζεται από προεπιλογή σύμφωνα με το μήκος του ευρύτερου κειμένου στη λίστα. Φυσικά, το πλάτος μπορεί να αλλάξει χρησιμοποιώντας στυλ HTML.
Αναπτυσσόμενη λίστα με άλλους τρόπους
Μπορεί να γίνει χρησιμοποιώντας CSS, για παράδειγμα,Η λίστα θα εμφανιστεί όταν τοποθετείτε το δείκτη του ποντικιού πάνω από ένα στοιχείο σελίδας. Το Javascript παρέχει έναν εξαιρετικό τρόπο δημιουργίας λιστών και η βιβλιοθήκη Jquery το καθιστά εύκολο. Η αναπτυσσόμενη λίστα που είναι συνδεδεμένη χρησιμοποιώντας αυτήν τη βιβλιοθήκη μπορεί να είναι πολύ περίπλοκη, για παράδειγμα, με διαδοχή. Δηλαδή, όταν επιλέγετε ένα αντικείμενο σε μία λίστα, εμφανίζεται η ακόλουθη λίστα, για παράδειγμα, υπάρχει ένα στοιχείο μενού "Γυναικεία ρούχα" (οι τύποι ρούχων πέφτουν όταν αιωρείτε) και, στη συνέχεια, όταν επιλέγετε έναν από τους τύπους, για παράδειγμα "Εξωτερικά ρούχα", εμφανίζεται μια λίστα με τα είδη: μπουφάν, πάρκα, παλτά, κοντό παλτό, γούνινο παλτό κ.λπ.
Έχουμε απαριθμήσει επιφανειακά τις κύριες μεθόδους γιαβοήθεια που μπορείτε να δημιουργήσετε μια αναπτυσσόμενη λίστα. Φυσικά, υπάρχουν πολλές αποχρώσεις σε HTML, σε CSS και σε JavaScript, που σας επιτρέπουν να αλλάξετε τη λειτουργικότητα και την εμφάνιση των λιστών.
