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.
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>
