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>
4 comentarios:
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
Esta bueno, lastima que con el slider la rueda del mouse no funciona.Pero para algo servira,nunca se sabe :D
hola JMiur... sé que esto no corresponde al tema pero desde ayer 02/12 apareció otra locura de Google: nos han eliminado los lectores del Feed. Nuestros suscriptores se han evaporado !!
Acabo de ver el FeedBurner Help Group y todo el mundo se está quejando por esto.
Se arregló el error de los Feed después de un día. Ya funcionan otra vez
¿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 ...