Hilfreiche Ratschläge

Dobrovoi Meister mit der Seele getan

Pin
Send
Share
Send
Send


Das Option-HTML-Tag wird verwendet, um eine Dropdown-Liste zu erstellen, mit der der Benutzer eine Option aus einem vordefinierten Satz von Werten auswählen kann.

Der für den Benutzer sichtbare Text kann von dem im value-Attribut angegebenen Text abweichen. So erstellen Sie eine Dropdown-Liste:

  • Mit dem Tag wird eine Dropdown-Liste erstellt.

Verwenden des value-Attributs

Wie bereits erwähnt, kann der Wert des value-Attributs vom auf der Seite angezeigten Text abweichen. Beispielsweise können Sie die Namen von Ländern oder Farben für Benutzer anzeigen und Shortcodes im value-Attribut verwenden.

Im folgenden Beispiel erstellen wir eine Dropdown-Liste mit dem Attribut value:

Ein Beispiel für den Zugriff auf die ausgewählte Option in JavaScript

Lassen Sie uns nun ein Beispiel für den Zugriff auf den Wert der ausgewählten Option und die Ausführung einiger Aktionen erstellen. Wir erstellen die gleiche Liste wie im obigen Beispiel mit Farbauswahl. Klicken Sie nach der Auswahl auf die Schaltfläche, um diese Farbe auf das Dokument anzuwenden:

Der folgende Code wird für den Optionswert HTML verwendet:

Die folgende Codezeile wird in JavaScript verwendet, um auf den Wert des value-Attributs der Variante zuzugreifen.

So greifen Sie auf diesen Wert in HTML zu:

Sie können auf den Wert auch mit der jQuery-Methode $ .val () zugreifen:

Ersetzen Sie diese Zeile im obigen Beispiel, und der Code zeigt den Shortcode- / Farbwert im value-Attribut an, nicht den sichtbaren Text.

Ein Beispiel für das Abrufen eines Werts in einem PHP-Skript

In diesem Beispiel wird der Wert der aus der Dropdown-Liste ausgewählten Option abgerufen und das Formular mithilfe des Tags im Markup-Abschnitt erstellt. Nachdem Sie eine Farbe aus der Dropdown-Liste ausgewählt haben, klicken Sie auf die Schaltfläche "Senden". Die Formulardaten werden in dieselbe PHP-Datei übertragen, woraufhin die ausgewählte Farbe angezeigt wird:

Die im Beispiel verwendete Formularmethode ist POST, sodass Sie die Formularwerte mit dem PHP-Array $ _POST [““] abrufen können. Dies ist der im Beispiel verwendete Formularcode:

Und so wird das PHP-Skript verwendet, um den HTML-Auswahloptionswert zu erhalten:

Wenn im Formular eine GET-Methode angegeben ist, verwenden Sie das PHP-Array $ _GET [""].

Definieren von Dropdown-Stilen mit CSS

Schauen wir uns nun an, wie Sie Dropdown-Stile mit CSS definieren. In der folgenden Demo habe ich einige einfache CSS-Eigenschaften und CSS3-Verlaufseigenschaften verwendet:

Zusammen mit dem linearen Farbverlauf wird hier die Box-Shadow-Eigenschaft verwendet. Der vollständige CSS-Code lautet wie folgt:

Abgerundete Ecken mit der Eigenschaft border-radius

Für die HTML-Auswahloption setzen wir den CSS3-Eigenschaftsrahmenradius so, dass abgerundete Ecken entstehen. Das Farbschema ändert sich ebenfalls. Sie können nach Belieben mit Rahmen, Breiten, Rändern und anderen Eigenschaften experimentieren:

Verwendung mehrerer CSS-Attribute und -Stile

Verwenden Sie das multiple-Attribut, damit Benutzer mehrere Optionen aus einer Liste auswählen können. Im obigen Beispiel kann nur eine Option ausgewählt werden. Bei Verwendung mehrerer Optionen können Sie mehrere Optionen auswählen, indem Sie die STRG-Taste drücken:

Verwenden des Bootstrap-Frameworks und der Plugins, um schöne Dropdown-Listen zu erstellen

Wenn Sie das Bootstrap-Framework verwenden, haben Sie die Möglichkeit, Plugins zum Erstellen cooler HTML-Optionen zu verwenden.

Ein solches Plugin ist Bootstrap-Select. Es werden nützliche Funktionen zur Dropdown-Liste hinzugefügt. Sie können beispielsweise nach einem Wert suchen, indem Sie Text in ein Feld eingeben. Dies ist besonders nützlich, wenn die Dropdown-Liste viele Optionen enthält.

