jQueryでスクロールバーのカスタマイズ第二弾

top2011_1213.jpgスクロールバーのカスタマイズ第二弾
前回(http://style-type.net/2010/07/jquery.html)のバージョンアップとなります。
今回はざっくりとですが「jScrollPane」について書き留めていきます。

まずは必要なjQueryのプラグインをダウンロード。
jScrollPane(英語サイト)
※2011/12/09 現在

screenimg1.png
ページ内の Downloadの項目から[ download a zip ]をクリックし、ページ遷移後はDownload.zipをクリックします。

解凍後は沢山のファイルが現れますが[ basic.html ]をクリックします。
ScreenClip1.png
basic.htmlは、カスタマイズの基礎を知るには一番良いDemoページだと思います。
今回はこのbasic.htmlをに検証していこうと思います。

補足ですが解凍されたファイルがなぜ沢山あるかというと、index.htmlをクリックすると分かるのですが、プラグインがあるサイトのデータが入っているみたいです。と、いってもほぼDemo関連のファイルのようです。

■自前のページにスクリプトを適応
(Google AJAX API)
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

(マウスでのスクロールを適応する)
jquery.mousewheel.js

(コレがないと始まらないスクリプト。)
jquery.jscrollpane.min.js

上記の以外にページのソース内に下記を追加します。
※セレクタの設定

			$(function()
			{
				$('.scroll-pane').jScrollPane();
			});

ココまでで、ひとまずJS関連の設定は終了。
※は内部などはさわらないでおkみたいです。

■CSSの設定
カスタマイズのベースは下記のCSSみたいです。
jquery.jscrollpane.css
主にスクロールバーのバックグランドカラーや、バー自体の横幅や色を設定。
その他に基本的な設定は、このCSSで管理されているみたいです。

カスタマイズさせたスクロールを表示させたい場所には、任意の設定が必要になります。
それが、basic.htmlのソース内に記載されているstyle部分みたいです。
※jQueryのクラスセレクタ。

			.scroll-pane
			{
				width: 100%;
				height: 200px;
				overflow: auto;
			}
			.horizontal-only
			{
				height: auto;
				max-height: 200px;
			}

.scroll-paneをピックアップすると高さが200pxを超えた時にスクロールが現れ、横幅は100%なのでscroll-paneを囲むボックス要素に依存する。って事になりそうですね。

最後に[ jquery.jscrollpane.css ]について。
■スクロールバーの横幅
.jspVerticalBarのwidthを変更することができる

■スクロールのバーの部分
.jspDragのbackgroundを変更することで色が変更することができる

■スクロールバーの背景を変更
.jspTrackのbackgroundを変更することができる

ひとまず上記3箇所のプロパティを変更することで、バーの横幅と、バーの色、バーの背景色をカスタマイズできます。

この他にも、沢山のDemoファイルがあるので同じ要領で解析していけばカスタマイズできると思います。