About

今すぐ使える!?jQueryプラグイン紹介-part1-

Share on FriendFeed
[`tweetmeme` not found]

はい、こんばんはです~
3ヶ月ぶりですが、読者様は果たしているのだろうか・・・
と思いつつもブログを書いちゃいます!

このシリーズ?は、私が「これ・・・使い方分かりにくいんじゃない?」と思ったjQueryのプラグインを紹介したいと思います。
今回は「jscrollpane」を紹介したいと思います!

jscrollpane

これは、jQueryでサイトの「overflow-y:scroll;」や「overflow-x:scroll;」のスクロールバーのデザインを変更するプラグインです。
この手のプラグインは数個知っているのですが、これが一番簡単でしたので紹介しました。

使い方は以下のようにします。

まず、下記サイトよりをダウンロードします。

URL:
http://code.google.com/p/jscrollpane/downloads/detail?name=demo-1.2.2.zip&can=1&q=

demo-1.2.2.zipをダウンロードしたら、その中に入っている以下のファイルを自分の制作しているサイトに読み込みます。

・js
scripts/jScrollPane.js
script/jquery.mousewheel.js

また、当然ながらjQueryも読み込んでください。
あと、自分でjsを記述しますのでbase.jsなど、自分でjsファイルを1つ作って読み込んでください(すでにある人はそこに書いても可)

・css
styles/jScrollPane.css

ヘッダーの中はこのようになっているはずです。


[html]



[/html]

そしたら、スクロールさせたい要素にcssで「overflow-y:scroll;」を指定します。


[html]

ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげ
ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ

[/html]


[css]
#news{
width:800px;
height:138px;
overflow-y:scroll;
}
[/css]

HTMLの、newsというタグの中がスクロールします。この時点ではまだデフォルトのcssです。
次に、先ほど用意したbase.jsに次のように記述します。


[javascript]

$(function(){
$("#news").jScrollPane();
})

[/javascript]

これで準備が整いました。サイトを見てみましょう。
スクロールバーが変わっているはずです。

デザインについて少し説明しておきます。(よくわかってないですが)

jScrollPane.cssの中にある、
.jScrollPaneTrackをいじると、スクロールバーの背景が変更ができます。

jScrollPane.cssの中にある、
.jScrollPaneDragをいじると、スクロールバーそのものの変更ができます。
例えば・・・


[css]
.jScrollPaneDrag {
position: absolute;
background:#000;
cursor: pointer;
overflow: hidden;
}
[/css]

と書けば、スクロールバーが黒くなります。
また、画像を指定することもできます。

追記(2012年8月4日)

サンプルを作りました。
demo

最後に・・・

いかがだったでしょうか?
読み込むまではめんどくさいですが、設定自体は簡単だと思います。
なんでこんな記事を書いたかというと、私自身がこれに苦労したからです。スクロールバーのプラグインの情報がわかりにくいし、英語のドキュメントもかなりある・・・だったら私がわかりやすい情報を書けばいい!と思ったんです。
わかりやすく書いたつもりですが、わかりにくかったらご指摘ください。
最後までお付き合いいただきありがとうございました。ではまたー!

2011/08/06 | JavaScript, WebDesign

関連記事

no image

YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

記事を読む

no image

jQueryでロールオーバーを実装する2つの方法

世界中のakiファンの皆様、おはようございます。今回はjQueryで画...

記事を読む

みんなのアイドル「初音ミク」をブラウザ上で躍らせる「MMD.js」がktkr

はい・・・・タイトルひどいですね。 まぁそんなことはどうでもいいんで...

記事を読む

no image

チェックボックスやラジオボタンのデザインを簡単に変える方法(jQuery使用)

こんにちは、秋永です。 超久しぶりにjQuery案件で重いものがあり...

記事を読む

新着記事

no image

WordPressのアイキャッチのサイズを追加しても変更されないのは大体再生成すれば直る件

functions.phpでアイキャッチのサイズを変更する方法といえば...

記事を読む

bbpressのトピックスURLがループ内ですべて同じになってしまう場合の解消法

こんにちは。 今日はWordpressのプラグイン、bbpressの...

記事を読む

WordPressの管理画面をカスタマイズしよう!

最近趣味で「コミサ」というwebサイトを作ったのですが、これが会員サイ...

記事を読む

無料でデータベースも使えるサーバを紹介します!

最近趣味でサイトを運営したいなーと思った際に、このドメイン(ousia...

記事を読む

no image

YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

記事を読む

コメント/トラックバック (1件)

トラックバック用URL:

コメントフィード

  1. […] riptファイルに書いてしまった事。これで、追加や変更がしやすくなりますね。 【参照】http://akidesign.chu.jp/blog/?p=388 カテゴリー: レイアウト   パーマリンク ← スライダーLight […]




管理人にのみ公開されます

no image
WordPressのアイキャッチのサイズを追加しても変更されないのは大体再生成すれば直る件

functions.phpでアイキャッチのサイズを変更する方法といえば...

bbpressのトピックスURLがループ内ですべて同じになってしまう場合の解消法

こんにちは。 今日はWordpressのプラグイン、bbpressの...

WordPressの管理画面をカスタマイズしよう!

最近趣味で「コミサ」というwebサイトを作ったのですが、これが会員サイ...

無料でデータベースも使えるサーバを紹介します!

最近趣味でサイトを運営したいなーと思った際に、このドメイン(ousia...

no image
YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法

件名のとおりなのですが、ブログやサイトにyoutubeの動画を埋め込む...

→もっと見る

PAGE TOP ↑