« 暗号/ハッシュ関数 | トップページ | ビルド »

2007年5月22日 (火)

ボタン

Buttonのwidgetを利用するには、dojo.widget.Buttonをrequireし、button要素に対してdojoType="Button"を指定する。通常のbutton要素と同じく、<button>~</button>で囲まれた部分がボタン上に表示される。

<script type="text/javascript">
dojo.require("dojo.widget.Button");
</script>
<button dojoType="Button"><b>click</b><br>test</button>

無効化

button要素にdisabled="true"属性を追加すると、無効化されたボタンが表示される。

<button dojoType="Button" disabled="true">test</button>

ボタンの有効/無効を動的に変えるには、ボタンのwidgetオブジェクトを取得してから、setDisabled(true)/setDisabled(false)メソッドを実行する。

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

  function init(){
    dojo.event.connect(dojo.widget.byId('test'), 'onClick', 'toggleDisable');
  }
  function toggleDisable(){
    var button = dojo.widget.byId('disabledbutton');
    button.setDisabled(true);
  }
  dojo.addOnLoad(init);
</script>

<button dojoType="Button" widgetId="disabledbutton">test</button><p>
<button dojoType="Button" widgetId="test">click here</button>

ボタンのwidgetオブジェクトのdisabledプロパティの値を取得して、現在のボタンの状態を取得できる。

var button = dojo.widget.byId('disabledbutton');
var disabled = button.disabled;

ボタンの表示内容を変更

setCaption(str)メソッドを使ってボタンの表示内容(innerHTML)を変えることができる。

var button = dojo.widget.byId('setcaption');
button.setCaption('changed');

Button widgetを動的に作成

Buttonのwidgetを動的に作る例を以下に示す。

var makebutton = dojo.widget.createWidget("Button", {caption: "hello world", onClick: toggleDisable});
dojo.byId("makeb").appendChild(makebutton.domNode);

« 暗号/ハッシュ関数 | トップページ | ビルド »

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: ボタン:

« 暗号/ハッシュ関数 | トップページ | ビルド »