HOMEUP

Dojo Toolkit ちょっと使ってみる AccordionContainer

試しにdijit.layout.AccordionContainerを使って見ました。

ページが短いように見えますがAccordionContainerの中にドキュメントを書いています。

↓がそれです。タイトル部分をクリックするとビロビロ〜ンとコンテンツが表示されます。

インストールしたらとりあえず使ってみたいのでdijit.layout.AccordionContainerを使ってみました。

実際にはJavaScriptが干渉するかどうか見たかったのです。

このサイト、一目見てわかるようにGoogle Adsenseの広告を表示しています。

後々、Google Maps API他のライブラリとDojoの組み合わせでいろいろとやりたいので、そのためのページです。

ちゃんと動いているみたいです^^d

<head>部分の解説です。ちょっと2行目が入りきらなかったんですがスクロールするとちゃんと見れますm(-_-)m

2行目でdojo.jsを読み込んでいます。djConfigのパラメータですが

parseOnLoad
trueにするとページが読まれた時点でdojoがdojoTypeを指定しているタグの属性を書き換えます。(他にもいろいろやってると思う…)
isDebug
trueにするとブラウザがFirefoxならいろいろな情報を別フレームに表示してくれます。もちろん、サイトにアップするときはfalseに設定しておきます。
なんかCSS関係でいっぱいWarningが出ました^^; 無視

続く<style>タグですがDojoには何種類かテーマが用意されていてここではtundraというテーマを使用するのでそのスタイルシート(tundra.css)を読み込んでいます。次にdojo.css。これは中身を見るとわかるのですがclassとかidとかのついていないタグのスタイルを設定しています。

その後に自前のタグを指定しています。djConfigのisDebug:trueでCSS関係のエラーが大量に出たのは「俺様CSS」が「Dojo CSS」を上書きしたせいみたいです。

その下では<script>タグでこのページで使うwidget、dijit.layout.AccordionContainerを指定してます。

最後に<body>タグで使用するテーマのtundraを指定しています。そのうち俺式テーマを作成予定です。

    <title>hoge hoge</title>
    <script type="text/javascript" src="/js/dojo-release-1.1.1/dojo/dojo.js" djConfig="parseOnLoad : true, isDebug : false"></script>
    <style type="text/css">
      @import "/js/dojo-release-1.1.1/dijit/themes/tundra/tundra.css";
      @import "/js/dojo-release-1.1.1/dojo/resouces/dojo.css";
      @import "/css/mainstyle.css";
      @import "/css/highlight.css";
    </style>

    <script type="text/javascript">
      dojo.require("dijit.layout.AccordionContainer");
    </script>
  </head>
  <body class="tundra">

このページでは使用していないのですがよく使うwindow.onload=hogehogeは次の様に指定します。

<script type="text/javascript">
    dojo.addOnLoad(oresama_init);

    // 俺様初期化ルーチン
    function oresama_init() {
      // Google Maps とか
      // いろいろと初期化する
    }
</script>

また別で解説する予定ですが、以下の様にして使います。

<div dojoType="dijit.layout.AccordionContainer" style="width:80%;height:200px;">
  <div dojoType="dijit.layout.AccordionPane" title="タイトル1">
    コンテンツ1
  </div>
  <div dojoType="dijit.layout.AccordionPane" title="タイトル2">
    コンテンツ2
  </div>
</div>
HOMEUP