Darüber hinaus werden alle ausgewählten Optionen aktiviert, und Sie können die Anzahl der ausgewählten Optionen mit dem Mehrfachattribut begrenzen.

In der obigen Demoversion kann der Benutzer zwei Optionen aus der Liste auswählen:

Demo des Dropdowns mit einer Suchoption

Mit demselben Plugin können Sie Benutzern die Möglichkeit geben, in der HTML-Auswahlliste nach den gewünschten Optionen zu suchen:

Diese Publikation ist eine Übersetzung des Artikels „HTML-Auswahl-Dropdown: Erstellen und Stylen mit CSS lernen“, der vom freundlichen Team des Internet-Technologieprojekts erstellt wurde

Ausgeblendete Inhalts-Dropdown-Blöcke mit CSS3

Während des Erstellens einer Site oder eines Blogs und des weiteren Füllens mit Inhalten ist es aus verschiedenen Gründen manchmal erforderlich, einen Teil des Textes auszublenden, umfangreichere Informationen in einem vorerst ausgeblendeten Block abzulegen und dem Benutzer dennoch anzuzeigen, dass dies der Fall ist etwas anderes, und geben Sie ihm die Möglichkeit, versteckte Inhalte anzuzeigen, ohne zur nächsten Zeile oder Seite zu wechseln.
Früher wurde ein Javascript-Stapel verwendet, um eine solche Lösung zu implementieren, aber jetzt kann all dies mit den erstaunlichen CSS3-Eigenschaften sehr einfach durchgeführt werden.

Heute schauen wir uns an, wie Sie am einfachsten ausgeblendete Seiten mit Inhalten auf den Seiten einer Website und in separaten Nachrichten erstellen können, die geöffnet werden, wenn Sie auf ein bestimmtes Textelement klicken und ausschließlich CSS3-Eigenschaften verwenden. Ein Schalter kann ein einzelnes Wort oder eine hervorgehobene Phrase sowie ein ganzer Satz oder ein informatives Symbol sein.
Solche Blöcke werden häufig auf Seiten mit einer großen Menge an Inhalten verwendet, um diese strukturierter und kompakter zu gestalten. Der gesamte Inhalt ist in so genannte Gruppen unterteilt, in denen dem Benutzer nur Überschriften zur Anzeige angeboten werden. Der gesamte Text ist standardmäßig ausgeblendet und Sie können ihn durch Klicken anzeigen auf ein bestimmtes Element (siehe oben).

Versuchen wir, auf überschüssiges Wasser zu verzichten. Schauen wir uns diesen einfachen Mechanismus in Aktion an. An einem guten Beispiel können Sie auch etwas bearbeiten, wenn Sie möchten:

In der Rolle der Schalter der Dropdown-Blöcke mit zusätzlichen Informationen wird in keiner Weise Text verwendet, der nicht hervorgehoben oder markiert ist, mit einem eindeutigen Angebot, darauf zu klicken, was Sie tun müssen, ohne Angst und Zweifel, um den verborgenen Text zu sehen)))


Wie Sie sehen, funktioniert alles mehr als gut, versteckte Inhalte, wie sie ohne Probleme angezeigt werden, verschwinden durch einen leichten Mausklick, und gleichzeitig haben wir das Minimum an ausführbarem Code sowohl im HTML-Framework als auch bei der Erstellung von CSS-Stilen berücksichtigt. Ohne zusätzliche Javascript-Bibliotheken anzuschließen, mit ewigem Alarm, und ob sie benutzerseitig deaktiviert sind.
Implementieren Sie all diese Aktionen, die dank der CSS3-Pseudoklasse möglich sind : geprüftwird auf Elemente der Benutzeroberfläche angewendet, z. B. auf Kontrollkästchen. Was wir tatsächlich getan haben, haben wir im Attribut tag type das Kontrollkästchen value sowie einen Bezeichner zugewiesen, der einem eindeutigen Bezeichner entspricht für = "hd-1" Umschalten des aktuellen Blocks. Wir werden die Kontrollkästchen gründlich und für immer ausblenden, indem wir die Eigenschaft display: none in der Klasse .hide schreiben.
Eigentlich gibt es hier nichts Besonderes zu erklären, der gesamte Mechanismus zum Ein- und Ausschalten von versteckten Blöcken besteht aus drei Elementen:

  • Checkbox - Tag mit Wert Kontrollkästchen Attribut Typ und mit einer spezifischen Bindungskennung
  • Titel (Textschalter) - Tag mit einem eindeutigen Bezeichnerwert für das Attribut für, (Der Bezeichner muss mit dem Bezeichner des Tags identisch sein Eingabe mit Wert Kontrollkästchen Attribut Typ).
  • Der Inhaltsblock ist ein div-Tag, in dem er bis zu besseren Zeiten aufbewahrt wird, bis der Benutzer auf verschiedene versteckte Inhalte klickt (Text, Bilder usw. usw.).

