Scriptaculous sliders demos

Un slider es un control que permite "mover" cosas. Lo hemos visto muchas veces, por ejemplo, son lo que manejan el volumen de un video o audio y agregarlos a una web no es sencillo así que las librerías de JavaScript suelen incluir funciones especiales para que, manipularlos, se algo un poco menos dramático.

En script.aculo.us Slider Demos hay varios ejemplos de su uso que no es mucho y, tal vez, los más interesantes son aquellos que utilizan imágenes que sirven como botones para desplazarse.

<style>
  #track1-left { /* el límite izquierdo */
    background-color: #BDB76B;
    height:  12px;
    position:absolute;
    top:- 5px;
    left: 0;
    width: 1px;
  }
  #track1-right { /* el límite derecho */
    background-color: #BDB76B;
    height: 12px;
    position: absolute;
    top: -5px;
    left: 199px;
    width: 1px;
  }
  #track1 { /* el área de desplazamiento */
    background-color: #BDB76B;
  }
</style>

<div style="position:relative;">
  <!-- el slider -->
  <div id="track1" style="width:200px; height:2px;">
    <div id="track1-left"></div> <!-- el limite izquierdo -->
    <div id="track1-right"></div> <!-- el limite derecho -->
    <!-- el botón con la imagen -->
    <div id="handle1" style="width:15px; height:20px;">
      <img src="URL_slider" style="float: left;" />
    </div>
  </div>
</div>

<script>
  new Control.Slider('handle1', 'track1', { 
    onSlide: function(v) {
      // se detecta que se desplaza
    }, 
    onChange: function(v) {
      // se detecta que cambió de posición
    } 
  });
</script>

<style>
  #track2-top { /* el límite superior */
    background-color: #BDB76B;
    height: 1px;
    left: -5px;
    position: absolute;
    top: 0;
    width: 12px;
  }
  #track2-bottom { /* el límite inferior */
    background-color: #BDB76B;
    height: 1px;
    left: -5px;
    position: absolute;
    top: 199px;
    width: 12px;
  }
  #track2 { /* el área de desplazamiento */
    background-color: #BDB76B;
  }
</style>

<div style="position:relative;">
  <!-- el slider -->
  <div id="track2" style="width:2px; height:200px;">
    <div id="track2-top"></div> <!-- el limite superior -->
    <div id="track2-bottom"></div> <!-- el limite inferior -->
    <!-- el botón con la imagen -->
    <div id="handle2" style="width:19px; height:15px;">
      <img src="URL_slider.gif" style="float: left;" />
    </div>
  </div>
</div>

<script>
  new Control.Slider('handle2', 'track2', {
    axis: 'vertical',
    onSlide: function(v) {
      // se detecta que se desplaza
    }, 
    onChange: function(v) {
      // se detecta que cambió de posición
    } 
  });
</script>

Complicadito ... en fin, no es algo que tenga mucho uso; tal vez, una posibilidad interesante es la de poder cambiar las barras de desplazamiento que se ven en en cualquier elemento al que hemos dimensionado y cuyo contenido es muy grande. En Internet Explorer, las barras de desplazamiento pueden ser personalizadas utilizando CSS pero, lamentablemente, no pasa lo mismo en otros navegadores.

1. Phasellus nec urna nulla, quis cursus ante. Nullam luctus dapibus auctor!
2. Aliquam odio purus, tempus eu gravida vel, scelerisque quis mauris.
3. Vivamus viverra convallis lectus ut porttitor.
4. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
5. Pellentesque hendrerit sollicitudin elit, vitae venenatis arcu imperdiet nec.
6. Suspendisse sit amet lorem tortor.
7. Nulla congue porttitor leo, ac porttitor purus ultricies id?
8. Aliquam erat volutpat.
9. Sed ut magna sed tellus euismod lacinia eu at turpis.
10. Quisque risus arcu, sodales vitae sodales vitae, venenatis vitae diam.
11. Aliquam sagittis, quam ultrices interdum pulvinar, arcu purus ullamcorper erat, et aliquet sapien magna a velit!
12. Praesent vehicula risus eu est congue et vulputate ante egestas.
13. Aliquam posuere.

Usando Prototype + Scriptaculous y su plugin Slider que ya se carga de modo predeterminado si es que utilizamos las librerías de Google, es posible generar ese tipo de barra personalizada ... aunque no se si valdrá la pena.

De todos modos, acá hay un ejemplo:

<style>
  #scrollable2 {
    border-top: 2px solid #BDB76B;
    border-left: 2px solid #BDB76B;
    height: 120px;
    overflow: hidden;
    white-space: nowrap;
    width: 260px;
  }
  #wrap3 {
    border-left: 2px solid #BDB76B;
    height: 122px;
    left: 262px;
    position: absolute;
    top: 0;
    width: 10px;
  }
  #track3 { height: 120px; position: absolute; width: 15px; }
  #handle3 { height: 15px; width: 19px; }
  #wrap4 {
    border-top: 2px solid #BDB76B;
    height: 15px;
    left: 0;
    position: absolute;
    top: 120px;
    width: 262px;
  }
  #track4 { height: 10px; position: absolute; width:260px; }
  #handle4 { height:20px; width:15px; }
</style>

<div style="position:relative;">
  <div id="scrollable2">
    ....... acá colocaremos el contenido a mostrar  .......
    <div id="wrap3">
      <div id="track3">
        <div id="handle3"><img src="URL_imagen_slider_vertical" /></div>
      </div>
    </div>
    <div id="wrap4">
      <div id="track4">
        <div id="handle4"><img src="URL_imagen_slider_horizontal" /></div>
      </div>
    </div>
  </div>
</div>

<script>
  var slider3 = new Control.Slider('handle3', 'track3', {
    axis: 'vertical',
    onSlide: function(v) { scrollVertical(v, $('scrollable2'), slider3); }, 
    onChange: function(v) { scrollVertical(v, $('scrollable2'), slider3); }
  });
  var slider4 = new Control.Slider('handle4', 'track4', {
    onSlide: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); },
    onChange: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); }
  });
  function scrollVertical(value, element, slider) {
    element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
  }
  function scrollHorizontal(value, element, slider) {
    element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
  }
  if ($('scrollable2').scrollHeight <= $('scrollable2').offsetHeight) {
    slider3.setDisabled();
    $('wrap3').hide();
  }
  if ($('scrollable2').scrollWidth <= $('scrollable2').offsetWidth) {
    slider4.setDisabled();
    $('wrap4').hide();
  }
</script>