Comment définir un contrôle CSS3 spécialisée

Tous les widgets jQuery UI se prêtent au CSS3 personnalisation. La plupart des modifications que vous apportez accord avec l'utilisation correcte des fonctionnalités intégrées. Vous pouvez également travailler avec le CSS qui jQuery UI emploie pour formater les widgets pour produire des effets spéciaux.

Bien sûr, si rien d'autre, vous pouvez toujours utiliser javascript pour modifier le comportement du widget réelle au besoin. Le point est que vous pouvez changer widgets (comme Spinner) pour répondre aux besoins spécifiques sans avoir à réinventer la roue. Les modifications sont généralement de courte et facile à faire, ce qui signifie que vous ne devez pas commencer à partir de zéro avec une idée que vous avez à code à la main.

Spinners sont populaires parce que vous pouvez les utiliser pour contrôler l'entrée d'utilisateur dans un certain nombre de façons. L'idée est de fournir un contrôle des données qui est normalement variable, pour que vous ne pouvez pas utiliser quelque chose comme une zone de liste déroulante. L'une des utilisations les plus intéressantes de filateurs est indiqué sur le site Ben Knows Code.

Dans ce cas, l'auteur montre comment effectuer des tâches telles que le déplacement de l'emplacement des flèches et la création d'un spinner alphabétique. L'exemple utilisé ici joue avec l'exemple sur ce site, mais il est un peu plus simple et plus facile à comprendre. Une fois que vous comprenez cet exemple, vous pouvez aller à la Ben Connaît le site Code et comprendre que par exemple tout de suite.

Spinners traitent normalement avec une entrée numérique. Cependant, vous pourriez avoir besoin d'une entrée alphabétique place. Pour créer une entrée alphabétique, vous devez donner l'apparence de lettres sans utiliser effectivement lettres, parce que le widget Spinner fonctionne uniquement avec des numéros. L'exemple suivant prend un widget jQuery UI Spinner standard et le transforme d'utiliser des lettres au lieu de chiffres.

$ (function () {var CurrentValue = 65-var ThisSpinner = $ ("# Spinner") spinner ({// Définir le minimum pour le code A // et le maximum pour le code pour Z.min:. 65, max: 90, // Lorsque l'utilisateur commence à tourner la fileuse, // convertir la valeur à un nombre et masquer le texte // partir view.start: function (ui, événement) {ThisSpinner.spinner («valeur», CurrentValue ) - $ ("# Spinner") css ("couleur", "transparent") -.}, // Lorsque l'utilisateur arrête de tourner la fileuse, // enregistrer la valeur numérique, le convertir en un // lettre et afficher le onscreen.stop texte: function (ui, événement) {CurrentValue =ThisSpinner.spinner("value")-ThisSpinner.spinner("value",String.fromCharCode(CurrentValue))-$("#Spinner").css("color", "vert") -}}) -}) -

Le code commence par la création d'une variable, CurrentValue, qui permet de suivre la valeur numérique de la centrifugeuse de fibrage. La valeur, 65 ans, est l'équivalent numérique de la lettre UN. Ainsi, la centrifugeuse commence par une valeur de A, mais il stocke cette valeur comme le nombre 65.

Création de la fileuse, ThisSpinner, vient ensuite. Vous devez définir minimales et maximales des valeurs qui reflètent les valeurs numériques UN et Z. Cette même technique peut travailler pour une série de lettres. Vous pourriez tout aussi bien utiliser des lettres minuscules, si désiré. Pour cette question, toute série va fonctionner, 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 de début et de fin des événements. Lorsque l'utilisateur clique sur l'une des deux flèches, il commence un événement de spin. Le changement se produit, puis le spin arrête. Pour le spinner fonctionne correctement, l'attribut de valeur doit contenir une valeur numérique.

Le code définit la valeur à CurrentValue, qui est le code qui correspond à la lettre sélectionnée. Toutefois, à ce stade, vous pouvez voir la valeur numérique sous forme de texte dans le spinner, qui est source de distraction. Pour éviter cela, le gestionnaire d'événements définit également la couleur du texte à transparent, afin que l'utilisateur ne peut réellement voir l'écran de texte.

Assurez-vous que vous pensez de la façon dont vous définissez les couleurs des éléments cachés. Il ya une tendance avec quelques développeurs de définir la couleur de l'objet caché à la couleur de fond, mais la couleur de fond peut changer. Même si de nombreuses références ne fait l'indiquent pas, l'une des couleurs reconnues est transparent, ce qui signifie pas de couleur du tout. Toujours utiliser des objets transparents quand vous voulez cacher quelque chose.

Le gestionnaire d'événement d'arrêt stocke la nouvelle valeur de spinner dans CurrentValue. Il convertit alors la valeur numérique à partir d'un nombre, par exemple 65, à une lettre, telles que UN. Le code change alors la couleur du texte au vert afin que l'utilisateur peut voir la lettre à l'écran.

Cet exemple modifie également quelques-uns des styles de widget. Ces styles sont répertoriés comme faisant partie du fichier CSS jQuery UI. Dans ce cas, vous ne voulez pas l'utilisateur d'être en mesure de saisir plus d'un caractère, de sorte que la largeur du widget est modifiée pour accepter une seule lettre. En outre, la couleur du texte est passé au vert, comme indiqué ici:

.ui-spinner {width: 45px;}. ui-spinner-entrée {color: serre}

En utilisant une combinaison d'événements et CSS vous permet de créer toutes sortes d'effets personnalisés avec l'un des widgets jQuery UI. Tout ce que vous devez faire est d'expérimenter un peu pour créer une sortie vraiment intéressant.