MooTools - Sliders
Controle deslizante é uma funcionalidade que reflete uma ação ao deslizar o botão ou qualquer botão. Você pode criar seu próprio controle deslizante enquanto define elementos, o manipulador, opções e eventos de retorno de chamada. Vamos discutir mais sobre o controle deslizante.
Criação de um novo controle deslizante
Primeiro, temos que escolher os elementos HTML adequados para o controle deslizante. Considerando a ideia básica, os elementos div são os mais adequados para controles deslizantes porque, usando divs, podemos criar elementos filho. Agora temos que definir o CSS para esses divs para tornar a estrutura div como um controle deslizante perfeito. Aqui, o div pai é paraslider e o div filho é para knob.
Agora temos que usar esses divs como controles deslizantes, passando os elementos para o construtor Slider como sliderObject, e knobObject. Dê uma olhada na seguinte sintaxe para definir o controle deslizante.
Sintaxe
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);Também temos que definir as opções do controle deslizante.
Opções de controle deslizante
Vamos discutir algumas opções que são usadas para controles deslizantes.
Snap
Um valor instantâneo pode ser verdadeiro ou falso. Isso determina se o botão se ajusta às etapas conforme é arrastado pelo controle deslizante. Por padrão, é falso.
Deslocamento
Este é o deslocamento relativo do botão da posição inicial. Experimente experimentar com este. Por padrão, é 0.
Alcance
Esta é uma opção muito útil. Você pode definir um intervalo de números em que as etapas serão divididas. Por exemplo, se o seu intervalo fosse [0, 200] e você tivesse 10 passos, seus passos seriam 20 separados. O intervalo também pode incluir números negativos, por exemplo [-10, 0], que é muito útil ao inverter a rolagem. Por padrão, é falso.
Roda
Defina a roda como verdadeira e o scroller reconhecerá o evento da roda do mouse. Ao usar a roda do mouse, pode ser necessário ajustar o intervalo para garantir que o evento da roda do mouse não apareça invertido (novamente, mais sobre isso posteriormente).
Passos
O padrão de 100 etapas é muito útil, pois é fácil de usar como porcentagem. Você pode, no entanto, definir quantas etapas (que são utilizáveis) dentro do razoável. Por padrão, é 100.
Modo
O modo definirá se um controle deslizante se registra como vertical ou horizontal. No entanto, existem mais algumas etapas necessárias para converter de horizontal para vertical. Por padrão, é horizontal.
Eventos de retorno de chamada
Existem três eventos de retorno de chamada importantes que um Slider fornece.
em mudança
Qualquer mudança na etapa atual aciona a execução do evento. Confira o exemplo fornecido abaixo para ver quando ele é executado.
onTick
Qualquer mudança na posição do identificador aciona a execução deste evento. Confira o exemplo fornecido abaixo para ver o que ele executa.
onComplete
Este evento é executado sempre que o identificador é solto. Confira o exemplo fornecido abaixo para ver quando ele é executado.
Exemplo
O exemplo a seguir explica o controle deslizante horizontal e vertical junto com os indicadores de evento. Dê uma olhada no código a seguir.
<!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>Resultado
Clique no botão marrom nos controles deslizantes horizontais ou verticais e arraste-o. Você encontrará a posição da etapa e a indicação do evento para cada ação.