Quantcast
Channel: Adobe Community : 人気のディスカッション - Dreamweaverコミュニティフォーラム (Japan)
Viewing all articles
Browse latest Browse all 52881

spry アコーディオンのカスタマイズ方法を教えて下さい!

$
0
0
spryを利用してアコーディオンメニューを作成しましたが、カスタマイズがうまくいきません。
どうしたら良いのかアドバイスいただきたく、お願い申し上げます。

カスタマイズしたいのは・・・
1.最初に開くパネルの設定(ページによっては、一番上のパネル以外のものを開きたい)
2.パネルアニメーションのオフ
3.変更可能なパネルの高さの設定(それぞれのパネル内のコンテンツに応じて高さが変わる)
4.初期表示で、全てのパネルが閉じた状態のもの

です。

1〜3に関しては、ヘルプリソースセンターに方法が掲載されていたのですが、どこに追加したらいいのか分からず、いろいろ試してみたのですがうまくい きません。
例えば、3.の場合は、
-------------------------------------------
次のように、コンストラクタで defaultPanel オプションを設定します。

<script type="text/javascript">
var acc8 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: 2 });
</script>
-------------------------------------------

とあるのですが、<head>内にコードを入れてみましたが、全パネルが開いたままで動かなくなります。
最下部に自動挿入されるjavascript部分にも試しに追加してみましたが、それもうまく動きません。
ヘルプリソースセンターを見ると簡単そうなのですが、何が悪いのでしょうか?

あと、4.ですが、これは可能なのでしょうか?
トップページの場合は、アコーディオンメニューは全て閉じていて欲しいのです。

ちなみに、HTMLのサンプルソースは下記の通りです。(ごく標準的なものです。)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/common.js"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">ラベル 1</div>
<ul class="AccordionPanelContent">
<li>コンテンツ1</li>
</ul>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">ラベル 2</div>
<ul class="AccordionPanelContent">
<li>コンテンツ2-1</li>
<li>コンテンツ2-2</li>
</ul>
</div>
</div>


<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>

※SpryAccordion.jsは、1.4と1.6.1の2種で試してみましたが、結果はどちらも×でした。

どれも、非常に悩んでおります。
どなたかご教示くださいますよう、是非とも宜しくお願い申し上げます。

Viewing all articles
Browse latest Browse all 52881

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>