2015/01/27

【jQuery】スマホのような左右のパネルをカンタン実装『jquery-panelslider』の使い方

【jQuery】スマホのような左右のパネルをカンタン実装『jquery-panelslider』の使い方

スマートフォンのような左右から出現するパネルを簡単に実装できるようになるプラグイン『jquery-panelslider』を紹介します

目次

入手方法

https://github.com/eduardomb/jquery-panelsliderにアクセし,右側のDownload ZIPをクリックしてダウンロードします.

ダウンロードしたZIPファイルを解凍して出来たファイルの中から,以下のようにjQuery本体とともに読み込みます.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.panelslider.min.js"></script>

設置方法

HTML構造は以下のような構造になります.

<div id="my-panel">
  <p>Hello, world</p>
</div>
<a id="my-link" href="#my-panel">Open panel</a>

ここに,以下のようにJavaScriptを用いて動きを設定します.

$('#my-panel').panelslider();

閉じるボタンを設定するには,ボタンのクリックイベントに以下の記述を紐付けます.

$.panelslider($('#my-panel'));

また,オプションを指定して実行するには以下のように記述します.

$('#my-panel').panelslider({
    side : 'left',  //出現する方向
    duration : 200,  //出現に係る時間
    clickClose : true,  //パネル外側クリックで閉じる動作
    onOpen : null  //パネルを開いた際に関数を呼び出すか
});

サンプル

http://eduardomb.github.io/jquery-panelslider/に左右・パネル外での開閉共にサンプルがあり,動きを確認することが出来ます.

まとめ

メニューを左右に置きたい場合などに使用することが出来ると思います.