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.

Wie Sie Ihre Inhalte schwer replizieren können

Wie Sie Ihre Inhalte schwer replizieren können

Wussten Sie, dass das Internet derzeit ungefähr 3, 3 Milliarden indizierte Seiten hat - und zählt? Das entspricht einer unglaublichen Anzahl von 33 Milliarden Links zu Web-Inhalten, vorausgesetzt, jede Seite hat 10 Einträge. Lassen Sie das sinken.Wenn Sie ein Leser sind, ist das viel mehr Informationen, als Sie in einem Leben verbrauchen können . We

(Tech- und Design-Tipps)

Fintech: 7 Möglichkeiten, die Finanzen mit Tech eine Umgestaltung bekommt

Fintech: 7 Möglichkeiten, die Finanzen mit Tech eine Umgestaltung bekommt

Unsere Finanzen entwickeln sich weiter, und die Bankenbranche scheint kein großer Teil davon zu sein . Technologie macht unsere Finanzdienstleistungen schneller, billiger und effizienter, aber es sind vor allem Technologie-Startups und Fintech-Unternehmen, die den Weg für Finanzentwicklungen ebnen.M

(Tech- und Design-Tipps)