Wie kann ich ziemlich Scrollbalken machen mit HTML / CSS / JScrollPane

Question

Ich bin der Gestaltung einer HTML-Webseite, die ahmt Inline-Scheiben durch diese CSS-Klasse zu definieren:

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

und der Bewerbung auf eine Span-Tag. Der resultierende Code ist so etwas wie folgt aus:

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

Das Problem ist, dass die Bildlaufleisten, die hässlich, grau, kantig diejenigen erscheinen sollen. Ich brauche wirklich ein „schöner“ Scrollbar. Ich habe für ein paar Stunden sah sich um, und es scheint, dass fast alles auf mit dem JQuery Plugin JScrollPane. Doch obwohl ich einen Entwickler bin (ich bin mit Java tatsächlich die HTML für die Webseite erzeugen), ich habe noch nie JQuery oder Plugins verwendet.

Ich spielte ein wenig mit Quellcode von anderen Seiten, und bekam etwas minimal arbeiten, aber immer noch nichts hübsch. Ich kann sagen, das falsch sein, aber es scheint, dass ich tatsächlich Bilddateien müssen die Bildlaufleisten bisschen besser zu machen.

Ein Beispiel für eine Scrollbar, Ich mag ist die auf panE2 auf dieser Seite: http://www.kelvinluck.com/assets/jquery/jScrollPane/examples. html

Wo kann ich die Bilder erhalten, die in der Quelle verwiesen werden? Brauche ich wirklich diese Bilder zu machen, oder sie sind irgendwo zum Download zur Verfügung?

Jede andere Hilfe bei der Gestaltung ziemlich Scrollbalken (Ich bin kein Grafiker bitte, dass im Auge behalten), oder wie JQuery Plugins verwendet im Allgemeinen geschätzt wird.

hinzugefügt Hinweis: Ich brauche auch die Bildlaufleisten horizontal, nicht nur vertikal zu arbeiten. Ist JScrollPane noch direkt für das?

Answer 1

Nein sollten Sie in der Lage sein, um die Bilder zu greifen. Zum Beispiel einer der Pfeile ist hier: http: //www.kelvinluck .com / assets / jquery / JScrollPane / images / osx_arrow_up.png .

Der einfachste Weg, dies zu finden, ist der Browserinspektoren (Chrome und Safari hat diese eingebaut, Firefox Firebug, keinen Kommentar zu IE). Nur Rechtsklick auf dem Scrollbar oder dem Teil der Scrollbar, die Sie interessieren sich für das Bild sind und nicht „Inspect Element“. Von dort können Sie die CSS für das Element sehen, und in diesem Fall, dass sie die Eigenschaft background-image verwenden und Sie können einfach die URL von hier greifen.

Wenn Sie kein Grafikdesigner sind, würde ich vorhandene Bilder finden nur bereits auf dem Netz (der Schöpfer unter der Annahme, dies zulässt). Für jQuery im Allgemeinen würde ich die Dokumentation http://api.jquery.com/ zu sehen, empfiehlt Durchlesen, was Ihnen zur Verfügung steht (ich nehme an, Sie wissen, Javascript) und starten Sie einfach es zu benutzen. Die Erfahrung ist ein großer Lehrer in diesem Fall.