Eingabeschaltflächen werden in Webformularen verwendet, bei denen ein Benutzer eine Option aus einer größeren Sammlung auswählen muss. Dies geschieht häufig bei eindeutigen Werten wie Newsletter-Abonnements, Profileinstellungen und Übergabekategorien. Ich habe immer die alten Eingabeschaltflächen im Digg-Stil gemocht, in denen Sie auf einen Link klicken, um Ihre Story-Kategorie auszuwählen.
In diesem Tutorial möchte ich zeigen, wie wir eine ähnliche Schnittstelle mit CSS3 und jQuery erstellen können. Alle Eingabe-Optionsfelder befinden sich weiterhin im Formular selbst, sind jedoch auf der Seite ausgeblendet. Stattdessen aktualisieren wir die ausgewählte Auswahl mit JavaScript und haben sogar die Möglichkeit, diesen Wert in HTML anzuzeigen (oder an ein Backend-Skript zurückzugeben). Schauen Sie sich meine Beispieldemo an, um eine Vorstellung davon zu bekommen, was wir bauen.
Live Demo - Quellcode herunterladen
Die Webseite erstellen
Zuerst müssen Sie eine lokale Kopie von jQuery herunterladen und einen Link zu einem externen CSS-Dokument mit dem Namen "" einfügen styles.css. Der JS-Code ist nicht zu kompliziert, aber Sie könnten davon profitieren, wenn Sie ihn in eine separate .js-Datei verschieben. Es hängt davon ab, ob für Ihre Website zusätzliche Skripte erforderlich sind, die beim Rendern der Seite Zeit sparen würden.
Der innere Seitenkörper enthält nun eine kleine Anzahl wichtiger Teile. Wir haben eine Zeitspanne mit der ID #radiovaltxt So zeige ich die ausgewählte Eingabe an. Wenn ein Benutzer auf eine der Seitenverknüpfungen klickt, wird dieser Bereichswert mit dem aktuell ausgewählten Eingabewert aktualisiert. Darunter habe ich ein neues Formular erstellt, das nichts lädt. Es ist eher ein Platzhalter, um zu sehen, wie der HTML-Code aussehen soll.
Sie finden das div #radiobtns enthält eine Anzahl von div-Zeilen, die außerdem ungeordnete Elementlisten enthalten. Jede Zeile basiert auf einem einzelnen Kategoriethema, und der Benutzer kann eine der Optionen zum Markieren der ausgewählten Kategorie auswählen. Ich habe nur eine Reihe von Links kopiert, aber alle sind sehr ähnlich aufgebaut.
Es ist wichtig zu verstehen, dass die Ankerverbindungs-ID mit einem entsprechenden Eingabeknopfwert übereinstimmt. So können wir feststellen, welcher Link angeklickt wurde und wie dieser mit der Radioauswahl übereinstimmt. Sie finden diese tatsächlichen Eingänge innerhalb eines Div #fullradios am unteren Rand des Formulars.
Ich habe sie standardmäßig versteckt und der ganze Zweck ist, sie nie wirklich auf der Seite anzuzeigen. Wenn Benutzer mit unserer eigenen benutzerdefinierten Benutzeroberfläche interagieren können, besteht keine Notwendigkeit, dass sie die Funkeingänge manipulieren. Zugegeben, wir könnten stattdessen die Eingaben erstellen, die mit einem Label verknüpft sind, für das keine jQuery erforderlich ist. Der Effekt ist jedoch auch schwieriger und erfordert CSS3-kompatible Webbrowser.
Die Katzenlinks gestalten
Mein Standard-Stylesheet enthält alle typischen Resets und Seitenstrukturen, wie Sie es erwarten würden. Die Eingabefelder werden mit ausgeblendet Anzeige: keine durch Targeting des übergeordneten div-Elements. Außerdem ist der Text für den Bereich so gestaltet, dass er auf den oberen Rand der Seite zentriert erscheint. Sie werden dies wahrscheinlich nicht auf einer Live-Website verwenden, sondern geben Sie den Wert stattdessen mithilfe eines ausgeblendeten Felds in das Formular ein.
Jede Zeile hat eine einzige ungeordnete Liste, und das allererste Element erhält eine Klasse von .Elternteil. So habe ich die Kategorienliste organisiert. Der übergeordnete Artikel selbst ist kein Verknüpfung für jeden Eingang festgelegt. Sie können dies in Ihrem eigenen Design ändern, aber es ist sinnvoller, einen Typ einer übergeordneten Kategoriebezeichnung zu verwenden, um die Auswahl zu definieren. Dieses übergeordnete Element erhält eine feste Breite von 110 Pixeln, um mehr Platz zwischen den Links zu schaffen.
Ich schrieb auch eine bemerkenswerte Klasse von .sel die auf das ausgewählte Linkelement angewendet wird. Sobald ein Benutzer auf einen der Link-Werte klickt, müssen wir wissen, dass er ausgewählt und bestätigt wurde. Diese ausgewählte Klasse wird entfernt und auf neue Links angewendet, wenn der Benutzer zwischen den Kategorien wechselt.
Eingabeauswahl mit jQuery
Um die Optionsfelder manuell zu aktivieren oder zu deaktivieren, müssen Sie ein wenig in jQuery eintauchen. Es gibt viele häufig gestellte Fragen zu Stack Overflow, die sich mit dieser Idee auseinandersetzen, und die Techniken haben sich in den verschiedenen Iterationen der jQuery-Bibliothek geändert. Dieses Skript befindet sich am unteren Rand der Seite index.html. Ich werde es zum besseren Verständnis in Segmente unterteilen.
Wenn ein Benutzer auf einen dieser Links klickt, verwenden wir sofort event.preventDefault () und übergeben die click-Ereignisvariable. Dadurch wird der HREF-Wert nicht mehr geladen, sodass der Seitensprung nicht mit Hash-Links verknüpft wird. Die Variable catid ist eine Zeichenfolge, die in der Syntax eines jQuery-Selektors gebildet wird.Er nimmt die Verbindungs-ID und formt sie in den ID-Wert des entsprechenden Funkeingangs um. Die andere Variable geprüfter Eingang Ruft den Wert des aktuell ausgewählten Radios ab. Wenn nichts ausgewählt ist, erhalten wir einen Rückgabewert von undefined.
Nun können wir mehr in den logischen Code einbrechen, indem wir zunächst prüfen, ob noch nichts ausgewählt ist. In diesem Fall verwenden wir die .prop () - Methode von jQuery zum Festlegen der geprüften Eigenschaft. Ansonsten zielen wir mit jedem Funkgerät ab Eingabe [Name = 'Kategorie'] und entfernen Sie die markierte Option, um zu keiner Auswahl zurückzukehren. Dann aktualisieren wir basierend auf der zuletzt angeklickten Funkverbindung.
Danach erstelle ich eine andere Variable newval was wiederum den aktuell ausgewählten Funkwert prüft. Wenn dieser Wert mit der ID des Links übereinstimmt, wissen wir, dass er erfolgreich geprüft wurde, und zeigen den neuen Wert in HTML an. Dieser Schritt wird wahrscheinlich auf keiner Live-Produktions-Website nützlich sein, aber es ist schön, dass diese Demo zeigt, wie alles hinter den Kulissen funktioniert.
Dieser letzte Codeabschnitt befasst sich mit der Aktualisierung des aktuell ausgewählten Links. Wenn der aktuelle Link bereits eine .sel Klasse dann ist es schon ausgewählt und wir machen nichts. Ansonsten ist es einfacher, auf jeden Link im Inneren zu zielen #radiobtns und entfernen Sie die Klasse, um dann unseren aktuellen Link mit zu aktualisieren $ (this) .addClass ('sel').
Merken $ (das) ist lediglich ein Platzhalter für alle derzeit aktiven jQuery-Selektoren, und in diesem Fall handelt es sich um das Klickereignis, das für alle Kategorienlinks ausgeführt wird.
Live Demo - Quellcode herunterladen
Ich kann mir nur eine Fülle von Lösungen vorstellen, warum Entwickler Radioeingänge verwenden würden. Moderne Webtechniken bieten so viele Möglichkeiten für die Gestaltung der Benutzeroberfläche. Dies ist eine interessante Möglichkeit, ein Radio Button-Erlebnis zu etwas ganz Einzigartigem zu gestalten.
Ich hoffe, dieses Tutorial kann Webentwicklern, die mit großen Formularen und Eingabefeldern arbeiten, einige Ideen geben. Sie können auch eine Kopie meines Tutorial-Quellcodes herunterladen, um genau zu sehen, wie dies auf Ihrem eigenen Computer funktioniert.