如何使用HTML / CSS / JScrollPane制作漂亮的滚动条

Question

我正在设计一个HTML网页，通过定义以下CSS类来模仿嵌入式窗格：

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

并应用于span标签 结果代码如下所示：

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

问题在于出现的滚动条是丑陋的，灰色的，方形的。 我真的需要一个“更漂亮”的滚动条。 我环顾了几个小时，似乎几乎所有内容都指向使用JQuery插件JScrollPane。 但是，尽管我是一名开发人员（实际上我正在使用Java为网页生成html），但我之前从未使用过JQuery或插件。

我在其他页面上玩了一些源代码，并做了一些最小的工作，但仍然没有任何好处。 我这样说可能是错误的，但是看来我需要实际的图像文件才能使滚动条更漂亮。

我喜欢的一个滚动条的一个示例是此页面上panel2上的滚动条： http ://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html

在哪里可以获取源中引用的图像？ 我是否真的需要制作这些图像，或者可以在某些地方下载这些图像？

在设计漂亮的滚动条方面有任何其他帮助（我不是平面设计师，请记住这一点），或者通常如何使用JQuery插件。

补充说明：我还需要滚动条在水平方向而不是垂直方向工作。 JScrollPane仍然适合吗？

Answer 1

不，您应该能够抓取图像。 例如，箭头之一在这里： http : //www.kelvinluck.com/assets/jquery/jScrollPane/images/osx_arrow_up.png 。

最简单的方法是使用浏览器的检查器（Chrome和Safari内置此检查器，Firefox使用Firebug，对IE无评论）。 只需右键单击滚动条或滚动条中您对图像感兴趣的部分，然后执行“检查元素”。 从那里可以看到该元素的css，在这种情况下，它们使用的是background-image属性，您可以从此处获取URL。

如果您不是平面设计师，我只会在网络上找到已经存在的图像（假设创建者允许这样做）。 一般而言，对于jQuery，我建议仔细阅读文档http://api.jquery.com/，以了解可用的内容（我假设您知道Java语言），然后开始使用它。 在这种情况下，经验是一位了不起的老师。