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或插件。

我玩了一些来自其他页面的源代码，并得到了一些最小的工作，但仍然没什么好看的。我说这个可能是错的，但似乎我需要实际的图像文件来使滚动条更漂亮。

我喜欢的一个滚动条的示例是此页面上的pane2上的滚动条： 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/以查看可用的内容（我假设你知道Javascript）并开始使用它。在这种情况下，经验是一位好老师。

如何使用HTML / CSS / JScrollPane创建漂亮的滚动条

1 个答案: