de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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.

30 kostenlose Online-Fotos, Videos und Musik-Editoren

30 kostenlose Online-Fotos, Videos und Musik-Editoren

Wir neigen dazu, uns stark auf unsere bevorzugten Desktop-Anwendungen wie Photoshop, GIMP, Audacity, Adobe Premier usw. zu verlassen, wenn es um den Umgang mit Multimedia-Dateien geht. Das ist auf unseren Desktops in Ordnung, aber was ist, wenn wir einen Editor am Computer eines Freundes oder einen öffentlichen am Arbeitsplatz verwenden müssen ?

(Tech- und Design-Tipps)

Verständnis von CSS-Schreibmethoden

Verständnis von CSS-Schreibmethoden

In diesem Beitrag werden wir sehen, was CSS-Schreibmethoden sind, einige bekannte Methoden und wie sie uns bei der Optimierung unseres CSS-Codes nützlich sein können. Beginnen wir mit der einfachsten Frage, um den Ball ins Rollen zu bringen. Was ist eine Methodik?Eine Methodik ist ein System von Methoden .

(Tech- und Design-Tipps)