MooTools - controles deslizantes
Slider es una funcionalidad que refleja una acción mientras se desliza la perilla o cualquier botón. Puede crear su propio control deslizante mientras define elementos, el controlador, las opciones y los eventos de devolución de llamada. Discutamos más sobre el control deslizante.
Crear un nuevo control deslizante
Primero tenemos que elegir los elementos HTML adecuados para el control deslizante. Al considerar la idea básica, los elementos div son los más adecuados para los controles deslizantes porque al usar divs, podemos crear elementos secundarios. Ahora tenemos que configurar el CSS para esos divs para hacer que la estructura div sea un control deslizante perfecto. Aquí, el div padre es paraslider y el niño div es para knob.
Ahora tenemos que usar estos divs como controles deslizantes pasando los elementos al constructor Slider como sliderObjecty knobObject. Eche un vistazo a la siguiente sintaxis para definir el control deslizante.
Sintaxis
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);También tenemos que definir las opciones del control deslizante.
Opciones de control deslizante
Analicemos algunas opciones que se utilizan para los controles deslizantes.
Chasquido
Un valor instantáneo puede ser un valor verdadero o falso. Esto determina si la perilla se ajusta a los pasos a medida que se arrastra por el control deslizante. Por defecto, es falso.
Compensar
Este es el desplazamiento relativo de la perilla desde la posición inicial. Intenta experimentar con este. Por defecto, es 0.
Rango
Esta es una opción muy útil. Puede establecer un rango de números en los que se dividirán los pasos. Por ejemplo, si su rango era [0, 200] y tenía 10 pasos, sus pasos estarían separados por 20. El rango también puede incluir números negativos, por ejemplo [-10, 0], lo cual es muy útil cuando se invierte el desplazamiento. Por defecto, es falso.
Rueda
Establezca la rueda en verdadero y el desplazador reconocerá el evento de la rueda del mouse. Al usar la rueda del mouse, es posible que deba ajustar el rango para asegurarse de que el evento de la rueda del mouse no aparezca invertido (nuevamente, más sobre eso más adelante).
Pasos
El valor predeterminado de 100 pasos es muy útil ya que es fácil de usar como porcentaje. Sin embargo, puede establecer tantos pasos (que sean utilizables) dentro de lo razonable. Por defecto, es 100.
Modo
El modo definirá si un control deslizante se registra como vertical u horizontal. Sin embargo, hay algunos pasos más necesarios para convertir de horizontal a vertical. Por defecto, es horizontal.
Eventos de devolución de llamada
Hay tres eventos de devolución de llamada importantes que proporciona un control deslizante.
onChange
Cualquier cambio en el paso actual desencadena la ejecución del evento. Consulte el ejemplo que se muestra a continuación para ver cuándo se ejecuta.
onTick
Cualquier cambio en la posición del mango desencadena la ejecución de este evento. Consulte el ejemplo que se muestra a continuación para ver qué se ejecuta.
onComplete
Este evento se ejecuta cada vez que se suelta el controlador. Consulte el ejemplo que se muestra a continuación para ver cuándo se ejecuta.
Ejemplo
El siguiente ejemplo explica el control deslizante horizontal y vertical junto con los indicadores de eventos. Eche un vistazo al siguiente código.
<!DOCTYPE html>
<html>
<head>
<style "text/css">
#slider {
width: 200px;
height: 20px;
background-color: #0099FF;
}
#knob {
width: 20px;
height: 20px;
background-color: #993333;
}
#sliderv {
width: 20px;
height: 200px;
background-color: #0099FF;
}
#knobv {
width: 20px;
height: 20px;
background-color: #993333;
}
#change{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
#complete{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var SliderObject = new Slider('slider', 'knob', {
//options
range: [0, 10],
snap: false,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
//callback events
onChange: function(step){
$('change').highlight('#F3F825');
$('steps_number').set('html', step);
},
onTick: function(pos){
$('tick').highlight('#F3F825');
$('knob_pos').set('html', pos);
//this line is very necessary (left with horizontal)
this.knob.setStyle('left', pos);
},
onComplete: function(step){
$('complete').highlight('#F3F825')
$('steps_complete_number').set('html', step);
this.set(step);
}
});
var SliderObjectV = new Slider('sliderv', 'knobv', {
range: [-10, 0],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'vertical',
onChange: function(step){
$('stepsV_number').set('html', step*-1);
}
});
//sets the vertical one to start at 0
//without this it would start at the top
SliderObjectV.set(0);
//sets the slider to step 7
$('set_knob').addEvent('click', function(){ SliderObject.set(7)});
});
</script>
</head>
<body>
<div id = "slider">
<div id = "knob"></div>
</div><br/><br/>
<div id = "sliderv">
<div id = "knobv"></div>
</div><br/>
<span id = "stepsV_number"></span> <br/>
<div id = "change" class = "indicator">
<strong>onChange</strong><br/>
Passes the step you are on: <span id = "steps_number"></span>
</div></br/>
<div id = "complete" class = "indicator">
<strong>onComplete</strong><br />
passes the current step: <span id = "steps_complete_number"></span>
</div>
</body>
</html>Salida
Haga clic en la perilla marrón en los controles deslizantes horizontal o vertical y luego arrástrela, encontrará la posición del paso y la indicación del evento para cada acción.