Πώς να κάνετε μια αναπτυσσόμενη λίστα στην HTML

Η πιο απλή λίστα drop-down στο HTML είναι εύκολο να δημιουργηθεί χρησιμοποιώντας την ετικέτα επιλέξτε. Αυτή η ετικέτα του δοχείου, ετικέτες ενσωματωμένο δικαίωμα σε αυτό - είναι αυτοί που καθορίζουν τα στοιχεία της λίστας.

Υπάρχουν πολλές επιλογές λίστες, οι οποίες μπορεί να γίνει με επιλογή την ετικέτα: αναπτυσσόμενη λίστα (οι επιλογές πέφτουν πατώντας πάνω στον κεντρικό τομέα ή αιωρούνται πάνω του), καθώς και κατάλογο των πολλαπλής επιλογής - σε αυτό ο χρήστης μπορεί να επιλέξει πολλά στοιχεία. Η πρώτη είναι η πιο κοινή, είναι ένα σημαντικό στοιχείο της σύγχρονης sites πλοήγησης. Τα αναπτυσσόμενη λίστα πολλαπλών επιλογών μπορούν να χρησιμοποιηθούν, για παράδειγμα, στους καταλόγους όπου θέλετε να επιλέξετε μερικά χαρακτηριστικά των προϊόντων.

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

επιλέξτε χαρακτηριστικά tag

1. Πολλαπλές - καθορίζει πολλαπλής επιλογής.

2. Μέγεθος - καθορίζει τον αριθμό των ορατών γραμμών στη λίστα, αυτό είναι το ύψος. Και τότε όλα εξαρτώνται από, πολλαπλές χαρακτηριστικό είναι παρόντες ή όχι. Αν ναι, και δεν καθορίσετε size κρεβάτι, στη συνέχεια, με την παρουσία πολλαπλών χρηστών, θα δείτε όλες τις επιλογές σας, αλλά αν πολλαπλές λείπει, φαίνεται να είναι μόνο μία γραμμή, και ο άλλος χρήστης θα είναι σε θέση να διαβάσει, όταν κάνετε κλικ στο εικονίδιο του ανελκυστήρα στη δεξιά πλευρά. Αν το ύψος του μεγέθους που καθορίζεται, και είναι μικρότερος από τον αριθμό των επιλογών στα δεξιά κύλισης εμφανίζεται μπαρ.

3. Όνομα - το όνομα. Η αναπτυσσόμενη λίστα μπορεί να γίνει χωρίς αυτό, αλλά μπορεί να χρειαστεί να αλληλεπιδράσουν με το πρόγραμμα-χειριστή στο διακομιστή. Κατά κανόνα, το όνομα εξακολουθεί να αναφέρεται.

Επιλέξτε ετικέτα δεν έχει απαιτούμενα χαρακτηριστικά, σε αντίθεση με την ετικέτα επιλογή.

Χαρακτηριστικά που συνδέονται επιλογή ετικέτας

1. Επιλεγμένα - σχεδιασμένο για να επισημάνετε ένα στοιχείο λίστας. Ο χρήστης μπορεί να διαθέσει περισσότερα από ένα στοιχεία, αν ορίσετε πολλαπλές ιδιότητες (βλ. Παραπάνω).
2. Αξία - αξίας. Αυτό το χαρακτηριστικό είναι απαραίτητη. Ο web server πρέπει να καταλάβει τι ακριβώς στοιχεία της λίστας έχει επιλέξει ο χρήστης.
3. Ετικέτα. Από την πολύ μακρύ κατάλογο των στοιχείων μπορεί να μειωθεί με τη χρήση αυτού του χαρακτηριστικού. Για παράδειγμα, η οθόνη θα εμφανίσει «Μιλάνο», αντί να την ετικέτα επιλογή «Μιλάνο - το διοικητικό κέντρο της Λομβαρδίας. Βόρεια Ιταλία. " Αυτή η ιδιότητα χρησιμοποιείται επίσης για την ομάδα των στοιχείων της λίστας.

Όσο για το πλάτος της λίστας, από προεπιλογή με το μήκος του ευρύτερου κειμένου στη λίστα. Φυσικά, το πλάτος μπορεί να αλλάξει με τη χρήση στυλ HTML.

Η αναπτυσσόμενη λίστα με άλλους τρόπους

Αυτό μπορεί να γίνει με CSS, για παράδειγμα, ο κατάλογος θα εμφανιστεί όταν περνάτε πάνω από ένα στοιχείο της σελίδας. Εξαιρετικές ευκαιρίες για τη δημιουργία λιστών δίνει το JavaScript, που απλοποιεί το έργο της βιβλιοθήκης Jquery. Η αναπτυσσόμενη λίστα που συνδέεται με αυτήν τη βιβλιοθήκη, μπορεί να είναι πολύ περίπλοκη, όπως έναν καταρράκτη. Δηλαδή, όταν επιλέγετε ένα στοιχείο σε μια λίστα θα εμφανιστεί η ακόλουθη λίστα, για παράδειγμα, δεν υπάρχει μενού «Γυναικεία ρούχα» (όταν τοποθετείτε πτώση των ειδών τα ρούχα), στη συνέχεια, όταν ένα από τα είδη, για παράδειγμα, «Μπλούζες» drop-down λίστα με τα στοιχεία: σακάκια, πάρκα, παλτά, παλτά και ούτω καθεξής. n.

Έχουμε αναφέρονται τα κύρια επιφανειακή τρόπους με τους οποίους μπορείτε να δημιουργήσετε μια αναπτυσσόμενη λίστα. Φυσικά, υπάρχουν πολλές αποχρώσεις του HTML, στο CSS και JavaScript, που σας επιτρέπουν να αλλάξετε τη λειτουργικότητα και την εμφάνιση των απόψεων λίστες.