Dojo学习9 带背景遮罩的对话框:dijit.Dialog

9. 带背景遮罩的对话框: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>
 
demo的加载速度可能比较慢,请耐心等待。demo地址:
http://www.dojocn.cn/dojo/demo/13_testDialog2.htm
http://www.dojocn.cn/dojo/demo/13_testDialog1.htm
http://www.dojocn.cn/dojo/demo/13_testDialog.htm

你可能感兴趣的:(Dojo学习9 带背景遮罩的对话框:dijit.Dialog)