Intégrer un bouton switch de type IOS en CSS3 et Jquery

switch-1

Nous constatons que la révolution du web passera indéniablement par le mobile, maintenant on a possibilité de construire des applications Web mobile à partir de simple projets web.

Beaucoup de plates-formes tierces comme Apache Cordova et Phonegap offrent la possibilité de convertir en application mobile un site mobile native.

Ce tutoriel va vous aider à concevoir un composant bouton de type iOS en utilisant HTML, CSS et jQuery. En utilisant les pseudo-éléments : before et : after du CSS3 pour minimiser le code HTML.

Note: Pour un meilleur résultat, le code qu’on va vous proposer est optimisé pour Chrome, Firefox et Safari .

La structure HTML

Le code HTML est très simple, il suffit d’intégrer dans un label un checkbox et un div.

Le code CSS

Après il vous suffira d’appliquer la propriété CSS3 border-radius :

CSS3 border-radius

Switch Before

Maintenant, on va jouer sur le pseudo-élément Before pour insérer un élément avant la structure html ( le DOM )

Switch After

Puis, on va jouer sur le pseudo-element After pour insérer un élément après la structure html ( le DOM ) et aussi pour mettre la transition en CSS3.

La classe SwitchOn et Jquery

Ici on va encore jouer avec le CSS en associant le mouvement (ou la transition ) avec le background color ( en vert ).

Pour pouvoir manier le bouton, il nous faudra gérer les événements en utilisant la propriété jquery toggleClass qui va ajouter ou supprimer la classe switchOn à la volée et qui va être associer avec l’événement click comme suit :
$(‘.switch’).click(function(){}

Le css final

switch-3

Pour pouvez cacher le checkbox en utilisant display:none.

Répondre