JMiur [E]

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

17 comentarios:

Graciela  

Un encanto! sobre el fondo negro luce más :D

Responder
Gem@  

Ohhh que bonito!! yo uso mucho las barras para mostrar código pero sin jQuery :(

Responder
Watesam  

Genial y muy útil :D

Responder
JMiur  

Hay que pedir que los navegadores permitan cambiar las barras como en IE :D

Responder
Albus Dumbledore  

Hola JMiur, espero te encuentres bien. Yo por mi parte extrañando a Rosa, cuanta falta nos hace... Bueno pero así es la vida... :(

Buen post, directo a 'Favoritos'.

Responder
Martin Rocha  

Hola Jmiur esta muy buena esta mejora y la quice aplicar pero no pude.
Primero que nada agregue los archivos de forma externa, pero si lo fuera a aplicar en el html mismo asi estaria bien?
Por otro lado lo aplique en esta entrada peor no se si aplique los cosigos mas o que.
Desde ya muchas gracias Jmiur saludos.

Responder
JMiur  

Sí. Se puede poner de ese modo, directamente en la plantilla.

Alli en ese sitio se ve un error en otro script que hace referencia a un menú: jQuery("ul.menu-primary").superfish.

Responder
Martin Rocha  

Si es raro JMiur, quito las librerias y anda bien el slideshow y eso que en teoria se basan en las mismas..hay solucion?
Un saludo

Responder
JMiur  

Puede que haya algo incompatible, es raro.

Responder
nEjO  

TENGO UNA DUDA: ¿es posible que al usar la "ruedita de mi mouse" para mover el scroll horizontal en lugar del vertical? (algo asi como invertir la funcion) me refiero si existe algun codigo para que cualquiera que visite mi blog que sera totalmente horizontal, pueda moverse en horizontal sin utilizar la barra de desplazamiento sino mas vien utilizando "la ruedita del mouse".

JMiur  

Lo desconozco.

Responder
Yurika-Chan  

JMiur como lo aplico si el scroll lo tengo en una de las sidebar

JMiur  

De modo similar. Se debe aplicar al DIV que quieras modificar y ver qué pasa y qué detalles denes adaptar.

Yurika-Chan  

Lo intente pero no paso nada, tal vez lo este poniendo en el Div equivocado, en donde es exactamente

JMiur  

No sé de que blog se trata.

Responder
Kenpachi  

Buenas, hay alguna forma de que la barra del scroll se vea en el centro incluyendo su contenido?

JMiur  

Todo eso se controla con el CSS. Habría que ver cuál es el ejemplo que estás usando y a qué te refieres exactamente.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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

 
CERRAR