Konvertieren HTML Checkbox in iOS 7 Switch mit Switchery.js

Checkbox ist sehr nützlich für die Benutzereingaben. Wenn Benutzer einen echten Wert eingeben, wird in der kleinen quadratischen Box ein Häkchen angezeigt. Das Aussehen der Checkbox kann einfach über CSS angepasst werden. Die Anpassung betrifft jedoch nur die Box und den Prüfstil . Um das Kontrollkästchen mit einem wirklich anderen Design anzupassen, ist einiges an Programmierung erforderlich.

Mit Hilfe von Switchery ist Checkbox-Anpassung ein Kinderspiel. Es ist in der Lage, Ihr Checkbox-Element automatisch in einen schönen iOS7-ähnlichen Schalter umzuwandeln. Die Schalter können auch an Ihr Design angepasst werden. Lass es uns überprüfen.

Erste Schritte mit Switchery

Switchery ist eine kostenlose Standalone-Javascript-Bibliothek. Um es zu installieren, müssen Sie nur die Switchery Javascript- und Style-Datei in Ihr Web einfügen. Sie können beide Dateien von GitHub erhalten.

Um Ihre altmodische Checkbox zu konvertieren, fügen Sie einfach Ihr Checkbox-Element in eine Klasse ein, die auf Switchery verweist.

Den Anfangszustand der Checkbox zu geben ist auch sehr einfach. Sie können dies tun, indem Sie das checked Attribut in HTML für den aktivierten Status beim ersten Laden einbeziehen. Zum Beispiel fügen wir eine demo Klasse in ein Kontrollkästchen mit einem aktivierten Status wie folgt ein:

Derzeit ändert sich das Kontrollkästchen noch nicht. Wir müssen noch den folgenden JavaScript-Code in den HTML-Code einfügen. Hier legen wir die definierte Checkbox-Klasse ab und geben gegebenenfalls einige Optionen an.

Das ist es!

Fertigen Sie den Schalter besonders an

Um etwas Option zu geben, kann es innerhalb des Javascript getan werden. Diese Option kann das Erscheinungsbild des Standardschalters ändern. Die folgenden sind alle verfügbaren Optionen:

• color : Um die Farbe des Schalterelements zu ändern, arbeiten Sie mit dem HEX- oder RGB-Wert
• secondaryColor : Ändert die Statusfarbe "off" des Schalters shadow und border
• className : className den switch-Element-Klassennamen an, der in switchery.css className
• disabled : Aktivieren oder Deaktivieren der Click-Ereignisse, gefüllt mit booleschen Werten (true oder false)
• disabledOpacity : Um die Schalteropazität zu ändern, wenn sie disabled ist, reicht sie von 0 bis 1
• speed : Ändern Sie die Dauer der Übergangszeit, zB '0.1s', '0.5s', '2.2s'

Zum Beispiel ändern wir mit unserem vorherigen Schalter seine erste und zweite Farbe. In der Variable init, nach elem Attribut, einfach die Option in paar curl Klammer wie elem :

Und hier ist das Ergebnis:

Anstatt nur den Statusentwurf anzupassen, gibt es noch viele verfügbare Optionen wie das Anzeigen mehrerer Switches oder das Verknüpfen des Switches mit anderen Elementen und das Abrufen des aktuellen Status. Wie immer ist die Dokumentationsseite ein nützlicher Ort für einen Besuch.

Fazit

Mit einem Werkzeug wie Switchery wird das Anpassen von Design von jedem Gerät immer einfacher. Darüber hinaus wurde es getestet und wird auf vielen modernen Browsern wie Chrome, Firefox, Opera, Safari und IE8 + unterstützt. Wenn Sie ein anderes UI-Widgets-Design im iOS 7-Stil anpassen möchten, sollten Sie Powerange für die Bereichsreglersteuerung ausprobieren.

10 kostenlose Apps für LinkedIn, die Sie wissen müssen

Wenn Sie dies lesen, haben Sie wahrscheinlich ein Profil auf LinkedIn, der beliebten Networking-Website für Profis. Es spielt keine Rolle, ob Sie das Netzwerk mögen oder hassen (viele Unterstützer auf beiden Seiten des Zauns). Wer sein Netzwerk von mehr als 300 Millionen Mitgliedern nutzen möchte, wird dieses Stück Kuchen essen wollen.Um I

(Tech- und Design-Tipps)

Die wahren Geschichten hinter 10 beliebten Memen

Ein Freund, den ich kenne, liebt es, die Fotos seiner Freunde in Meme zu verwandeln. Er wird durch die Facebook-Fotoalben seiner Freunde blättern und sehr unglückliche, aufrichtige Derp-Gesichter auswählen, um etwas zu verwenden, etwas Text hinzuzufügen und es dann auf seine ahnungslosen Freunde loszulassen. So

(Tech- und Design-Tipps)