Ich hoffe, aus meiner verwirrten Erklärung wurde klar, was das Ganze war. CSS wendet neue Stile an (unter Verwendung einer Pseudoklasse) geprüft), um den zuvor ausgeblendeten Inhaltsblock anzuzeigen, wenn der Benutzer auf das mit dem Kontrollkästchen verknüpfte Element mit einer eindeutigen Kennung klickt.

Daraus folgt wichtiger hinweis:

Wenn Sie mehrere ausgeblendete Blöcke auf einer Seite verwenden, muss jeder Switch eine eindeutige Kennung haben, die sich von den Kennungen in anderen Blöcken unterscheidet.

Also haben wir in Worten herausgefunden, wo und warum wir uns jetzt das HTML-Framework der gesamten Konstruktion ansehen:

Zum Öffnen hier klicken!


Als nächstes gehen wir direkt zur Bildung von CSS-Stilen über, ohne die diese ganze Konstruktion nicht funktionieren wird. Das Minimum an Code ohne Design hat nur den Hintergrund für den Dropdown-Block ein wenig hervorgehoben, um die Rahmen des verborgenen Texts anzuzeigen. Sie können nach Belieben Blöcke zeichnen, Ränder und Ecken aufhängen, Text auswählen oder den Hintergrund mit einem Farbverlauf füllen.

/ * Kontrollkästchen und Blöcke mit Inhalt verstecken * / .hide, .hide + label

div <Anzeige: Keine,> / * Beschriftung der Textansicht * / .hide + Beschriftung, .hide: Aktiviert + Beschriftung <Abstand: 0, Farbe: Grün, Cursor: Zeiger, Rand unten: 1px grün gepunktet,> / * Ansicht Beschriftungstext, wenn der Schalter * / .hide aktiv ist: markiert + Beschriftung <Farbe: rot, Rahmen unten: 0,> / * Wenn das Kontrollkästchen aktiviert ist, werden Blöcke mit dem Inhalt * / .hide: markiert + Beschriftung + div angezeigt


Dies ist alles, für ein asketisches Beispiel, ein ausreichendes Minimum. Aber in der Tat werden wir überhaupt nicht sein, wenn wir nicht mindestens einige Brötchen aufhängen, und es ist besser für den Benutzer, visuell zu sagen, wo man klickt.
Im zweiten Beispiel fügte er ein einfaches Symbol in Form eines Plus hinzu, das deutlich anzeigt, dass sich hier etwas anderes verbirgt, wenn darauf geklickt wird, es sich sofort in ein Minus verwandelt und ein bisschen Animation verschraubt, wenn es versteckten Blöcken mit Inhalt erscheint, und das alles ausschließlich mit CSS3 Magie.

/ * Kontrollkästchen und Blöcke mit Inhalt verstecken * / .hide, .hide + label


In allen Fällen ist die Methode zweifellos gut, aber wie immer, nicht einmal überraschend, treten Probleme mit der ewigen Bremse des Fortschritts, IE-Browser, Pseudoklasse auf geprüft Es werden nur die neunte und modernere Version dieses Browsers unterstützt. Für ältere Versionen von IE-shki bleibt alles wie bisher, Sie müssen Javascript verwenden.

Mithilfe ausgeblendeter Kontrollkästchen können Sie auf einfache Weise Registerkarten, Registerkarten, ein modales Fenster, Blöcke im Akkordeonstil, Schieberegler, Galerien und vieles mehr implementieren.

Ich wäre Ihnen dankbar, wenn Sie einen Link zu einem Beitrag in Ihren sozialen Netzwerken teilen würden:

Schritt 2) CSS hinzufügen:

/ * Dropdown-Schaltfläche * /
.btn <
Hintergrundfarbe: # 2196F3,
Farbe: Weiß,
Polsterung: 16px,
Schriftgröße: 16px,
Grenze: keine,
Gliederung: keine,
>

- Wird benötigt, um den Dropdown-Inhalt zu positionieren * /
.dropdown <
Position: absolut,
Anzeige: Inline-Block,
>

/ * Dropdown-Inhalt (standardmäßig ausgeblendet) * /
.dropdown-Inhalt <
Anzeige: keine,
Position: absolut,
Hintergrundfarbe: # f1f1f1,
Mindestbreite: 160px,
Z-Index: 1,
>

