DOJO :页面技术,负责显示功能,没什么可说的了,下面我做一个用户登陆的简单弹出对话框示例.
1) 将dojo 拷贝到自己的web工程中 .
2) 在自己的网页中使用dojo 的控件要做的准备工作如下:
2.1 ,引入必要的文件
<style type="text/css">
@import "dojoroot/dojo/resources/dojo.css";
@import "dojoroot/dijit/themes/tundra/tundra.css" ;
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true"
src="dojoroot/dojo/dojo.js">
</script>
其中 parseOnLoad : true 是在页面加载完毕之后,把dojo 定义的标签转化为 HTML 标签 。
2.2 , 引入包的方法。
/dijit.form
/dojox/widget/tests
/dijit/tests/*.html
以下为示例代码:
------------------------------------------------------------------------------------------------
Login.jsp
<%@page contentType="text/html;charset=utf-8"%>
<html>
<head>
<style type="text/css">
@import "dojoroot/dojo/resources/dojo.css";
@import "dojoroot/dijit/themes/tundra/tundra.css" ;
@import "css/dijitTests.css";
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true"
src="dojoroot/dojo/dojo.js"></script>
<script type="text/javascript" src="js/_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
var thirdDlg;
function createDialog(){
if(!thirdDlg){
var pane = dojo.byId('thirdDialog');
pane.style.width = "300px";
thirdDlg = new dijit.Dialog({
id: "dialog3",
refocus:false,
title: "Programatic Dialog Creation"
},pane);
}
setTimeout(function(){thirdDlg.show();},"3000");
}
</script>
</head>
<body>
<button dojoType="dijit.form.Button" οnclick="dijit.byId('dialog1').show()">Show Dialog</button>
<a href="javascript:dijit.byId('dialog1').show()"><IMG src="images/register.jpg" border=0></a>
<a href="javascript:dijit.byId('dialog1').show()">Show Dialog</a>
</body>
</html>
<div dojoType="dijit.Dialog" id="dialog1" title="Login">
<form action="login.do" method="post">
<table>
<tr>
<td><label for="name">Name: </label></td>
<td><input dojoType=dijit.form.TextBox type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="loc">Password: </label></td>
<td><input dojoType=dijit.form.TextBox type="password" name="pwd" id="loc"></td>
</tr>
<tr>
<td colspan="2" align="center">
<button dojoType=dijit.form.Button type="submit">OK</button>
<button dojoType=dijit.form.Button οnclick="javascript:dijit.byId('dialog1').hide()">return</button></td>
<td></td>
</tr>
</table>
</form>
</div>
----------------------------------------------------------------------------------------------------
值得一说的是返回按钮的实现,整个对话框就是一个隐藏的DIV,当点页面按钮时进行触发显示,那么返回则是再将其重新隐藏,
此处是通过其提供的hide方法来实现的(οnclick="javascript:dijit.byId('dialog1').hide()").
另外需要注意的是当刷新页面时可能会短暂的显示出该对话框,虽不影响使用,但影响美观.此现象我只在IE中发现过,火狐则没有,
那么此现象的解决在IE中就是写在html标签外也是不行的,我在使用JSP做显示时使用的框架技术,将其DIV体写在其它页面或是模板上面则可完美的解决.
也许还有其它方法可以解决,谁知道可以告诉我.
一点DOJO的心得:DOJO其实是很简单的,因为控件等都是人家写完的,我们只需引入相应的东西即可了,而且在DOJO的几大目录中也提供了相应的示例页面,
我们完全可以将我们需要的功能分离出来再重新组合成我们需要的即可.便拿此例来说,我便是将dojoroot/dijit/tests/test_Dialog.html中的显示对话
框分离出来后又加了一个返回按钮和验证吗,为了示例方便所以我将验证码给去掉了.返回按钮的灵感是因为弹出对话框上面的关闭按钮,即然他能实现,
那么就一定有现成的方法,所以我试了一下hide(),原因则是他在按钮里使用了此句οnclick="dijit.byId('dialog1').show(),后来在某个js文件里也找到了该方法,
忘了是哪个了,谁想找可以去搜一下.呵呵.
运行后效果:
页面:
对话框: