新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


dojoライブラリを使ってアコーディオンメニューを作ってみました

"dijit.layout.AccordionContainer"

これを使うだけです。

下記のようにJavaScriptを記述して、実装します。


dojo.require("dojo.parser");
dojo.require("dijit.layout.AccordionContainer");

var init = function() {

// dijit.layout.AccordionContainerオブジェクトの生成
var container = new dijit.layout.AccordionContainer({
}, dojo.byId("container"));

// 1つ目のパネルの生成
var pane1 = new dijit.layout.AccordionPane({
selected: true,
title: "Pane 1",
content: "パネル1"
}, dojo.byId("pane1"));

// 1つ目のパネルをコンテナに追加
container.addChild(pane1);

// 2つ目のパネルの生成
var pane2 = new dijit.layout.AccordionPane({
title: "Pane 2",
content: 'パネル2。
HTMLの記述も可能'
}, dojo.byId("pane2"));

// 2つ目のパネルをコンテナに追加
container.addChild(pane2);

// 3つ目のパネルの生成
var pane3 = new dijit.layout.AccordionPane({
title: "Pane 3",
href: "src/dojoSrc007.html"
}, dojo.byId("pane3"));

// 3つ目のパネルをコンテナに追加
container.addChild(pane3);

// コンテナの描画開始
container.startup();
}

dojo.addOnLoad(init);


まずコンテナオブジェクトを new して実装します

次に実装するパネルの数だけ要素を作成します

  title: "Pane 1",
  content: "パネル1"

titleはメニューに表示するデータです
contentはアコーディオンメニューを開いたときのデータです
またここで指定しなくてもHTML上で記述することもできるようです。

パネルを実装したら

  container.addChild(pane1)

とコンテナーに実装したパネルを追加していきます。


最後に

  container.startup();

とすればアコーディオンメニューの作成完了です

以下にアコーディオンのサンプルを用意しました
http://smileboys.fc2web.com/WebUtility/ajax/dojo/dojo007.html

とサンプルをサーバにおいてみたんですが・・・・・

表示されない><

なぜ???

ローカルでは表示されるのにサーバ上では表示されないって意味がわからない。

CSSファイルもJSファイルも置いてあるし

わかったらまた連絡します。。。

誰かわかる人教えてください><
スポンサーサイト

テーマ:dojo.js - ジャンル:コンピュータ

<<カラーパレットから色を選択した色に背景色をかえる | ホーム | dojoを使ってフォームのvalidateチェックとか>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://kanamehackday.blog17.fc2.com/tb.php/122-ac967600
この記事にトラックバックする(FC2ブログユーザー)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。