Les interfaces d'applications mobiles utilisent des commutateurs coulissants marche / arrêt depuis un certain temps. Celles-ci se trouvent le plus souvent sur la page des paramètres, où les utilisateurs peuvent mettre à jour les préférences de leur compte. Mais les concepteurs de sites Web en ont pris conscience et ont construit de nombreuses plates-formes ouvertes pour générer leurs propres curseurs d'activation / désactivation.
Dans ce tutoriel, je souhaite examiner plus particulièrement le plug-in jQuery Toggles développé par Simon Tabor. Il est livré avec 5 thèmes d'interface utilisateur prédéfinis que vous pouvez facilement mettre à jour. De plus, vous avez la possibilité de déclencher des événements de clic ou de diapositive, qui peuvent également être liés à une case à cocher de formulaire sur la page. Toute personne utilisant un navigateur moderne compatible JavaScript devrait pouvoir profiter pleinement de l'effet. Jetez un coup d’œil à ma démo en direct pour avoir un aperçu de ce que nous construisons.
Live Demo - Télécharger le code source
Commencer
La première étape consiste à télécharger une copie du plugin jQuery Toggles. Vous pouvez le récupérer dans le dépôt Github qui contient également un petit exemple live. J'ai déjà téléchargé une copie locale de jQuery dans un dossier / js relatif. Déplacer le fichier toggles.min.js dans ce dossier aussi.
Maintenant, pour le CSS, vous aurez besoin de copier toggles.css avec l'ensemble des thèmes / répertoire. Cela inclura les principales feuilles de style fournies avec le plugin. Notez que votre fichier toggles.css doit être situé dans le même répertoire que le dossier themes / pour que tout fonctionne correctement.
Notez également que je fais référence à un autre fichier de thème par son nom. bascule-soft.css. Cela me permet d’appliquer une classe CSS douce sur un conteneur, ce qui affectera alors tous mes éléments de basculement internes (comme ciblé par jQuery ultérieurement). Les autres choix de thème incluent clair, sombre, iPhone ou moderne, et vous pouvez voir à quoi ils ressemblent sur la page d'accueil du plugin.
Maintenant, la forme elle-même n'a pas grand chose d'extraordinaire, à l'exception d'un curseur de changement. Lorsque nous appuierons sur soumettre, le formulaire déclenchera une fonction jQuery qui arrêtera l'actualisation typique de la page. Au lieu de cela, nous publions les valeurs directes des champs situés sous le formulaire pour vérifier comment vous pouvez gérer les réponses dans votre propre application Web.
Créer le formulaire
Dans mon corps, j'ai créé un élément de formulaire avec l'ID. #forme basique. Cela peut être ciblé à l'aide de jQuery afin de mieux gérer les fonctionnalités de soumission. Aussi j'ai ajouté la classe .toggle-soft qui est mon choix par défaut de thèmes lors de la conception de cette mise en page.
Si nous sautons vers le bas du formulaire, vous remarquerez une div avec l’ID #emailupdates. Le curseur d'activation / désactivation de mon exemple déterminera si un nouvel utilisateur doit être ajouté à la liste des abonnés à la newsletter. La classe supplémentaire .basculer C’est ainsi que nous ciblons tous les éléments via jQuery. .Flotter à droite Il s’agit simplement de règles de positionnement supplémentaires pour que le commutateur soit bien ajusté dans le formulaire.
Notez également l'élément de case à cocher situé en dessous à l'aide de l'ID #emailupdatescheck. J'ai cette utilisation désactivée et cachée sur la page en utilisant display: none; afin que les utilisateurs ne soient pas confus. Heureusement, nous pouvons toujours mettre à jour la case à cocher de manière dynamique dans jQuery en la définissant comme paramètre d'option.
Générer le commutateur
N'oubliez pas que vous pouvez définir un grand nombre de paramètres supplémentaires sur cette fonction pour personnaliser l'affichage. Vérifiez les exemples de codes sur Github pour une liste complète. Dans mon exemple, nous pouvons mettre à jour une bonne partie des options utiles pouvant influer sur l'expérience utilisateur.
Vous trouverez ce code JS au bas de la page juste avant la fermeture. étiquette. La classe de sélecteur .basculer fonctionne pour tout autre élément bascule ajouté à cette page. Il vous permet de générer des commutateurs on / off pratiquement infinis avec moins de tracas - bien que vous deviez également créer une nouvelle case à cocher pour chaque curseur. La fonction toggles () est appelée avec les paramètres internes contenus entre accolades.
traîne et Cliquez sur Deux options vous permettent de spécifier le type d’interaction qui modifiera la valeur du curseur. Mon exemple donne à false la valeur glisser, ce qui signifie qu'il suffit de cliquer sur le curseur pour modifier les valeurs. Le texte doit expliquer par lui-même comment mettre à jour le contenu de l'affichage interne. N'oubliez pas d'encapsuler ces valeurs dans un autre ensemble d'accolades, sinon cela ne fonctionnera pas.
Le paramètre checkbox est très utile pour nous permettre de transmettre un élément de formulaire réel à attacher sur ce curseur. Cela prendra n'importe quel sélecteur d'objet jQuery et, dans ce cas, je cible notre case à cocher cachée. Les deux valeurs se chargent initialement en position OFF et nous pouvons voir comment cette valeur se met à jour en affichant du texte de sortie.
Valeurs de sortie de formulaire
Une fois que vous avez cliqué sur le bouton d'envoi, vous remarquerez peut-être qu'un nouveau bloc de code apparaît en dessous. Cela affichera la valeur textuelle actuelle des champs nom d'utilisateur et mot de passe, ainsi qu'une valeur pour la case à cocher du curseur. Jetons un coup d'œil au dernier bloc de code jQuery:
Chaque fois qu'un utilisateur soumet le formulaire, nous exécutons e.preventDefault () pour arrêter la soumission.Ensuite, nous déterminons si la case à cocher masquée est actuellement cochée ou non. Si oui, la valeur du curseur est définie sur? On? (sinon, il est réglé sur? off?). Vous pouvez théoriquement faire de ces valeurs ce que vous voulez tant que cela a du sens. Il existe également deux autres variables contenant les valeurs de nom d'utilisateur et de courrier électronique.
Enfin, j'ai rassemblé un ensemble concaténé de variables chaîne qui constitue mon exemple HTML. Ceci est ajouté à la page dans une div avec l'ID #codeoutput. Il n’affichera rien au début, mais une fois qu’il y aura du HTML interne, il ressemblera à du code monospace. C'est simplement une méthode pour déterminer la valeur d'un curseur, mais cela fonctionne très bien et vous permet même de le transmettre à un script backend en utilisant Ajax.
Live Demo - Télécharger le code source
Dernières pensées
Toutes les formes ne nécessitent pas une case à cocher ou un élément de commutation. Les pages de paramètres de profil utilisateur constituent un lieu commun pour utiliser ces curseurs. D'autres lieux peuvent inclure des forums en ligne ou des réseaux sociaux où les utilisateurs peuvent basculer entre les options de partage et d'affichage.
En fin de compte, ce plug-in est un choix fantastique pour la mise en œuvre de curseurs d'entrée simples et rapides. N'hésitez pas à télécharger une copie de mon code source et à créer votre propre conception de formulaire similaire.