2

この css クラスを定義して、インライン ペインを模倣する html Web ページを設計しています。

.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 の使用を指しているようです。ただし、私は開発者ですが (実際には Web ページの HTML を生成するために Java を使用しています)、JQuery やプラグインを使用したことはありません。

他のページのソース コードを少しいじってみました。言い方が間違っているかもしれませんが、スクロールバーをよりきれいにするには、実際の画像ファイルが必要なようです。

私が気に入っているスクロールバーの例は、このページのペイン 2 にあります: http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html

ソースで参照されている画像はどこで入手できますか? 実際にそれらの画像を作成する必要がありますか、それともどこかでダウンロードできますか?

きれいなスクロールバーの設計に関するその他のヘルプ (私はグラフィック デザイナーではありません。覚えておいてください)、または一般的な JQuery プラグインの使用方法を教えてください。

追加されたメモ スクロールバーが垂直方向だけでなく水平方向にも機能する必要があります。JScrollPane はまだこれに適していますか?

4

1 に答える 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 に答える