Comment travailler avec curseur en CSS3

category Internet & médias sociaux / Web design & développement / Pages web construction

Sliders donnent à l'utilisateur la possibilité de saisir une valeur visuellement - comme partie d'un tout. En CSS3, un curseur garantit que l'utilisateur entre une valeur correcte dans une plage de valeurs, de sorte que vous ne devez pas vous soucier des problèmes de sécurité ou de valeurs incorrectes. En conséquence, curseurs fournissent un moyen précieux d'entrée permettant variable.

L'exemple suivant montre comment utiliser un curseur dans votre application. Il commence par le code HTML utilisé pour définir l'emplacement et de l'aspect de base de l'élément coulissant. (Vous pouvez trouver le code complet pour cet exemple dans le répertoire Chapitre 06 Widgets dossier de la Code téléchargeable comme slider.html).

L'aide du curseur Widget
050
Valeur:



Le curseur a une valeur minimum de 0 et une valeur maximale de 50. Le curseur utilise également le CSS suivant pour donner la sortie d'un aspect plus agréable et de le rendre possible pour marquer le début et la fin de l'échelle.

Comme vous pouvez le voir, le CSS place le début et la fin de l'échelle dans une position particulière afin qu'il corresponde à la taille du curseur. Pour autant que l'utilisateur sait, l'ampleur et le curseur sont une seule pièce, mais ils sont en fait deux pièces dans le code. Le morceau restant du code est le script montré ici.
$ (function () {$ ("# Slider") curseur ({// Définit la value.max slider maximale:. 50, // Effectuer des tâches lorsque la valeur changes.change: function (event, ui) {// affichage la valeur actuelle du curseur $ ("# Value") texte ($ ("# Slider") curseur ("value").) -..}}) -})
Dans ce cas, le code définit la valeur du curseur au maximum à 50. Les valeurs par défaut de la valeur minimale à 0. Cependant, vous pouvez régler à la fois les valeurs maximum et minimum à un poste. Même si l'exemple ne le montre pas, le curseur peut avoir plus d'une poignée, de sorte qu'il peut représenter une gamme. Cette flexibilité signifie que vous pouvez demander à l'utilisateur de saisir à la fois un départ et un point d'arrêt.
L'un des événements les plus couramment utilisés est le changement. L'exemple affiche la nouvelle valeur chaque fois que l'utilisateur se termine déplaçant la poignée. Cependant, la façon dont vous utilisez la sortie dépend de votre application. Généralement, vous utilisez la sortie pour fournir l'entrée de données ou de contrôle de l'application. Cependant, il est une bonne idée d'afficher la valeur du curseur réel de sorte que l'utilisateur connaît la valeur d'entrée réelle.
image0.jpg
 
 
 
 
 
 
 
 
Articles Similaires
 
  

 
 
A propos Auteur
 
  Curseur contrôle dans javafx Curseur contrôle dans javafx 
UN curseur est un contrôle dans JavaFX qui est utilisé pour indiquer une gamme continue de valeurs entre un minimum et un maximum donné. Un curseur est rendu comme un bar vertical ou horizontal avec un bouton que l'utilisateur peut glisser pour…
  5 astuces Html5 forme d'entrée 5 astuces Html5 forme d'entrée 
La façon la plus courante pour obtenir l'entrée d'utilisateur pour un programme javascript est en utilisant des éléments de formulaire HTML. La dernière version de HTML, HTML5, dispose de plusieurs nouveaux éléments de formulaire et les…
  Comment récupérer les données SQL à partir d'une seule rangée Comment récupérer les données SQL à partir d'une seule rangée 
UN curseur SQL permet de récupérer (ou mettre à jour ou supprimer) une seule ligne à la fois de sorte que vous pouvez utiliser SQL en combinaison avec une application écrite dans l'une des langues populaires. Traitement curseurs est un…
  Comment ouvrir un curseur SQL Comment ouvrir un curseur SQL 
Bien que le DECLARE CURSOR Instruction SQL spécifie les lignes à inclure dans le curseur, il ne provoque pas réellement quelque chose à se produire parce que DECLARE est juste une déclaration et non une instruction exécutable. La OUVERT…
  Navigation et sélection code VBA Navigation et sélection code VBA 
Utilisez ces raccourcis VBA dans la fenêtre Code (utilisés pour l'écriture, l'édition et la visualisation VBA) et la fenêtre Exécution (qui vous permet d'exécuter le code tout moment, à droite sur la place) pour obtenir vos emplois faites…
  Évaluer une séquence sur la TI-83 Plus Évaluer une séquence sur la TI-83 Plus 
Vous pouvez utiliser la TI-83 Plus pour évaluer le graphique d'une séquence. Pour évaluer une séquence à une valeur spécifiée n, Suivez ces étapes:Représenter graphiquement les séquences dans une fenêtre de visualisation qui contient la…
  Évaluer équations paramétriques sur la TI-83 Plus Évaluer équations paramétriques sur la TI-83 Plus 
Vous pouvez utiliser la calculatrice TI-83 Plus pour évaluer une paire d'équations paramétriques à une valeur spécifiée T. Pour ce faire, procédez comme suit:Représenter graphiquement les équations dans une fenêtre de visualisation qui…
  Trouver la valeur d'une fonction sur les TI-83 Plus Trouver la valeur d'une fonction sur les TI-83 Plus 
Lorsque vous tracez le graphique d'une fonction sur la plus calculatrice TI-83 graphique, le curseur de tracé ne frappe pas tous les points sur le graphique. Donc, la trace est pas un moyen fiable de trouver la valeur d'une fonction à une valeur…
  Comment trouver le minimum et le maximum de points sur un graphique Comment trouver le minimum et le maximum de points sur un graphique 
Trouver le maximum ou le point minimum sur un graphique sur votre calculatrice TI-84 Plus dispose de nombreuses applications utiles. Par exemple, le point maximum sur le graphique d'une fonction de profit vous indique non seulement le maximum de…
  Comment travailler avec les curseurs sur les graphes de TI-Nspire Comment travailler avec les curseurs sur les graphes de TI-Nspire 
Vous pouvez utiliser la fonction curseur sur la TI-Nspire d'explorer un graphique de y = abX., où un et b peut prendre sur tout intervalle de valeurs. La fonction y = ehache + b + c est un type de fonction pouvant être transformée. Pour effectuer…
  Comment créer une interface redimensionnable en CSS3 Comment créer une interface redimensionnable en CSS3 
La grande variété et les types d'écrans utilisés pour afficher des informations font qu'il est nécessaire que vos commandes CSS3 permettent à l'utilisateur de redimensionner les éléments que nécessaire. Dans la plupart des cas, vous pouvez…
  Comment définir un contrôle CSS3 spécialisée 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…
  Comment saisir les couleurs avec la pipette de ColorZilla pour les sites CSS3 Comment saisir les couleurs avec la pipette de ColorZilla pour les sites CSS3 
L'option de menu ColorZilla Pipette affiche un curseur de souris signe plus. Lorsque vous vous déplacez le curseur de la souris sur une page de CSS3, un bar en haut de la page affiche la valeur de couleur et d'autres informations. (L'information…
  Comment travailler avec ProgressBar en CSS3 Comment travailler avec ProgressBar en CSS3 
Les utilisateurs sont impatients, et parfois un processus prend un certain temps à compléter. Une barre de progression permet au développeur de CSS3 pour garder l'utilisateur informé de l'avancement d'une tâche.Stratégies de programmation…
 
 
 »  »  »  » Comment travailler avec curseur en CSS3