Los últimos tutoriales de desarrollo web
 

jQuery Mobile deslizador forma

❮ Anterior Siguiente Capítulo ❯

Los controles deslizantes jQuery Mobile

Un control deslizante le permite seleccionar un valor de una serie de números:

Para crear un cursor, utilice <input type="range"> :

Ejemplo

<form method="post" action="demoform.asp">
  <label for="points">Points:</label>
  < input type="range" name="points" id="points" value="50" min="0" max="100">
</form>
Inténtalo tú mismo "

Utilice los siguientes atributos para especificar las restricciones:

  • max - especifica el valor máximo permitido
  • min - especifica el valor mínimo permitido
  • step - especifica los intervalos de números legales
  • value - especifica el valor por defecto

Consejo: Si desea ver el valor en el botón deslizante, añadir data-show-value="true" :

Ejemplo

<input type="range" data-show-value="true" >
Inténtalo tú mismo "

Consejo: Si desea el valor para que aparezca en la pantalla como una información sobre herramientas (mientras desliza), añadir data-popup-enabled="true" :

Ejemplo

<input type="range" data-popup-enabled="true" >
Inténtalo tú mismo "

Consejo: Si se desea resaltar la pista hasta el regulador de valor, agregar data-highlight="true" :

Ejemplo

<input type="range" data-highlight="true" >
Inténtalo tú mismo "

El interruptor de palanca del tirón

Un interruptor basculante se utiliza a menudo para encendido / falsos botones / apagado o verdaderas:

Para crear un interruptor basculante, utilice <input type="checkbox"> y especifique un data-role de "flipswitch" :

Ejemplo

<form method="post" action="demoform.asp">
  <label for="switch">Flip toggle switch checkbox:</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>
Inténtalo tú mismo "

De forma predeterminada, el texto en el interruptor de la moneda es "On" y "Off" . Utilice la data-on-text y data-off-text atribuye a cambiar esta situación:

Ejemplo

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False" >
Inténtalo tú mismo "

Consejo: Utilice el "checked" atribuir a establecer una de las opciones para ser pre-seleccionada:

Ejemplo

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked >
Inténtalo tú mismo "

Más ejemplos

regulador de rango
Como hacer un control deslizante con dos asas, que permite a los usuarios especificar un valor mínimo y máximo en un rango.

Cambiar estilo del tirón
Cómo hacer que el interruptor basculante más ancho.


❮ Anterior Siguiente Capítulo ❯