左右にスライドする「jQuery pageSlide」

JavaScriptで飛び出すWebページへ！

2009年01月20日 08時00分更新

文● 小橋川誠己／企画報道編集部

　「解像度が低く画面領域が狭いPCでも見やすくページを表示させたい」「すっきりとしたレイアウトに見せたい」――そうした、Webページのコンテンツの表示／非表示を切り替えたいことがある。そんなときには、やはりJavaScriptを使うのが便利。上下・左右にコンテンツを折りたためるようにするJavaScriptライブラリはいくつもあるが、今回はちょっと変わった楽しい演出で表示を切り替えてくれるライブラリを紹介しよう。それが「jQuery pageSlide」だ。


「jQuery pageSlide」

　jQuery pageSlideは、jQueryのプラグインとして動作するオープンソース（MITライセンス）のJavaScriptライブラリ。このpageSlideをWebページに組み込むと、特定のリンクをクリックするだけで右側から別のコンテンツがスルッとスライドで飛び出してくるようになる。そのまま左側の領域をクリックすると、今度は左から右にスライドして元の状態に。この意外な仕掛け、初めてサイトを訪れたユーザーにはかなりの驚きがあるはずだ。


「jQuery pageSlide」で作成したサンプル。指定したリンクをクリックすると右側から別のコンテンツがスライドしてくる。左側をクリックすると元に戻る

■「jQuery pageSlide」のデモを動画で見る（AVIファイル）

　使用方法は簡単だ。pageSlideのWebサイトでは、HTML／CSSのサンプルを含むファイル一式が配布されている。それらを参考にして必要な部分をコピー＆ペーストしていけば自分のWebページに難なく組み込めるはずだが、ここでも具体的な手順を少し紹介しておこう。まず最初に、jQuery本体とpageSlideのJSファイル、CSSファイルを読み込ませる。


<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.pageslide-0.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.pageslide.css" />

　次に、同じく<head>～</head>内に以下のスクリプトを書く。「$('a.slide')」で指定しているのが、スライドするリンクの対象となるクラス名だ。また、スライドしてくるパネルの幅サイズもここで指定しておく。


<script type="text/javascript">
$(document).ready(function() {
$('a.slide').pageSlide({
width: "350px"
});
});
</script>

　あとは、HTMLのアンカー要素に、先ほど指定したクラスを追加すればOKだ。今回の例では「slide」というクラス名をつけたアンカーだけ、pageSlideが有効になる。

　このライブラリ、いろいろな使い方ができそうだ。たとえばサムネイル画像をクリックすると大きな画像が飛び出してくる、といった見せ方もできる。また、右側に表示されるコンテンツは同一のHTMLではなく、別のHTMLファイルになっているので、ナビゲーションメニューなど、各ページ共通で表示させたいコンテンツを外部ファイル化しておき、クリックで開いたり閉じたりする、といった使い方もいい。

　コンテンツの表示／非表示をいつもとはちょっと違った演出で切り替えたい。そんなときにはぜひ試してみたいライブラリだ。

■関連サイト