Dojo学习笔记--dijit.Dialog
2008-02-17 15:39
411 查看
带背景遮罩的对话框: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">密 码:</label></td> <td><input type="password" id="pwd"></td> </tr> <tr> <td colspan="2" align="center"> <button id="hider2">登 录</button> </tr> </table> </form> </div> </div> <br> <select><option>看看对话框能不能挡住这个东西</option></select><br> <br> 这个弹出式的对话框使用DropDownButton来实现比较方便,如果想要通过其他方式实现可能需要一些dojo的编程。<br> 其实也可以使用dijit.MasterTooltip来实现类似的功能。<br> </body> </html> |
相关文章推荐
- Dojo学习笔记(十六):应用程序部件dijit/Tooltip、dijit/Dialog
- Dojo学习笔记--dijit.Menu
- ArcGIS Javascript学习笔记(三) Dojo
- WTL 学习笔记 -- ResizeDialog
- easyui的学习笔记--------dialog的使用
- 4.20学习笔记c# OpenFileDialog
- 学习笔记——自定义Dialog
- Android应用开发学习笔记之AlertDialog对话框
- Dojo 学习笔记--TabContainer
- Jetty+Dojo+Tomcat的Comet学习笔记-HelloWorld
- Silverlight学习笔记五( 在Silverlight 2.0/3.0/4.0 中使用OpenFileDialog浏览本地图片)
- dojo框架学习笔记-1
- 学习笔记——Dialog回调
- 【Qt学习笔记】7.对话框Dialog
- 【学习笔记】设置dialog进入和退出动画
- 菜鸟的Dojo学习笔记1
- Android基础控件之-----------对话框Dialog(学习笔记)
- Dojo学习笔记-- djConfig解说
- dojo/dom-style样式操作学习笔记
- selenium(webdriver)学习笔记5--处理windows security dialog,安全验证