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

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

使用方法
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」サンプルをご参照下さい。

sponsors

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

記事作成:
記事URL:

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