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種で試してみましたが、結果はどちらも×でした。
どれも、非常に悩んでおります。
どなたかご教示くださいますよう、是非とも宜しくお願い申し上げます。
どうしたら良いのかアドバイスいただきたく、お願い申し上げます。
カスタマイズしたいのは・・・
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種で試してみましたが、結果はどちらも×でした。
どれも、非常に悩んでおります。
どなたかご教示くださいますよう、是非とも宜しくお願い申し上げます。