Plugin de formulario jQuery EasyUI -Slider

jQuery EasyUI 插件Plugin jQuery EasyUI

Reescriba los valores predeterminados mediante $.fn.slider.defaults.

El control deslizante (slider) permite al usuario seleccionar un valor de un rango limitado. Al mover el control deslizante a lo largo de la pista, se mostrará un cuadro de sugerencia con el valor actual; el usuario puede personalizar el control deslizante configurando sus propiedades.

Dependencias

  • draggable

Uso

Cuando se usa como campo de formulario, cree el control deslizante (slider) a partir de la etiqueta <input>.

<input class="easyui-slider" value="12" style="width:300px"
    data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]">

También se permite crear el control deslizante (slider) desde un <div>, pero el atributo 'value' no es válido.

<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>

Se convierte en crear el control deslizante (slider).

<div id="ss" style="height:200px"></div>

$('#ss').slider({
    mode: 'v',
    tipFormatter: function(value){
        return value + '%';
    }
});

Propiedades

Nombre Tipo Descripción Valor predeterminado
width number El ancho del control deslizante (slider). auto
height number La altura del control deslizante (slider). auto
mode string El tipo del control deslizante (slider). Valores posibles: 'h' (horizontal), 'v' (vertical). h
reversed boolean Cuando se establece en true, se intercambian las posiciones de los valores mínimo y máximo. Esta propiedad está disponible desde la versión 1.3.2. false
showTip boolean Define si se muestra el cuadro de información del valor. false
disabled boolean Define si se deshabilita el control deslizante (slider). false
value number Valor predeterminado. 0
min number El valor mínimo permitido. 0
max number El valor máximo permitido. 100
step number El valor de incremento o decremento. 1
rule array Se muestran etiquetas junto al control deslizante, '|' — línea de visualización de valores. []
tipFormatter function Función para formatear el valor del control deslizante. Devuelve el valor de cadena que se muestra como cuadro de sugerencia.

Eventos

Nombre Parámetros Descripción
onChange newValue,oldValue Se activa cuando cambia el valor del campo de texto.
onSlideStart value Se activa cuando se comienza a arrastrar el control deslizante.
onSlideEnd value Se activa cuando se deja de arrastrar el control deslizante.
onComplete value Se activa cuando el usuario cambia el valor del control deslizante, ya sea arrastrándolo o haciendo clic en él. Este evento está disponible desde la versión 1.3.4.

Métodos

Nombre Parámetros Descripción
options none Devuelve las opciones del control deslizante (slider).
destroy none Destruye el objeto del control deslizante (slider).
resize param Establece el tamaño del control deslizante. El parámetro 'param' contiene las siguientes propiedades:
width: el nuevo ancho del control deslizante
height: la nueva altura del control deslizante
getValue none Obtiene el valor del control deslizante (slider).
setValue value Establece el valor del control deslizante (slider).
clear none Limpia el valor del control deslizante (slider). Este método está disponible desde la versión 1.3.5.
reset none Restablece el valor del control deslizante (slider). Este método está disponible desde la versión 1.3.5.
enable none Habilita el componente del control deslizante (slider).
disable none Deshabilita el componente del control deslizante (slider).
jQuery EasyUI 插件Plugin jQuery EasyUI Otras extensiones