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.