微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Dojo高级Web2.0 UI组件库---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所示对话框。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