Latest web development tutorials

jQuery UI API - componentes slider (deslizante Widget)

categoría

Los widgets (widgets)

uso

Descripción: Arrastre el controlador para seleccionar un valor.

Nueva versión: 1.5

Deslizador jQuery UI (control deslizante) plug-in permite seleccionar mediante un control deslizante. Hay varias opciones, tales como múltiples asas y rango. El mango se puede mover con el ratón o las teclas de flecha.

componentes de corredera deslizante (Widget) serán creados con la clase durante la inicialización ui-slider-handle elemento de mango. Se pueden crear y agregar el elemento antes de la inicialización, al tiempo que añade al elemento ui-slider-handle , de clase para especificar un elemento de mango personalizado. Sólo se creará una coincidencia de value / values longitud del número de mango deseados. Por ejemplo, si especifica values: [ 1, 5, 18 ] , y crear un mango de encargo, el plug-in creará los otros dos.

tematización

componentes de corredera deslizante (Widget) usando jQuery UI marco CSS para definir la apariencia de su estilo. Si es necesario utilizar el control deslizante para especificar el estilo, puede utilizar el siguiente nombre de clase CSS:

  • ui-slider : pista de control deslizante. Este elemento se basa en el control deslizante de orientation , además, con una ui-slider-horizontal o ui-slider-vertical clase.
    • ui-slider-handle : mango deslizante.
    • ui-slider-range : Al establecer range cuando la opción de usar el rango seleccionado. Si el range opción se establece en "min" o "max" , con los elementos adicionales son, respectivamente, una ui-slider-range-min o ui-slider-range-max , clase.

confiar

información adicional

  • La parte funcional requiere un poco de CSS, de lo contrario no funcionará. Si crea un tema personalizado, utilice el archivo CSS widget de especificado como un punto de partida.

Ejemplos

Una sencilla interfaz de usuario jQuery deslizante (deslizante). 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> corredera (Deslizador Widget) Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style> #slider {margin: 10px;} </ style>
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Cuerpo>
 
<Div id = "cursor"> </ div>
 
<Script>
$ ( "#slider") .slider ();
</ Script>
 
</ Body>
</ Html>