« ビルド | トップページ | チェックボックス »

2007年7月11日 (水)

ドロップダウンボタン, コンボボタン

ドロップダウンボタン

ボタンを押すとメニューが現れるドロップダウンボタンを作成できる。ドロップダウンボタンを利用するときは、dojo.widget.Buttonをrequireする。

<script type="text/javascript">
dojo.require("dojo.widget.Button");
</script>

ドロップダウンボタンは、button要素に対してdojoTypeを"DropDownButton"と指定する。ボタンを押したときに表示されるメニューのIDをmenuId属性に指定する。

<button dojoType="DropDownButton" menuId="menu" widgetId="button">test</button>

メニューは、button要素とは別に、dojoTypeを"PopupMenu2"と指定して作成する。PopupMenu2はtoggle属性を指定して、メニューの表示方法を指定できる。toggleは、"plain", "wipe", "fade", "explode"のいずれかを指定できる。

メニューの各項目は、PopupMenu2を指定した要素の子要素にdojoTypeを"MenuItem2"と指定して作成する。メニュー要素は、アイコン画像をiconSrc、表示文字列をcaption、ショートカットキーをaccelKey属性として指定できる。

<div dojoType="PopupMenu2" id="menu" toggle="wipe">
  <div dojoType="MenuItem2" iconSrc="/sample/cut.gif" caption="Cut" accelKey="Ctrl+C" onClick="alert('cut')"></div>
  <div dojoType="MenuItem2" iconSrc="/sample/copy.gif" caption="Copy" accelKey="Ctrl+X" onClick="alert('copy')"></div>
  <div dojoType="MenuItem2" iconSrc="/sample/paste.gif" caption="Paste" accelKey="Ctrl+V" onClick="alert('paste')"></div>
</div>

コンボボタン

ドロップダウンボタンではボタンを押すとメニューが現れたが、コンボボタンでは、ボタン自体を押すことができ、さらにボタンの右側にメニューが現れるボタンも表示される。

コンボボタンを作成するときは、dojoTypeを"ComboButton"にする以外はドロップダウンボタンと同じ。

« ビルド | トップページ | チェックボックス »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/7107284

この記事へのトラックバック一覧です: ドロップダウンボタン, コンボボタン:

« ビルド | トップページ | チェックボックス »