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" οnclick="showDia()">显示dojo对话框</button> <br>
 
 
<div dojoType="dijit.Dialog" id="dialog1" closeNode="hider" title="填写表单">
       <form οnsubmit="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" οnclick="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 οnsubmit="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>

 

 
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值