wiss inc

WISS inc.

ボタンウィジェットとイベントの接続

dijit. DijitのGUI部品の基本であるボタンの使い方

headタグでスクリプトをロードします。

<script type="text/javascript" 
  src="/js/dojoroot/dojo/dojo.js"
  djConfig="parseOnLoad: true"></script>
Dijitのウィジェットを使用する場合は、dojo.jsを呼ぶ際、djConfig="parseOnLoad: true" と指定します。これはページ読込み時にDOMをパースする指定で、dojoがウィジェットタイプを参照し表示を変えるため必要になります。

<script type="text/javascript">
  dojo.require("dijit.form.Button");
  dojo.require("dijit.Menu");
</script>
<style>
  @import "/js/dojoroot/dijit/themes/tundra/tundra.css";
  @import "/js/dojoroot/dojo/resources/dojo.css";
</style>

<div class="tundra">
<button dojoType="dijit.form.Button" id="test">
  <span>Click here</span>
  <script type="dojo/method" event="onClick">
    alert('押しましたね?');
  </script>
</button>

<div dojoType="dijit.form.DropDownButton" id="test2">
  <span>Edit</span>
  <div dojoType="dijit.Menu" id="Edit">
    <div dojoType="dijit.MenuItem" label="Copy"
      onclick="alert('Copy!');"></div>
    <div dojoType="dijit.MenuItem" label="Cut" ></div>
  </div>
</div>
</div>
require で Button と Menu を呼び出します。
GUI部品なのでスタイルシートを呼び、テーマ名のクラスのDIVで囲みます。テーマは3種類が用意されています。dojo.css は基本セレクタの初期化などです。

Clickイベントへの接続は上のようにbuttonタグ内にスクリプトを入れ、type, event属性を指定します(buttonタグ内に、onclick=でももちろんOK)。DropDown内の Menu アイテムは onclick で指定します。

サンプル:
Edit


※今回、dojo.css を読んだらこのブログエントリーの一部のタグのスタイルが書き換えられたのでコメントにしました。(preタグなど)
またボタン文字の色は逆にブログのスタイルが適用されたのでインラインスタイルで定義しています。
dojo.css は初期化がメインなのでスタイルの呼び出し順には少し注意が必要です。

TITLE