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

tfnew21

浏览: 131454 次
性别:
来自: 武汉

最近访客更多访客>>

xncz

shuijin水晶

fmbobin

谁在修改我墓碑的印记

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (164)

社区版块

存档分类

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

UI Dojo 编程 CSS JavaScript

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所示对话框。