Dojo学习笔记--dijit.Dialog

最新推荐文章于 2020-08-07 14:55:45 发布

liyong1115

最新推荐文章于 2020-08-07 14:55:45 发布

阅读量1.9k

点赞数

分类专栏： dojo 文章标签： dojo import button dialog 编程 class

本文链接：https://blog.csdn.net/liyong1115/article/details/2100624

版权

dojo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

这个对话框通用性非常好。而且显示效果比较友好，能给使用者很好的体验。而且无论是正常方式，还是编程方式，实现起来都比较简单。

对话框包括两种，一种是普通的对话框，一种是提示窗口的对话框，用起来都很方便。

下面是一个普通的对话框：

<html>

<head>

<title>Dialog</title>

@import "../js/dojo/resources/dojo.css";

@import "../js/dijit/themes/tundra/tundra.css";

</style>

djConfig="parseOnLoad: true, isDebug: true"

src="../js/dojo/dojo.js"></script>

dojo.require("dijit.Dialog");

function showDia(){

dijit.byId("dialog1").show();

}

</script>

<style>

.dijitDialogUnderlay {

background: #666666;

opacity: 0.5;

}

</style>

</head>

<button id="b1" οnclick="showDia()">显示dojo对话框</button> <br>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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">密  码:</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>