La idea es simple, tenemos un precioso diseño pero al maquetarlo nos damos cuenta que queda un poco feote con esas barras de scroll de sistema.
La solución es fácil, con un simple plugin de jquery podemos darle el estilo que queramos, la forma es bastante sencilla:
Añadimos el plugin en el head de nuestro site, junto con el css básico al que luego podremos dar forma:
<script type="text/javascript" xsrc="jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" media="all" xhref="styles/jScrollPane.css" />
Ahora solo tenemos que llamar al elemento de bloque, con overflow:auto, al que queramos dar estilo, si tenemos por ejemplo:
<ul class="lista_enlaces">
<li><a xhref="link1.html">Enlace 1</a></li>
<li><a xhref="link2.html">Enlace 2</a></li>
<li><a xhref="link2.html">Enlace 3</a></li>
</ul>
La llamada será tal que así:
$(function(){
$('.lista_enlaces').jScrollPane();
});
¡Y eso es todo!
Más información: jScrollPane
No hay Trackbacks
You can leave a trackback using this URL: http://www.josedelcorral.es/2009/01/25/como-dar-estilos-a-tu-barras-de-scroll-rapidamente/trackback/
5 Comentarios
Cada vez amo más a jQuery
Por cierto me gusta el cambio de imagen del blog.
Saludos!
Una gran pagina amigo. No entiendo mucho de diseño y programación ( esos años en los que estudiaba estas cosas quedaron muy atras) pero de por seguro que te has convertido en un gran profesional.
Mi mas sincera enhorabuena.
Thanks for this post, take care and have a great day!
Hola Jose.
Soy un ferviente admirador tuyo y sigo todos tus programas de radio.
Una pregunta tonta. ¿Qué es eso de xhref? he buscado en w3c y google y no veo nada. Desde cuando xhref y no href.
Un Saludo.
xref es lo que mi maravilloso plugin de wordpress para escribir código me saca cada vez que pongo href :/
En realidad lo hago para destacar, queda mucho más cool!