Mobile App-Schnittstellen verwenden seit einiger Zeit Schiebeschalter zum Ein- und Ausschalten. Diese befinden sich am häufigsten auf der Einstellungsseite, auf der Benutzer die Einstellungen für ihr Konto aktualisieren können. Aber Webdesigner haben aufgefallen und viele offene Plattformen gebaut, um eigene Ein / Aus-Schieberegler zu erstellen.
In diesem Tutorial möchte ich speziell auf das von Simon Tabor entwickelte jQuery Toggles-Plugin eingehen. Im Lieferumfang sind 5 vordefinierte UI-Designs enthalten, die Sie leicht aktualisieren können. Außerdem haben Sie die Möglichkeit, Klick- oder Folienereignisse auszulösen, die möglicherweise auch in ein Formular-Kontrollkästchen auf der Seite eingebunden werden. Jeder, der einen modernen, JavaScript-fähigen Browser verwendet, sollte die volle Wirkung erzielen können. Werfen Sie einen Blick auf meine Live-Demo, um zu sehen, was wir bauen.
Live Demo - Quellcode herunterladen
Fertig machen
Der erste Schritt ist das Herunterladen einer Kopie des jQuery Toggles-Plugins. Sie können dies aus dem Github-Repo entnehmen, das auch ein kleines Live-Beispiel enthält. Ich habe bereits eine lokale Kopie von jQuery in einen relativen Ordner / js heruntergeladen. Verschieben Sie die Datei toggles.min.js auch in diesen Ordner.
Jetzt müssen Sie das CSS kopieren toggles.css zusammen mit dem gesamten themes / Verzeichnis. Dazu gehören die wichtigsten Stylesheets, die im Lieferumfang des Plugins enthalten sind. Beachten Sie, dass sich die Datei toggles.css im selben Verzeichnis wie der Ordner themes / befindet, damit alles ordnungsgemäß funktioniert.
Beachten Sie auch, dass ich mit dem Namen auf eine andere Motivdatei verweise toggles-soft.css. Auf diese Weise kann ich eine weiche CSS-Klasse auf einen Container anwenden, der dann alle meine internen Toggle-Elemente beeinflusst (später von jQuery angesteuert). Andere Themen sind Hell, Dunkel, iPhone oder Modern. Sie können auf der Startseite des Plugins sehen, wie sie aussehen.
Jetzt hat das Formular selbst außer dem Schalter-Schieberegler nicht viel Außergewöhnliches. Wenn Sie auf "Senden" klicken, löst das Formular eine jQuery-Funktion aus, die die typische Seitenaktualisierung anhält. Stattdessen geben wir direkte Werte der Felder unterhalb des Formulars aus, um zu prüfen, wie Sie mit Antworten in Ihrer eigenen Webanwendung umgehen können.
Das Formular erstellen
In meinem Körperinhalt habe ich ein Formularelement mit der ID erstellt #Grundform. Dies kann mithilfe von jQuery anvisiert werden, um die Übermittlungsfunktionalität zu verbessern. Ich habe auch die Klasse angehängt toggle-soft Dies ist meine Standardauswahl von Designs bei der Gestaltung dieses Layouts.
Wenn wir zum unteren Rand des Formulars springen, werden Sie ein Div mit der ID bemerken #Email Updates. Der Ein / Aus-Schieberegler in meinem Beispiel bestimmt, ob ein neuer Benutzer zur Liste der Newsletter-Abonnenten hinzugefügt werden soll. Die zusätzliche Klasse .Umschalten So richten wir alle Elemente über jQuery an. .schweben rechts Es handelt sich lediglich um zusätzliche Positionierungsregeln, um den Schalter gut in das Formular einzupassen.
Beachten Sie auch das Kontrollkästchenelement unter der ID #emailupdatescheck. Ich habe dies deaktiviert und auf der Seite mit Anzeige ausgeblendet: none; damit Benutzer nicht verwirrt werden. Glücklicherweise können wir das Kontrollkästchen in jQuery noch dynamisch aktualisieren, indem wir es als Optionsparameter festlegen.
Den Switch generieren
Denken Sie daran, dass Sie mit dieser Funktion eine Vielzahl zusätzlicher Parameter einstellen können, um die Anzeige anzupassen. Überprüfen Sie die Beispielcodes auf Github auf eine vollständige Liste. In meinem Beispiel können wir einen großen Teil der nützlichen Optionen aktualisieren, die sich auf die Benutzererfahrung auswirken können.
Sie finden diesen JS-Code am Ende der Seite direkt vor dem Schließen Etikett. Die Auswahlklasse .Umschalten funktioniert für jedes andere Toggle-Element, das auf dieser Seite hinzugefügt wird. Sie können praktisch unendlich viele Ein / Aus-Schalter mit weniger Aufwand erzeugen - obwohl Sie auch für jeden Schieberegler ein neues Kontrollkästchen erstellen müssen. Die Funktion toggles () wird mit internen Parametern in geschweiften Klammern aufgerufen.
ziehen und klicken Mit diesen beiden Optionen können Sie angeben, mit welcher Art der Interaktion der Wert des Schiebereglers geändert wird. In meinem Beispiel wird Drag auf false gesetzt, was bedeutet, dass Sie nur auf den Schieberegler klicken müssen, um die Werte zu ändern. Der Text sollte selbsterklärend sein, wie der innere Anzeigeinhalt aktualisiert werden soll. Denken Sie daran, diese Werte in einem anderen Satz geschweiften Klammern zu kapseln, da dies sonst nicht funktioniert.
Der Checkbox-Parameter ist sehr nützlich, damit wir ein echtes Formularelement übergeben können, das an diesen Schieberegler angehängt wird. Es wird eine beliebige jQuery-Objektauswahl erforderlich, und in diesem Fall ziele ich auf unser ausgeblendetes Kontrollkästchen. Beide Werte werden anfangs in die OFF-Position geladen, und wir können sehen, wie dieser Wert aktualisiert wird, indem etwas Ausgabe-Text angezeigt wird.
Formularausgabewerte
Wenn Sie auf die Schaltfläche "Senden" klicken, wird möglicherweise ein neuer Codeblock darunter angezeigt. Dadurch wird der aktuelle Textwert der Felder Benutzername und Kennwort zusammen mit einem Wert für das Kontrollkästchen des Schiebereglers angezeigt. Schauen wir uns den letzten Block von jQuery-Code an:
Immer wenn ein Benutzer das Formular übergibt, führen wir e.preventDefault () aus, um die Übermittlung zu beenden.Dann stellen wir fest, ob das ausgeblendete Kontrollkästchen derzeit aktiviert ist oder nicht. Wenn ja, wird der Wert des Schiebereglers auf "Ein" gesetzt. (sonst ist es auf "off" gestellt). Sie können diese Werte theoretisch beliebig machen, solange es sinnvoll ist. Es gibt auch zwei weitere Variablen, die den Benutzernamen und die E-Mail-Eingabewerte enthalten.
Zum Schluss habe ich einen verketteten Satz von String-Variablen zusammengestellt, aus dem sich mein Beispiel-HTML zusammensetzt. Dies wird in einem Div mit der ID an die Seite angehängt #codeoutput. Es wird zunächst nichts angezeigt, aber sobald ein interner HTML-Code vorhanden ist, erscheint er wie ein Code mit nur einem Code. Dies ist lediglich eine Methode, um den Wert eines Schiebereglers zu bestimmen, aber er funktioniert hervorragend und ermöglicht es Ihnen sogar, ihn mit Ajax in ein Backend-Skript zu übergeben.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Nicht für jedes Formular ist ein Kontrollkästchen oder ein Schalterelement erforderlich. Die Seiten der Benutzerprofileinstellungen sind ein üblicher Ort, um diese Schieberegler zu verwenden. Andere Orte können Online-Foren oder soziale Netzwerke umfassen, in denen Benutzer zwischen Freigabe- und Anzeigeoptionen wechseln können.
Letztendlich ist dieses Plugin eine fantastische Wahl für die Implementierung schneller und einfacher UI-Eingabeschieberegler. Fühlen Sie sich frei, eine Kopie meines Quellcodes herunterzuladen und versuchen Sie, Ihr eigenes ähnliches Formular-Design zu erstellen.