`
kevin-qingzhan
  • 浏览: 83940 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

带背景遮罩的对话框：dijit.Dialog

DojoCSS编程 
阅读更多
带背景遮罩的对话框：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>

分享到：
| hibernate中懒加载的处理
评论
1 楼 紫之皇 2011-01-11  
你好，我现在遇到个问题，如何在Dialog中添加EnhancedGrid?加<table>他显示，但是加了EnhancedGrid后，他就不显示了，请问如何解决？或者给举个例子也行
谢谢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics