Google AJAX Libraries API 経由の MooTools を使用 したアコーディオン
コンテンツです。簡単でかっこいい記事コンテンツを作れるのですが、
前提条件がいろいろあって・・・
※ タイトルをクリックするとその内容が表示されます
第１の前提条件
これはかなり問題あります。要するに、ブラウザの「標準モード」でないと動かないよう
なので、レンタルスペースでは全滅するかもしれません。
通常 IE 用の互換モードになってますので。( DOCTYPE 参照 )
以下のようにページの先頭がなっている必要があります
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
↓これはダメです
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
第２の前提条件
Google 経由では、基本ライブラリしか参照していないので、拡張機能である
アコーディオン処理は、自分でダウンロードしてきて自分でどこかに配置する
必要があります (More Builder)
以下がその例です。
<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("mootools", "1.2.1");
</script>
<script src="http://winofsql.jp/mootools112more.js" charset="utf-8"></script>
実際の実装
凝るのならば、いろいろできそうですし、domready というイベントも
使えるので、試してみるのもいいですが、動かなくなると困るので確実に要素を書いた後に
いつものようにSCRIPT で実装します。
<h5 class="toggler">第１の前提条件</h5>
<div class="element">
なんでも
</div>
<h5 class="toggler">第２の前提条件</h5>
<div class="element">
なんでも
</div>
<h5 class="toggler">実際の実装</h5>
<div class="element">
なんでも
</div>
<script type="text/javascript">
new Accordion('h5.toggler', 'div.element');
</script>
セレクタ使って一網打尽にできるので、便利なんですけど・・・
レンタルスペースではアウト(IE)ですねぇ。
Yahoo UI 使って拡張して似たような事をしているライブラリもあるのですが、
検証はまた今度です。
http://yuiblog.com/blog/2008/07/25/accordionview/
|
