¿Cómo trabajar con deslizador en css3

categoría Los medios de comunicación de Internet y sociales / Diseño y desarrollo web / Páginas web de construcción

Sliders dan al usuario la capacidad de entrada de un valor visual - como parte de un todo. En CSS3, un control deslizante se asegura de que el usuario introduce un valor correcto dentro de un rango de valores, por lo que no tiene que preocuparse por los problemas de seguridad o valores incorrectos. Como resultado, los deslizadores proporcionan un medio valioso para permitir entrada variable.

El siguiente ejemplo muestra cómo utilizar un control deslizante en la aplicación. Comienza con el HTML usado para definir la ubicación y el aspecto básico de la corredera. (Usted puede encontrar el código completo para este ejemplo en el Capítulo carpeta 06 Widgets del código descargable como Slider.HTML.)

Utilizando el Widget deslizante
050
Valor:

El deslizador tiene un valor mínimo de 0 y un valor máximo de 50. El deslizador también utiliza el siguiente CSS para dar la salida de un aspecto más agradable y para que sea posible para marcar el comienzo y el final de la escala.

Como se puede ver, el CSS coloca el comienzo y el final de la escala en una posición particular para que coincida con el tamaño de la barra deslizante. Por lo que el usuario sepa, la escala y el control deslizante son de una sola pieza, pero en realidad son dos piezas en el código. La pieza restante del código es la secuencia de comandos que se muestra aquí.
$ (function () {$ ("# Slider") corredera ({// Establecer el máximo value.max slider:. 50, // Realizar tareas cuando el changes.change valor: function (evento, ui) {// Display el valor del control deslizante actual $ ("# Valor") texto ($ ("# Slider") deslizador ("valor").) -..}}) -})
En este caso, el código establece el valor máximo control deslizante a 50. Los valores predeterminados mínimos de valor a 0. Sin embargo, puede configurar tanto los valores mínimos del máximo y en cualquier posición. A pesar de que el ejemplo no lo muestra, el cursor puede tener más de un mango, por lo que puede representar un rango. Esta flexibilidad significa que usted puede pedir al usuario que introduzca la vez una partida y un punto de parada.
Uno de los eventos más utilizados es el cambio. El ejemplo muestra el nuevo valor cada vez que el usuario termina de mover el mango. Sin embargo, la forma en que se utiliza la salida depende de su aplicación. Generalmente, se utiliza la salida para proporcionar la entrada de datos o de control de aplicaciones. Sin embargo, es una buena idea para mostrar el valor real de control deslizante de manera que el usuario conoce el valor de la entrada real.
imagen0.jpg

 
 
 
 
 
 
 
Artículos Relacionados
 
  

 
 
Sobre el autor
 
  Cómo crear un control de número en java Cómo crear un control de número en java 
LA hilandero es un campo de texto que puede crear en Java que tiene dos pequeñas flechas al lado de él. El usuario puede hacer clic en una de estas flechas para aumentar o disminuir el valor del campo de texto. Por lo general, el campo de texto…
  Cómo utilizar controles deslizantes en java Cómo utilizar controles deslizantes en java 
Java le permite utilizar controles deslizantes en su programación. LA deslizador es un componente que permite al usuario elegir un valor de un rango establecido (por ejemplo, de 0 a 50) moviendo un mando. Un cursor es una manera conveniente de…
  JavaFX controla: barra de desplazamiento JavaFX controla: barra de desplazamiento 
los Barra de desplazamiento de control en JavaFX no se utiliza generalmente por misma- en cambio, que es utilizado por otros controles tales como ScrollPane o Vista de la lista para mostrar la barra de desplazamiento que permite al usuario…
  Deslizador controla en JavaFX Deslizador controla en JavaFX 
LA deslizador es un control en JavaFX que se utiliza para indicar un rango continuo de valores entre un mínimo y un máximo dado. Una corredera se representa como una barra vertical u horizontal con un pomo que el usuario puede deslizar para…
  5 Html5 trucos de entrada de formulario 5 Html5 trucos de entrada de formulario 
La forma más común de obtener la entrada del usuario para un programa javascript es mediante el uso de elementos de formulario HTML. La última versión de HTML, HTML5, tiene varios nuevos elementos de forma y atributos.Entradas de…
  Cómo utilizar la sentencia ifelse en una aplicación python Cómo utilizar la sentencia ifelse en una aplicación python 
Incluso la introducción de datos del tipo incorrecto produce un mensaje de error en Python, pero entrar en el tipo correcto de los datos fuera del rango dice nada al usuario. En este ejemplo, a descubrir los medios para corregir este problema…
  ¿Cómo trabajar con controles deslizantes en los gráficos-ti Nspire ¿Cómo trabajar con controles deslizantes en los gráficos-ti Nspire 
Puede utilizar la función de control deslizante de la TI-Nspire para explorar un gráfico de y = una BX., dónde la y b puede tomar en cualquier rango de valores. La funcion y = ehacha + b + c es un tipo de función que puede ser transformada. Para…
  ¿Cómo crear una interfaz de tamaño variable en css3 ¿Cómo crear una interfaz de tamaño variable en css3 
La gran variedad y tipos de pantallas que se utilizan para mostrar la información hacen que sea necesario que sus comandos CSS3 permiten al usuario cambiar el tamaño de los elementos según sea necesario. En la mayoría de casos, basta con que el…
  ¿Cómo definir un control css3 especializada ¿Cómo definir un control css3 especializada 
Todos los widgets de jQuery UI se prestan a la personalización CSS3. La mayor parte de los cambios que hacen mucho con el uso de características integradas correctamente. También puede trabajar con el CSS que jQuery UI emplea para formatear los…
  Cómo detectar el tipo de navegador del usuario en css3 Cómo detectar el tipo de navegador del usuario en css3 
En la mayoría de los casos, los desarrolladores no pueden elegir el navegador del usuario. Para determinar si un determinado usuario puede trabajar con su aplicación CSS3, a continuación, es necesario primero para detectar el navegador del…
  ¿Cómo trabajar con datepicker en css3 ¿Cómo trabajar con datepicker en css3 
Hay situaciones en las que actualmente HTML5 ofrece una solución para una necesidad particular en CSS3, pero algunos vendedores han implementado todavía. Este es el caso con la fecha y el tiempo de soporte para HTML. Sólo Opera y Chrome…
  ¿Cómo trabajar con progressbar en css3 ¿Cómo trabajar con progressbar en css3 
Los usuarios son impacientes, ya veces un proceso toma un tiempo para completar. Una barra de progreso hace posible que el desarrollador CSS3 para mantener informados sobre el progreso de una tarea al usuario.Estrategias de programación modernos…
 
 »  »  »  » ¿Cómo trabajar con deslizador en css3