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.

In InkHunter können Sie sich mit Tattoo-Designs herumschlagen, bevor Sie eingefärbt werden

Tattoos sind faszinierende Kunstwerke, auch wenn viele von uns nicht den Mut haben, unter die Nadel zu gehen. Wenn Sie, wie ich, neugierig darauf sind, wie ein Tattoo auf Ihrer eigenen Haut aussehen würde, können Sie mit einer App namens InkHunter genau das tun.Um InkHunter zu verwenden, müssen Sie zuerst ein Gesichtsbild auf einen Teil Ihres Körpers zeichnen, an dem das Tattoo erscheinen soll. Na

(Tech- und Design-Tipps)

Sollten Sie einen Webdesigner einstellen oder einen Web Builder verwenden?

Web Builder sind im Grunde eine magische Toolbox für Nicht-Web-Designer. Was einmal außerhalb der Reichweite der Menschen war, kann jetzt mit wenig Aufwand erfasst werden. Aber es gibt Dinge, die Web-Builder nicht tun können, die Web-Designer können. Die Frage ist jetzt, sollten Sie einen Webdesigner engagieren, um Ihre Website für Sie zu erstellen, oder einfach einen Web Builder verwenden und ihn selbst erstellen?Web-

(Tech- und Design-Tipps)