script.aculo.us - Criar controles deslizantes

Os controles deslizantes são trilhas finas com uma ou mais alças que o usuário pode arrastar ao longo da trilha.

O objetivo de um controle deslizante é fornecer um método de entrada alternativo para definir um valor numérico; o controle deslizante representa um intervalo e deslizar uma alça ao longo da trilha define um valor dentro desse intervalo.

Os controles deslizantes podem estar na orientação horizontal ou vertical. Quando horizontal, a extremidade esquerda da trilha geralmente representa o valor mais baixo, enquanto na orientação vertical, a parte inferior do slide geralmente é o valor mais baixo.

Para usar os recursos de controle deslizante do script.aculo.us, você precisará carregar o módulo slider.js junto com o módulo prototype.js. Portanto, seu carregamento mínimo para script.aculo.us será semelhante a este -

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>

Criação de um controle deslizante

Criar um controle deslizante é, como de costume, uma questão de construir um objeto personalizado sobre alguns elementos existentes no DOM da sua página. Você precisará de dois elementos aqui, um para a alça e outro para a pista da seguinte forma -

new Control.Slider(handle, track [ , options ] );

O elemento track é geralmente um <div>, e o elemento handle é um <div> ou <span> dentro do elemento track. Ambos podem ser passados por id = ou por referências diretas ao DOM, como de costume.

Opções de controles deslizantes

Você pode usar uma ou mais das seguintes opções ao criar seu objeto Slider.

Sr. Não	Opção e descrição
1	Axis Define a orientação do controle como horizontal ou vertical . A orientação padrão é horizontal .
2	Range Define o intervalo dos valores do controle deslizante como uma instância de uma instância Prototype ObjectRange. O padrão é 0 a 1.
3	Values Define o conjunto discreto de valores que o controle deslizante pode adquirir. Se omitido, todos os valores dentro do intervalo podem ser definidos.
4	sliderValue Define o valor inicial do controle deslizante. Se omitido, o valor representado pela extremidade esquerda (ou superior) do controle deslizante é o valor inicial.
5	Disabled Se verdadeiro, ele cria um slide que é inicialmente desativado. Obviamente, o padrão é falso.
6	setValue Irá atualizar o valor do controle deslizante e, assim, mover a alça do controle deslizante para a posição apropriada.
7	setDisabled Irá definir o controle deslizante para o estado desativado (desativado = verdadeiro).
8	setEnabled Irá definir o controle deslizante para o estado ativado (desativado = falso).

Você pode fornecer os seguintes retornos de chamada no parâmetro de opções -

Sr. Não	Opção e descrição
1	onSlide Chamado sempre que o Slider é movido arrastando. A função chamada obtém o valor do controle deslizante como seu parâmetro.
2	onChange Chamado sempre que o Slider termina de se mover ou tem seu valor alterado por meio da função setSlider Value. A função chamada obtém o valor do controle deslizante como seu parâmetro.

Exemplo de controles deslizantes

<html>
   <head>
      <title>Sliders Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            new Control.Slider('handle1' , 'track1',{
            range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){ $('changed').innerHTML = 'Changed Value : '+v;
               },

            onSlide: function(v) {
               $('sliding').innerHTML = 'Sliding Value: '+v; } }); new Control.Slider('handle2' , 'track2', { range: $R(1,100),
               axis:'vertical',
               sliderValue: 1,
               onChange: function(v){
                  $('changed').innerHTML = 'Changed Value : '+v; } onSlide: function(v) { $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
         }
      </script>
		
      <style type = "text/css">
         h1{ font-size: 1.5em; }
			
         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }
			
         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }
			
         .track.vertical { 
            width: 0.5em; height: 10em; 
         }
			
         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em; 
         }
      </style>
   </head>

   <body>
      <h1>Simple sliders</h1>

      <div id = "track1" class = "track" style = "width: 20em;" >
         <div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
      </div>

      <p id = "sliding" ></p>
      <p id = "changed" ></p>

      <div id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
      </div>
   </body>
</html>

Pontos a serem observados:

Você pode alterar a imagem do controle deslizante de qualquer controle deslizante usando CSS. Use as propriedades CSS background-image: url (track.gif) e background-repeat: no-repeat para definir a imagem do controle deslizante.
O valor do intervalo pode ser especificado usando $R(minValue, MaxValue). For example, $R (1,100).
O valor do intervalo pode ser especificado em termos de valores específicos. Por exemplo, valores: [1,25,50,75,100]. Nesse caso, o controle deslizante só alcançaria os valores discretos listados conforme a alça fosse movida.
A qualquer momento, o valor do controle deslizante pode ser definido sob o controle do programa chamando o método setValue () da instância do controle deslizante, como em: sliderInstance.setValue (50);

Isso produzirá o seguinte resultado -