jScrollPane es un plugin de jQuery que nos permite darle un aspecto gráfico a las barras de desplazamiento de cualquier elemento, algo que en Internet Explorer es muy simple porque basta usar CSS pero que el resto de los navegadores jamás se ha implementado; cosa rara y absurda pero, hay de todo en este mundo.
Para usarlo, obviamente necesitamos jQuery que podemos cargar desde las librerías de Google así que antes de </head> ponemos:
Para usarlo, obviamente necesitamos jQuery que podemos cargar desde las librerías de Google así que antes de </head> ponemos:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' />
A continuación un script optativo que nos permitirá usar la rueda del ratón:
<script type='text/javascript' src='URL_mousewheel.js' />y por último el plugin en si mismo, ya sea en su versión normal o minimizada:
<script type='text/javascript' src='URL_jscrollpane.min.js' />Si no queremos usar archivos externos, estos dos últimos pueden agregarse directametne en la plantilla:
<script type='text/javascript'> //<![CDATA[ // acá pegamos el contenido del archivo mousewheel.js // acá pegamos el contenido del archivo jscrollpane.min.js //]]> </script>
Como todo, requiere sus reglas de estilo así que debajo agregamos esto que es lo mínimo necesario aunque hay más definiciones si queremos utilizar algunas de las opciones:
<style>
.jspContainer {
overflow: hidden;
position: relative;
}
.jspPane {position: absolute;}
.jspVerticalBar {
background-color: #000;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 16px; /* define el ancho de la barra vertical */
}
.jspHorizontalBar {
background-color: #000;
bottom: 0;
height: 16px; /* define el alto de la barra horizontal */
left: 0;
position: absolute;
width: 100%;
}
.jspVerticalBar *, .jspHorizontalBar * {margin: 0; padding: 0;}
/* estas son las reglas que permiten configurar el plugin */
.jspTrack { /* es el rectángulo donde se desplaza del slider */
background-color: #000;
position: relative;
}
.jspDrag { /* es el slider en si mismo */
background-color: #888;
cursor: pointer;
left: 0;
position: relative;
top: 0;
}
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
float: left;
height: 100%;
}
</style>Con eso ya está todo listo para que podamos utilizarlo en cualquier parte. Para eso, basta que definamos una o varias clases; por ejemplo:
</style>
.scroll-pane {height: 200px; overflow: auto; width: 100%;}
.horizontal {height: auto; max-height: 200px;}
</style>
<div style="width: 500px;">
<div class="scroll-pane">
<p> ....... el contenido a mostrar ... </p>
</div>
</div>
<div style="width: 500px;">
<div class="scroll-pane horizontal">
<p style="width: 1000px;"> ....... el contenido a mostrar ... </p>
</div>
</div>Y llamamos a la función usando la clase que hemos definido:
<script type="text/javascript">
$(function() { $('.scroll-pane').jScrollPane(); });
</script>Las posibilidades son múltiple, en la página del desarrollador hay varios demos explicativos donde se combinan las barra, se agregan botones, etc.
TABLA - FUENTES - FONTS
Disculpen las Molestias
No hay comentarios:
Publicar un comentario