/ * Links in der Dropdown-Liste * /
.dropdown-Inhalt a <
Farbe: schwarz,
Polsterung: 12px 16px,
Textdekoration: keine,
Anzeige: Block,
>

/ * Ändere die Farbe der Dropdown-Links beim Hover * /
.dropdown-content a: hover

/ * Dropdown-Menü beim Hover anzeigen * /
.dropdown: Hover .dropdown-Inhalt <
Anzeige: Block,
>

/ * Ändere die Hintergrundfarbe der Dropdown-Schaltfläche, wenn der Dropdown-Inhalt angezeigt wird * /
.btn: Hover, .dropdown: Hover .btn <
Hintergrundfarbe: # 0b7dda,
>

Tipp: In unserem CSS-Dropdown-Lernprogramm erfahren Sie mehr über Dropdown-Listen.

Tipp: Öffnen Sie das Dropdown-Menü, um mehr über Popup-Dropdown-Listen zu erfahren.

Dropdown-Liste und JS

Normalerweise verzichte ich auf den Standardheader. Ich gebe nur den Hauptcode an:

Die HTML-Struktur ist recht einfach, eine normale Liste. Aber in der Kopfzeile befindet sich ein Skript, das dafür verantwortlich ist, unsere Liste anzuzeigen und auszublenden. Bitte beachten Sie, dass die Liste standardmäßig ausgeblendet ist und dafür verantwortlich ist Anzeige: keine . Und dann beginnt der Spaß - JavaScript.

Ich habe eine kleine Funktion geschrieben, die wie folgt funktioniert:

  • Ruft das Element nach ID ab (getElementById)
  • prüft welche Anzeige das Element hat (none oder block)
  • kehrt um.

Wir werden diese Funktion an den Link mit der Klasse "socialbutton" hängen, der wir das onClick-Ereignis zuordnen. Das heißt, wenn Sie auf den Link klicken, führen wir unsere Funktion aus. Diese Veranstaltung kann fast jedem Tag zugeordnet werden, die Liste ist sehr umfangreich. Überschriften, Absätze, Links und vieles mehr - im Allgemeinen ist es einfacher zu schreiben, was nicht unterstützt wird

Das ist alles für die Liste - nichts Besonderes in CSS, nur das Aussehen und Verhalten. Ich werde ihn bringen, für das ganze Bild:

Quellen herunterladen View in work
Hier ist so eine kleine Lektion, hauptsächlich natürlich für Anfänger. Ich hoffe, Sie haben etwas Neues für sich gelernt.

Verwandte Beiträge

Guten Tag.
Aber sagen Sie mir nicht, wie man ein schnelles und einfaches Menü mit mehreren Ebenen erstellt?
Sie klicken, es wird eine Liste erstellt, in dieser Liste wird auf eine bestimmte Zeile geklickt - und die neue Liste wird erstellt.

Ist es wirklich notwendig, für jede Liste ein eigenes Java-Skript mit einer eigenen Kennung zu erstellen?

Hallo Victor, bitte sag mir wie? lassen Sie dieses Skript auf 2 oder mehr Listen mit der Fähigkeit, ihre Parameter zu ändern, zutreffen?

Danke an den Autor. Die Möglichkeit der Verwendung von JS in den ersten Phasen des Lernens von JS zu verstehen, motiviert dazu, das Studium fortzusetzen. Nur ist es notwendig, mehr nach Funktion zu kauen, jedes Wort in jeder Zeile zu erklären, warum.

Tvim, OnMouseOver und OnMouseOut helfen Ihnen dabei. Google, da ist alles ganz einfach.

Sagen Sie mir, wie ich es machen soll, damit er sich wieder versteckt, wenn die Maus aus der Liste entfernt wird.

Vielen Dank für den guten Artikel.

Zwei Optionen: Erstellen Sie ein Sprite, und ersetzen Sie das Bild durch ein großes, wenn Sie den Mauszeiger bewegen. Es ist hässlich, aber einfach. Oder verbinden Sie das entsprechende JS-Plugin, um das Bild reibungslos zu ändern.

Und wie kann man es so gestalten, dass in der Liste, wenn man mit der Maus über das Symbol fährt, ein vergrößertes Bild des Symbols angezeigt wird?

Schönheit braucht meiner Meinung nach mehr, reibungslos dort und das alles.

Sie können natürlich verwirrt sein. Aber ich habe mir die Aufgabe gestellt, mich zu zeigen Arbeitsprinzip. Wer es braucht, wird Ruhe und alles andere finden.
Wenn es viele überflüssige Informationen gibt, die von geringer Relevanz sind, beginnt Verwirrung. Ich erinnere mich an mich

Pin
Send
Share
Send
Send