skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

簡単導入スライドjavascript「jquery.toggleElements.js」

｜ ｜ ｜ ｜ ｜ ｜ ｜

既存のサイトに折りたたみ式のスライドを採用したいと思う人は多いでしょう。
しかし、導入にあたっては多くの障壁があるのが現状でしょう。
jquery.toggleElements.jsでは手間無く導入できてしまいます。

使用方法
jquery.toggleElements.jsからjquery.toggleElements.js、toggleElements.cssをjQueryからjquery.jsをダウンロードします。
<link rel="stylesheet" href="http://yourdomain/toggleElements.css" style="text/css">
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.toggleElements.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.class名など').toggleElements();
});
</script>
上記を記述したら、要素にclassをtitleにタイトルを付与すれば完成です。
<div class="class名" title="スライドタイトル">
コンテンツ
</div>
オプション
　fxAnimation：slide,show,fade
　fxSpeed：fast,nomal,slow
＊toggleElements.cssで画像4点を指定していますので、適宜変更してください。
togglerc.gif、togglerch.gif、togglero.gif、toggleroh.gif
簡単導入スライドjavascript「jquery.toggleElements.js」サンプル

記事作成：2008年01月22日

前の記事：プロキシーをiPhone&iPod touchでも可能にしたjavascript「iFreecell」
次の記事：コードを色付けるシンタックスハイライトjavascript「SHJS」