スライドするパネルを作成するjavascript「jQuery Sliding Panels」 : skuare.net

スライドするパネルを作成するjavascript「jQuery Sliding Panels」

2007

12/12

限られたスペースを有効活用するため、または初めは隠しておきたいコンテンツがある。
そんな時はjQuery Sliding Panelsを使用すれば簡単に導入できます。

使用方法
jQuery Sliding Panelsからjquery.slidepanel.pack.jsとjquery.panels.css、さらに矢印の画像を、jQueryからjquery.js(v1.2.1)をダウンロードします。
<link rel="stylesheet" href="http://yourdomain/jquery.panels.css" type="text/css"> <script src="http://yourdomain/jquery-1.2.1.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.slidepanel.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.class名').slidePanel(); }); </script>
上のように記述したら対応するclassを要素に指定すれば完成です。
<p class="class名">テキスト</p> <div>コンテンツ</div>
またオプションとして最初から開いている状態やアコーディオンスタイル、別ページの読み込みなどができます。
スライドするパネルを作成するjavascript「jQuery Sliding Panels」サンプルをご参照下さい。