Facebook風の横スライドを実現するjQueryプラグイン PageSlide

PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane

jQueyプラグイン「PageSlide」はスマートフォンサイトで、Facebook風の横に開くメニューを作りたい時に便利なプラグインです。

スライドさせる画面は、別途htmlを読み込む方法か、display:none;で隠した部分を表示させる方法の２つがあるようです。また、htmlを読み込む方法はhrefに直接javascriptを書く方法でも読み込めるようです。
コードは以下のとおりです。ここではおそらく一番遣いやすいdisplay:none;で隠した部分を表示させる方法を記述します。

<a class="open_slide" href="#modal">クリックして開く</a></pre>
<div id="modal" style="display: none;">
<h2>スライド内コンテンツ</h2>
 <a href="javascript:$.pageslide.close()">スライドを閉じる</a></div>
<pre>
<script type="text/javascript">
    $(".open_slide").pageslide({ direction: "left", modal: true });
</script>

ちょっと試してみたのですが、これdisplay:none;させるタグへのid=”modal”は必須っぽいです。別のidだとなんだか上手くいきませんでした。
また、プラグイン本体である jquery.pageslide.min.js を読み込むスクリプトタグを内に置くとなぜか動きませんでした。これは内で読み込まなきゃダメな仕様なのかもしれません。

まあjsは最後に読み込ませるサイトも多いのでそんなに問題にはならなさそうですが。

＞ デモは公式より

便利なプラグインだと思うので、スマホサイトを作る際には導入してみてはいかがでしょう。
ではでは！

Web制作の現場で使う jQueryデザイン入門［改訂新版] (アスキー書籍)
ー Amazon.co.jpで買う