Como posso fazer barras de rolagem bonita usando HTML / CSS / JScrollPane

Question

Eu estou projetando uma página web html que imita in-line painéis, definindo esta classe css:

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

e aplicando a uma tag span. O código resultante é algo como isto:

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

O problema é que as barras de rolagem que aparecem são feias, cinzas, os quadradão. Eu realmente preciso de uma barra de rolagem "mais bonita". Eu olhei em torno de um par de horas, e parece que quase tudo aponta para usando o plugin jQuery JScrollPane. No entanto, embora eu sou um desenvolvedor (estou realmente usando Java para gerar o html para a página da web), eu nunca usei JQuery ou plugins antes.

Eu brinquei um pouco com o código fonte de outras páginas, e tem algo mínima de trabalho, mas ainda nada bonita. Posso estar errado em dizer isso, mas parece que eu preciso de arquivos de imagem real para fazer as barras de rolagem mais bonita.

Um exemplo de uma barra de rolagem que eu gosto é aquele em pane2 desta página: http://www.kelvinluck.com/assets/jquery/jScrollPane/examples. html

Onde posso obter as imagens que são referenciados na fonte? Eu realmente preciso fazer essas imagens, ou são disponível em algum lugar para download?

Qualquer outro tipo de ajuda na concepção de barras de rolagem bonitas (eu não sou um designer gráfico, por favor, mantenha isso em mente), ou como usar plugins jQuery, em geral, é apreciado.

Adicionado Nota Eu também preciso das barras de rolagem para trabalhar horizontalmente, e não apenas na vertical. É JScrollPane ainda certo para isso?

Answer 1

Não, você deve ser capaz de agarrar as imagens. Por exemplo uma das setas está aqui: http: //www.kelvinluck .com / activos / jQuery / JScrollPane / imagens / osx_arrow_up.png .

A maneira mais fácil de encontrar este é usar inspector do seu navegador (Chrome e Safari tem esta embutido, Firefox uso Firebug, nenhum comentário sobre IE). Apenas rightclick na barra de rolagem ou a parte da barra de rolagem que você está interessado em para a imagem e não "Inspect Element". De lá você pode ver o css para esse elemento e, neste caso, eles estão usando a propriedade background-image e você pode simplesmente pegar o URL a partir daqui.

Se você não é um designer gráfico Gostaria apenas de encontrar imagens já existentes na web (assumindo que o criador permite isso). Para jQuery em I geral sugiro ler atentamente a documentação http://api.jquery.com/ para ver o que está disponível para você (eu suponho que você sabe Javascript) e basta começar a usá-lo. A experiência é um grande professor, neste caso.