Dojo高级Web2.0 UI组件库---Dialog组件

最新推荐文章于 2023-07-11 14:27:28 发布

原创最新推荐文章于 2023-07-11 14:27:28 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#dojo #ui #web #dialog #function #string

Java Web2.0架构开发与项目实战专栏收录该内容

63 篇文章

订阅专栏

本文介绍了Dojo框架中的Dialog组件，它是一个模式对话框，可用于展示表单和其他内容。Dialog有两种类型：普通对话框和提示窗口对话框。文章详细列出了Dialog的属性和方法，包括duration、errorMessage、setContent等，并提供了示例代码，展示了如何通过HTML和编程方式创建Dialog。

Dialog相对应于 HTML 的对话框，是一个模式对话框。用户能通过此 widget 上的关闭按钮关闭此对话框，同时也可以在此对话框上放置表单 widgets，并且可以在此对话框上直接提交表单。对话框包括两种，一种是普通的对话框，一种是提示窗口的对话框，用起来都很方便。Dialog的属性和方法如表8-17和8-18所示。
表8-17 Dialog 的属性
属性描述
duration 对象处于活动状态的时间段。
errorMessage 错误提示信息，可以在 loading.js 文件中更改默认信息。
extractContent 当取回的内容是页面时，判断是否抽取页面标签 <body> … <//body> 内的可见的内容。
href 当前实现内容的超链接。如果在构造 ContentPane widget 的时候设置此项，就可以在 widget 显示的时候加载数据。
isLoaded 设置加载状态。
loadingMessage 加载时显示的信息，同 errorMessage 一样可以在 loading.js 文件中更改默认信息。
parseOnLoad 解析取回的内容，如果有 widgets 的声明，会实例化 widgets 。
preload 强制加载数据。
preventCache 判断是否缓存取回的外部数据。
refreshOnShow 在本 widget 从隐藏到展现时，判断是否刷新数据。
title 窗口的标题。
表8-18 Dialog的方法列表
方法描述
cancel() 取消进行中的内容下载
refresh() 强制刷新
resize(/* String */size) 此方法可以重新设置 widget 的大小。
setContent(/*String|DomNode|Nodelist*/data) 代替原有的内容，替换为新的内容。这个方法经常用到，可以动态向 ContentPane 中输入其他 widgets 。
show 显示窗口。
hide 隐藏窗口。
setHref(/*String|Uri*/ href) 替换原有的超链接，通过 XHR 的形式异步获取数据，然后重置此 widget 中的内容。
下面就是一个使用Dialog的例子，实现代码如下：
<html>
<head>
   <title>Dialog</title>
   <style type="text/css">
@import "dojoapp/dojo/resources/dojo.css";
@import "dojoapp/dijit/themes/tundra/tundra.css";
</style>
   <script type="text/javascript"
    djConfig="parseOnLoad: true, isDebug: true"
    src="dojoapp/dojo/dojo.js"></script>
   <script type="text/javascript">
       dojo.require("dijit.Dialog");
       function showDia(){
              dijit.byId("dialog1").show();
       }
        function hideDia(){
              dijit.byId("dialog1").hide();
       }
//以编程的方式创建对话框
       dojo.require("dijit.Dialog");
       function showDia2(cont){
              var pane=dojo.byId("dialog2");
              if(!pane){
                     pane=document.createElement("DIV");
                     pane.setAttribute("id","dialog2");
                     pane.style.width = "300px";
                     document.body.appendChild(pane);
              }
              pane.innerHTML=cont;
              var dia=new dijit.Dialog({title:"dojo对话框"},pane);
              dia.show();
       }
</script>
   <style>
.dijitDialogUnderlay {
background: #666666;
opacity: 0.5;
}
</style>
</head>
<body class="tundra"><br/>
<button id="b1" onclick="showDia()">录入用户信息对话框</button>
<button id="b2" onclick="showDia2('以编程方式实现对话')">编程方式对话框</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="确定" onclick="hideDia()">
     </td>
    </tr>
   </table>
</form>
</div></body>
</html>
在上面程序中，分别通过HTML和编程方式创建一个对话框，用程序创建一个窗口方法为new dijit.Dialog({title:"dojo对话框"},pane)，其中要在pane窗口中显示的HTML内容。
程序运行后，在出现的页面中单击“录入用户信息对话框”按钮后，出现如图8-27所示对话框。