¿Cómo puedo hacer bonitas barras de desplazamiento usando HTML/CSS/JScrollPane?

Question

Estoy diseñando una página web HTML que imita paneles en línea definiendo esta clase CSS:

.paneSection{
  display: block;
  border-width: 1px;
  border-style: solid;
  margin: 2px;
  padding:0px; 
  height:200px;
  width:200px;
  overflow: auto
}

y aplicar a una etiqueta de intervalo.El código resultante es algo como esto:

<table>
  <tr valign=top>
    <td>
      <span class="paneSection">
        ... A long piece of text here that will inevitably overflow the block ...
      </span>
    </td>
    <td>
      <span class="paneSection">
        ... More text, may or may not overflow, etc...
      </span>
    </td>
  </tr>
</table>

El problema es que las barras de desplazamiento que aparecen son feas, grises y cuadradas.Realmente necesito una barra de desplazamiento "más bonita".He mirado a mi alrededor durante un par de horas y parece que casi todo apunta a usar el complemento JQuery JScrollPane.Sin embargo, aunque soy desarrollador (en realidad estoy usando Java para generar el HTML para la página web), nunca antes había usado JQuery o complementos.

Jugué un poco con el código fuente de otras páginas y conseguí que algo funcionara mínimamente, pero aún así nada bonito.Puede que me equivoque al decir esto, pero parece que necesito archivos de imagen reales para embellecer las barras de desplazamiento.

Un ejemplo de una barra de desplazamiento que me gusta es la del panel2 en esta página:http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html

¿Dónde puedo obtener las imágenes a las que se hace referencia en la fuente?¿Realmente necesito crear esas imágenes o están disponibles en algún lugar para descargarlas?

Se agradece cualquier otra ayuda sobre el diseño de bonitas barras de desplazamiento (NO soy diseñador gráfico, téngalo en cuenta) o cómo utilizar los complementos de JQuery en general.

Nota agregada También necesito que las barras de desplazamiento funcionen horizontalmente, no sólo verticalmente.¿JScrollPane sigue siendo adecuado para esto?

Answer 1

No se debe ser capaz de captar las imágenes. Por ejemplo una de las flechas está aquí: http: //www.kelvinluck .com / activos / jQuery / JScrollPane / images / osx_arrow_up.png .

La forma más fácil de encontrar esto es utilizar el inspector de su navegador (Chrome y Safari tiene esta construido en, uso de Firefox Firebug, no hay comentario en IE). Sólo rightclick en la barra de desplazamiento o la parte de la barra de desplazamiento que le interesa para la imagen y qué "Inspeccionar elemento". Desde allí se puede ver el css para ese elemento y en este caso se está utilizando la propiedad Imagen de fondo y se puede simplemente tomar la URL de aquí.

Si usted no es un diseñador gráfico me acaba de encontrar imágenes ya existentes en la web (suponiendo que el creador lo permite). Para jQuery, en general, yo sugeriría visionar la documentación http://api.jquery.com/ para ver qué está disponible para usted (supongo que sabes Javascript) y acaba de empezar a utilizarlo. La experiencia es un gran maestro en este caso.