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>
- Phasellus nec urna nulla, quis cursus ante. Nullam luctus dapibus auctor!
- Aliquam odio purus, tempus eu gravida vel, scelerisque quis mauris.
- Vivamus viverra convallis lectus ut porttitor.
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
- Pellentesque hendrerit sollicitudin elit, vitae venenatis arcu imperdiet nec.
- Suspendisse sit amet lorem tortor.
- Nulla congue porttitor leo, ac porttitor purus ultricies id?
- Aliquam erat volutpat.
- Sed ut magna sed tellus euismod lacinia eu at turpis.
- Quisque risus arcu, sodales vitae sodales vitae, venenatis vitae diam.
- Aliquam sagittis, quam ultrices interdum pulvinar, arcu purus ullamcorper erat, et aliquet sapien magna a velit!
- Praesent vehicula risus eu est congue et vulputate ante egestas.
- Aliquam posuere.
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>
1 comentario:
Pues parece buena idea para personalizar la barra de desplazamiento metiendo el contenido en un frame y dejado un bloque mínimo a un lado para el slider
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...