2

我正在设计一个通过定义这个 css 类来模仿内联窗格的 html 网页：

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

并应用于跨度标签。生成的代码是这样的：

<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 仍然适合这个吗？

4

1 回答 1

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）并开始使用它。在这种情况下，经验是一位伟大的老师。

于 2010-02-05T19:38:24.377 回答