REDLINE MAGAZINE | Spryの開閉パネルの件

Spryの開閉パネルの件

このサイトの最下部で使ってる開閉パネルについてメールを頂いたので、それについて書いてみます。jQuery以外のライブラリに触れるの久しぶりすぎて記憶が飛んでた・・・。

Sakkさんへ。
メールありがとうございました。お返事です(n'∀')η

ダウンロードと必要なファイル

まず本体をダウンロードします。

Adobe Labs - Spry framework for Ajax

このページの「Downloads」んとこのリンクを辿っていくとダウンロードできます。途中Adobe IDが必要になります。IDをまだお持ちでないなら作ってダウンロードしてくださいまし。

うちで使ってるのと同じようにするなら必要なのは上でダウンロードしたものの中の「widgets/collapsiblepanel/SpryCollapsiblePanel.js」と「widgets/collapsiblepanel/SpryCollapsiblePanel.css」の2つだけです。

ちなみにうちでは、CSSファイルについては必要な部分だけ抜き出して他のCSSファイルの中に入れて一緒に管理してます。

手順

まずサイト内のどっかに先ほどの2つのファイル（CSSは他とまとめるぜーの場合はjsファイルだけ）をコピーしてhead内で読み込みます。

<script type="text/javascript" src="SpryCollapsiblePanel.js"></script>
<link rel="stylesheet" href="SpryCollapsiblePanel.css" type="text/css" />

んでもって、次にbodyの中なんですが、さっきダウンロードしたjsファイルとcssファイルと同じ場所に動きのサンプルを見るためのhtmlファイルが同梱されてたと思うんですが、基本はその通りです。そのファイルでは5つのパネルがあったと思うんですがちょっと分かりやすいかなと思って1つにしてみました。（下記）

<div class="CollapsiblePanel" id="sample">
    <div class="CollapsiblePanelTab" tabindex="0">ここクリックするところ</div>
    <div class="CollapsiblePanelContent">
    ここに内容入れる<br />
    ここに内容入れる<br />
    ここに内容入れる<br />
    ここに内容入れる<br />
    </div>
</div>

なんかサンプルのソース見てるとdivが鬼のように出てきて頭痛くなるんですが、クリックするところと内容をまとめたdiv（class="CollapsiblePanel" id="sample"）、次のdiv（class="CollapsiblePanelTab"）がクリックするところ、次のdiv（class="CollapsiblePanelContent"）が内容をいれるところです。

上のソースを入れた後、下記のスクリプトを挿入します。

<script language="JavaScript" type="text/javascript">
new Spry.Widget.CollapsiblePanel("sample");
</script>

「Spry.Widget.CollapsiblePanel("sample");」の"sample"の部分と先ほど上で書いたソースのクリックするところと内容をまとめた親div（<div class="CollapsiblePanel" id="sample">）に指定したidを合わせます。

>>サンプルページ

あ、でもすいません。うちで使ってるのと今のはバージョンが違うと思うのでスクリプトの部分、同梱されてたhtmlに書いてあったみたいに

var sample = new Spry.Widget.CollapsiblePanel("sample");

こういう風に書かなきゃならないかもです。最新バージョンでの確認はしてません。すみません＞＜

開閉したいパネルが複数ある場合は同じようにソースを用意してidを書換え、スクリプト内にも同じようにidを変更したものを追加してやればＯＫです。あとはCSS側で見た目をコントロールすれば完成っす！

で、上のサンプルでは最初は内容パネルが開きっぱなしバージョンなんですが、パネルのデフォルトの状態を設定することもできます。その場合はさっきのスクリプト部分にその指定を足してやります。

<script language="JavaScript" type="text/javascript">
new Spry.Widget.CollapsiblePanel("sample", { contentIsOpen : false });
</script>

{contentIsOpen : false}の部分がデフォルトではパネルを閉めます、の設定部分です。

>>サンプルページ（デフォルトでパネル閉じてる）

その他のお返事

「クリックしたあと下にスクロールしなきゃいけないので、上方向に開く感じだといいなぁ」の件について。

そうなんですよね。それは今のデザインにリニューアルした時から実は私も思ってて、上方向に開くように頑張ってみたんですが、なんかコレはマズいなと思う事があったんですよね。何だっけな・・・。確かこのSpryで上方向に開くやり方が分からなくて、CSSでその部分を常に最下部に表示するようにしたらパネルが上に上がったんですが、JSが無効のブラウザで見ると何か肝心のコンテンツの一部が読めなかったか何かだった気がします。違うかも・・でも何か不都合があったんですよね・・・うる覚えでごめんなさい＞＜

あと開閉時にガクガクの件、私のほうでも時々そうなりますね。これはー・・・どうにもできそうにないので放置してます＞＜
というか、こういうもんなんだと思ってます・・・。

当時まだjQueryに出会ってなくてSpryを実験的に使ってみたんですが、今なら確実にjQuery使ってると思います。よかったらこっちのやり方も試してみてください。RedLine Magazine : jQueryでリストを開閉させたい

2009年02月07日 22:17 | Red | パーマリンク