« カレンダー | トップページ | 時間指定 »

2007年7月24日 (火)

ダイアログ

dojo.widget.Dialogにより、他のHTML要素の操作をブロックするダイアログを作ることができる。表示するダイアログの内容を含むdiv要素に対して、dojoType="dialog"属性を付ける。ダイアログとしてHTMLフォームを含むこともできる。ダイアログの内容は、子要素として含むのではなく、href属性でURL指定した別ファイルのHTMLを指定することもできる。

<div dojoType="dialog" id="loginDialog" bgColor="white" bgOpacity="1" toggle="fade" toggleDuration="250" closeNode="hider" closeonbackgroundclick="true"  >
  <h3>Login Dialog</h3>
  <form onsubmit="return false;">
    <table>
      <tr>
        <td>Name:</td><td><input type="text"></td>
      </tr>
      <tr>
        <td>Password:</td><td><input type="password"></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input type="button" id="closer" value="Login"></td>
      </tr>
    </table>
  </form>
</div>

<style type="text/css">
.dojoDialog {
  background : #eee;
  border : 1px solid #999;
  -moz-border-radius : 5px;
  padding : 4px;
}
</style>

ダイアログを表示するためには、Dialog Widget要素に対して、show()メソッドを実行する。

<script type="text/javascript">
dojo.require("dojo.widget.Dialog");
function showDialog(){
  dojo.widget.byId("loginDialog").show();
}
</script>

<a href="javascript:showDialog()">Show Login Dialog</a>

Dialogの要素は以下の属性を取ることができる。

属性概要
bgColor ダイアログ外側の背景色
bgOpacity ダイアログ外側の背景の透過率
toggle ダイアログを表示するときの効果として、wipe, explode, fadeを指定できる
toggleDuration toggleで指定した効果の実行時間をミリ秒単位で指定する
closeNode onclickイベントによりダイアログを消すHTML要素のID名
closeOnBackgroundClick trueを指定するとダイアログの外をクリックするとダイアログを閉じる。デフォルトはfalse
lifetime ダイアログの表示時間
blockDuration 操作ができない時間
href ダイアログとして表示する内容のHTML要素をURLで指定する
executeScripts hrefでダイアログの内容を指定したとき、指定したHTML内のJavaScriptを実行するかどうかをtrue/falseで指定する。デフォルトはfalse

ModalFloatingPane

ModalFloatingPaneは、Dialogと同様に、他のHTML要素の操作をブロックするダイアログを作成する。窓の形状がFloatingPaneと同じとなる点がDialogと異なる。

ModalFloatingPaneは、FloatingPaneとDialogのベースとなっているModalDialogBaseを継承しているため、FloatingPaneとDialogそれぞれとほぼ同じ機能を提供する。

<div dojoType="ModalFloatingPane" id="loginModalDialog" title="Login Floating Pane"
  style="width: 400px; height: 200px;" closeNode="hider" closeonbackgroundclick="true"
  bgColor="white" bgOpacity="1" toggle="fade" toggleDuration="250">
  <h3>Login Dialog</h3>
  <form onsubmit="return false;">
    <table>
      <tr>
        <td>Name:</td><td><input type="text"></td>
      </tr>
      <tr>
        <td>Password:</td><td><input type="password"></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input type="button" id="hider" value="Login"></td>
      </tr>
    </table>
  </form>
</div>
<script type="text/javascript">
dojo.require("dojo.widget.ModalFloatingPane");
function showModalDialog(){
  dojo.widget.byId("loginModalDialog").show();
}
</script>

<a href="javascript:showModalDialog()">Show Login Dialog</a>

« カレンダー | トップページ | 時間指定 »

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: ダイアログ:

« カレンダー | トップページ | 時間指定 »