hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Convertir la case à cocher HTML en iOS 7 avec Switchery.js

La case à cocher est très utile pour fournir une entrée aux utilisateurs. Lorsque les utilisateurs entrent une valeur réelle, ils affichent une vérification dans la petite boîte carrée. Personnaliser l'apparence de la case à cocher peut être facilement fait via CSS. Même ainsi, la personnalisation n'affecte que la case et vérifie le style . Pour personnaliser la case à cocher avec un design vraiment différent nécessite un peu de codage.

Avec l'aide de Switchery cependant, la personnalisation de case à cocher est un morceau de gâteau. Il est capable de convertir automatiquement votre élément de case à cocher en un beau bouton de commande similaire à iOS7. Les commutateurs peuvent également être personnalisés pour correspondre parfaitement à votre conception. Regardons ça.

Commencer avec la commutation

Switchery est une bibliothèque javascript autonome et gratuite. Pour l'installer, il vous suffit d'inclure le javascript et le fichier de style Switchery dans votre site Web. Vous pouvez obtenir les deux fichiers de GitHub.

Pour convertir votre ancienne case à cocher, il suffit d'inclure votre élément de case à cocher avec une classe qui sera référée à Switchery.

Donner l'état initial de la case à cocher est également très facile. Vous pouvez le faire en incluant l'attribut checked dans le code HTML pour l'état vérifié lors du premier chargement. Par exemple, nous allons ajouter une classe de demo dans une case à cocher avec l'état vérifié comme suit:

Pour l'instant, la case à cocher ne change pas encore. Nous devons toujours ajouter le code javascript suivant dans le code HTML. C'est là que nous plaçons la classe checkbox définie, et donnons quelques options (si nécessaire).

C'est tout!

Personnalisez le commutateur

Pour donner une option, cela peut être fait dans le javascript. Cette option peut changer l'apparence du commutateur par défaut. Ce qui suit sont toutes les options disponibles:

  • color : pour changer la couleur de l'élément de commutation, travailler avec la valeur HEX ou RVB
  • secondaryColor : pour changer la couleur d'état "off" de l'ombre et de la bordure de l'interrupteur
  • className : personnalise le nom de la classe de l'élément switch dans switchery.css
  • disabled : pour activer ou désactiver le switch sur les événements click, rempli avec boolean (true ou false)
  • disabledOpacity : pour changer l'opacité du switch quand true est disabled, allant de 0 à 1
  • speed : changer la longueur du temps de transition, par exemple '0.1s', '0.5s', '2.2s'

Par exemple, avec notre précédent commutateur, changeons sa couleur première et secondaire. Dans la variable init, après l'attribut elem, il suffit de mettre l'option dans le couple curl bracket comme ceci:

Et voici le résultat:

Au lieu de personnaliser uniquement la conception d'état, il existe encore de nombreuses options disponibles telles que l'affichage de plusieurs commutateurs ou la liaison du commutateur avec d'autres éléments et l'obtention de son état actuel. Comme toujours, la page de documentation est un endroit utile à visiter.

Conclusion

Avec un outil comme Switchery, adapter n'importe quel type de design à partir de n'importe quel appareil devient de plus en plus facile. Plus encore, il a été testé et pris en charge sur de nombreux navigateurs modernes tels que Chrome, Firefox, Opera, Safari et IE8 +. Si vous voulez adapter une autre conception de widgets d'interface utilisateur de style iOS 7, vous voudrez peut-être vérifier Powerange pour le contrôle de curseur de gamme.

20 dernières Wearables de remise en forme que vous pouvez acheter

20 dernières Wearables de remise en forme que vous pouvez acheter

Le concept de l'utilisation de wearables pour aider à suivre et à surveiller votre condition physique mieux n'est pas quelque chose de nouveau. En fait, en 2014, les wearables de remise en forme vont grand train. Nous pouvons enfin voir beaucoup de ces wearables intelligents disponibles pour un usage commercial.

(Conseils techniques et de conception)

20 Smashing Pièces de conception éditoriale pour votre inspiration

20 Smashing Pièces de conception éditoriale pour votre inspiration

Avec autant de sites Web ayant des conceptions et des structures similaires de nos jours, il est très important pour tout concepteur de sites Web de rester créatif et unique afin de se démarquer de la foule . Ce n'est pas toujours une tâche facile. Alors, que diriez-vous d' une approche différente de la conception de sites Web ? Auj

(Conseils techniques et de conception)