Dojo學習筆記–dijit.Dialog

帶背景遮罩的對話方塊：dijit.Dialog這個對話方塊通用性非常好。而且顯示效果比較友好，能給使用者很好的體驗。而且無論是正常方式，還是編程方式，實現起來都比較簡單。對話方塊包括兩種，一種是普通的對話方塊，一種是提示視窗的對話方塊，用起來都很方便。下面是一個普通的對話方塊：

<html>   <head><title>Dialog</title><style type="text/css">       @import "../js/dojo/resources/dojo.css";       @import "../js/dijit/themes/tundra/tundra.css";</style>          <script type="text/javascript"       djConfig="parseOnLoad: true, isDebug: true"       src="../js/dojo/dojo.js"></script><script type="text/javascript">       dojo.require("dijit.Dialog");       function showDia(){              dijit.byId("dialog1").show();                }</script><style>.dijitDialogUnderlay {       background: #666666;       opacity: 0.5;}</style></head><body class="tundra"><button id="b1" onclick="showDia()">顯示dojo對話方塊</button> <br>  <div dojoType="dijit.Dialog" id="dialog1" closeNode="hider" title="填寫表單">       <form onsubmit="return false;">              <table>                     <tr>                            <td><label for="name">姓名: </label></td>                            <td><input type="text" id="name"></td>                     </tr>                     <tr>                            <td><label for="loc">性別: </label></td>                            <td><input type="text" id="loc"></td>                     </tr>                     <tr>                            <td><label for="desc">年齡: </label></td>                            <td><input type="text" id="desc"></td>                     </tr>                     <tr>                            <td><label for="fileloc">電子郵件: </label></td>                            <td><input type="file" id="fileloc"></td>                     </tr>                     <tr>                            <td colspan="2" align="center">                                   <input type="button" id="hider" value="填好了"></td>                     </tr>              </table>       </form></div><br><br><select><option>看看對話方塊能不能擋住這個東西</option></select><br><br>遮罩的顏色可以通過設定.dijitDialogUnderlay來控制 </body></html>

 通過編程方式的一個對話方塊：

 

<html><head><title>Dialog</title><style type="text/css">       @import "../js/dojo/resources/dojo.css";       @import "../js/dijit/themes/tundra/tundra.css";</style>          <script type="text/javascript"       djConfig="parseOnLoad: true, isDebug: true"       src="../js/dojo/dojo.js"></script><script type="text/javascript">       dojo.require("dijit.Dialog");       function showDia(cont){              var pane=dojo.byId("Dpane");              if(!pane){                     pane=document.createElement("DIV");                     pane.setAttribute("id","Dpane");                     pane.style.width = "300px";                     document.body.appendChild(pane);              }              pane.innerHTML=cont;                       var dia=new dijit.Dialog({title:"dojo對話方塊"},pane);              dia.show();                   }              var alert=showDia;</script><style>.dijitDialogUnderlay {       background: #666666;       opacity: 0.5;}</style></head><body class="tundra"><button id="b1" onclick="alert('測試編程方式')">顯示dojo對話方塊</button> <br> <br><select><option>看看對話方塊能不能擋住這個東西</option></select><br><br>遮罩的顏色可以通過設定.dijitDialogUnderlay來控制 </body></html>

 

  提示對話方塊的例子：

 

<html><head><title>Dialog</title><style type="text/css">       @import "../js/dojo/resources/dojo.css";       @import "../js/dijit/themes/tundra/tundra.css";</style>          <script type="text/javascript"       djConfig="parseOnLoad: true, isDebug: true"       src="../js/dojo/dojo.js"></script><script type="text/javascript">       dojo.require("dijit.Dialog");       dojo.require("dijit.form.Button");   </script></head><body class="tundra"><div dojoType="dijit.form.DropDownButton">       <span>顯示登入表單</span>       <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="登入資訊" closeNode="hider2">              <form onsubmit="return false;">                     <table>                            <tr>                                   <td><label for="user">使用者名稱:</label></td>                                   <td><input type="text" id="user"></td>                            </tr>                            <tr>                                   <td><label for="pwd">密&nbsp;&nbsp;碼:</label></td>                                   <td><input type="password" id="pwd"></td>                            </tr>                            <tr>                                   <td colspan="2" align="center">                                          <button id="hider2">登&nbsp;&nbsp;錄</button>                            </tr>                     </table>              </form>       </div></div><br><select><option>看看對話方塊能不能擋住這個東西</option></select><br><br>這個彈出式的對話方塊使用DropDownButton來實現比較方便，如果想要通過其他方式實現可能需要一些dojo的編程。<br>其實也可以使用dijit.MasterTooltip來實作類別似的功能。<br> </body></html>