Home

FlowupLabels.js est une bibliothèque Javascript permettant de mettre en place un système de labels alternatifs aux placeholders HTML.

FlowupLabels.js est une bibliothèque Javascript permettant de mettre en place un système de labels alternatifs aux placeholders HTML.

Aujourd’hui, les formulaires sans libellés, avec uniquement un placeholder pour indiquer quel est le champs, sont à la mode.

Seul problème, si vous utilisez un navigateur avec autocomplétion de formulaires, vous n’avez pas le temps de vérifier que tout est bien écrit au bon endroit, le placeholder disparaissant dès qu’une valeur est saisie.

FlowupLabels.js est une solution plutôt ergonomique aux placeholders, elle permet de réagir comme ces derniers quand aucune valeur n’est saisie dans le champ du formulaire puis va transiter juste au dessus du texte en plus petit dès que le texte est saisi.

Ainsi, on a toujours l’information sur le nom du champ sans pour autant avoir de gros libellés qui cassent le design de nos pages web.

Voici comment lancer le script sur vos pages:

1.$('.FlowupLabels').FlowupLabels({
2.// Handles the possibility of having input boxes prefilled on page load
3.feature_onInitLoad: false
4.// Class when focusing an input
5.class_focused:      'focused',
6.// Class when an input has text entered
7.class_populated:    'populated' 
8.});

Le script est compatible dès Internet Explorer 8 et plus, Chrome, Firefox…

Vous pouvez personnaliser le style du rendu du libellé grâce aux classes que la bibliothèque utilise.

Site Officiel

Advertisements

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s