Vidéo: Les métiers du social + témoignage - Les questions d'orientation 2025
Tous les widgets de l'interface utilisateur jQuery se prêtent à la personnalisation CSS3. La plupart des modifications que vous effectuez concernent l'utilisation correcte des fonctionnalités intégrées. Vous pouvez également utiliser le CSS que l'interface utilisateur jQuery utilise pour mettre en forme les widgets afin de produire des effets spéciaux.
Bien sûr, si rien d'autre, vous pouvez toujours utiliser JavaScript pour modifier le comportement du widget en tant que de besoin. Le point est que vous pouvez changer les widgets (tels que Spinner) pour répondre à des besoins spécifiques sans avoir à réinventer la roue. Les modifications sont généralement courtes et faciles à faire, ce qui signifie que vous n'avez pas à partir de zéro avec une idée que vous devez coder à la main.
Les Spinners sont populaires parce que vous pouvez les utiliser pour contrôler l'entrée de l'utilisateur de plusieurs façons. L'idée est de fournir un contrôle pour les données qui sont normalement variables, donc vous ne pouvez pas utiliser quelque chose comme une liste déroulante. L'une des utilisations les plus intéressantes des filateurs est montrée sur le site Ben Knows Code.
Dans ce cas, l'auteur montre comment effectuer des tâches telles que déplacer l'emplacement des flèches et créer un fileur alphabétique. L'exemple utilisé ici joue sur l'exemple de ce site, mais c'est un peu plus simple et plus facile à comprendre. Une fois que vous avez compris cet exemple, vous pouvez aller sur le site de Ben Knows Code et comprendre cet exemple tout de suite.
Les Spinners traitent normalement les entrées numériques. Cependant, vous pourriez avoir besoin d'une entrée alphabétique à la place. Pour créer une entrée alphabétique, vous devez donner l'apparence de lettres sans utiliser de lettres, car le widget Spinner fonctionne uniquement avec des nombres. L'exemple suivant prend un widget jQuery UI Spinner standard et le transforme pour utiliser des lettres au lieu de chiffres.
$ (function () {var CurrentValue = 65; var ThisSpinner = $ ("# Spinner"). Spinner ({// Fixe le minimum au code pour A // et le maximum au code pour Z. min: 65, max: 90, // Lorsque l'utilisateur commence à faire tourner le spinner, // convertit la valeur en un nombre et cache // le texte de la vue start: function (ui, event) {ThisSpinner spinner ("valeur ", CurrentValue); $ (" # Spinner "). Css (" color "," transparent ");}, // Lorsque l'utilisateur arrête de tourner le spinner, // enregistre la valeur numérique, la convertit en // lettre et affiche le texte à l'écran stop: function (ui, événement) {CurrentValue = ThisSpinner spinner ("valeur"); ThisSpinner spinner ("valeur", String deCharCode (CurrentValue)); $ ("# Spinner"). css ("couleur", "vert");}});});
Le code commence par créer une variable, CurrentValue, qui suit la valeur numérique du spinner.La valeur, 65, est l'équivalent numérique de la lettre A. Le spinner commence avec une valeur de A, mais il stocke cette valeur sous le numéro 65.
Création du spinner, ThisSpinner, vient ensuite. Vous devez définir des valeurs minimales et maximales reflétant les valeurs numériques A et Z. Cette même technique peut fonctionner pour n'importe quelle série de lettres. Vous pouvez tout aussi bien utiliser des lettres minuscules, si vous le souhaitez. D'ailleurs, n'importe quelle série fonctionnera, y compris les caractères spéciaux. Il est même possible d'utiliser cette approche pour les valeurs énumérées.
L'approche la plus simple fournit des gestionnaires pour les événements de démarrage et d'arrêt. Lorsque l'utilisateur clique sur l'une des deux flèches, il démarre un événement de rotation. Le changement se produit, puis le spin s'arrête. Pour que le spinner fonctionne correctement, l'attribut value doit contenir une valeur numérique.
Le code définit la valeur sur CurrentValue, qui correspond au code correspondant à la lettre actuellement sélectionnée. Cependant, à ce stade, vous pouvez voir la valeur numérique comme texte dans le spinner, ce qui est gênant. Pour éviter cela, le gestionnaire d'événements définit également la couleur du texte sur transparent, de sorte que l'utilisateur ne peut pas réellement voir le texte à l'écran.
Assurez-vous de réfléchir à la façon dont vous définissez les couleurs des éléments cachés. Certains développeurs ont tendance à définir la couleur de l'élément masqué sur la couleur d'arrière-plan, mais la couleur d'arrière-plan peut changer. Même si de nombreuses références ne l'indiquent pas, l'une des couleurs reconnues est transparente, ce qui signifie pas de couleur du tout. Utilisez toujours des objets transparents lorsque vous voulez cacher quelque chose.
Le gestionnaire d'événement stop stocke la nouvelle valeur spinner dans CurrentValue. Il convertit ensuite la valeur numérique d'un nombre, tel que 65, en une lettre, telle que A. Le code change ensuite la couleur du texte en vert pour que l'utilisateur puisse voir la lettre à l'écran.
Cet exemple modifie également quelques-uns des styles de widget. Ces styles sont répertoriés dans le fichier CSS jQuery UI. Dans ce cas, vous ne voulez pas que l'utilisateur puisse taper plus d'un caractère, donc la largeur du widget est modifiée pour accepter une seule lettre. De plus, la couleur du texte est verte, comme indiqué ici:
. ui-spinner {largeur: 45px;}. ui-spinner-input {color: green;}
L'utilisation d'une combinaison d'événements et de CSS vous permet de créer toutes sortes d'effets personnalisés avec l'un des widgets de l'interface utilisateur jQuery. Tout ce que vous devez faire est d'expérimenter un peu pour créer une sortie vraiment intéressante.
