前の記事 ≪:2009年10月13日 管理人のブックマーク
次の記事 ≫:jQueryを使ったハイセンスなTwitterティッカー実装チュートリアル

スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」

2009年10月14日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
jScrollPane

スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」。
ちょっと前に話題になっていたような気がしますが便利なのでご紹介。

デザインサイトなどで、スクロールを使ってしまうとOSによって見栄えが変わってきてしまって全体のデザインを崩してしまいますが、このプラグインを使えばそういうこともなさそうですし、更に拡張された機能を使うことができます。以下にピックアップします。

デザイニング

次のような自由にデザインされたスクロール付きブロックを実装可能


プラットフォームに関わらずWinXPスタイルのスクロールバー実装


同様にMacOS Xみたいなスクロールバーも実装できます


拡張機能

さらに面白いのが、スクロール内でさらにスクロールさせるという機能。
スクロール要素をネストできます


あと、スクローラー外部からの<A>タグをクリックで指定位置にスクロールするというページ内ブックマーク的な機能もあって便利です。

(注) 画像のためクリックできません。

この機能は、スクロールをデザインするという目的以外の部分でも威力を発揮しそうですね。

こういうものが $('.scroll-pane').jScrollPane(); といった感じでjQueryのプラグインならではの簡単な方式で実現できてしまうところも素晴らしいです。
関連の記事検索:jQuery, Webデザイン
スポンサード リンク

By.KJ : 2009年10月14日 09:07 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)