程序博客网 > java解决并发

dojo事例及简介

来源：互联网发布：java解决并发编辑：程序博客网时间：2024/04/30 04:44

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" onclick="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 onclick="javascript:dijit.byId('dialog1').hide()">return</button></td>

    <td></td>
  </tr>
</table>
</form>
</div>
----------------------------------------------------------------------------------------------------
值得一说的是返回按钮的实现,整个对话框就是一个隐藏的DIV,当点页面按钮时进行触发显示,那么返回则是再将其重新隐藏,
此处是通过其提供的hide方法来实现的(onclick="javascript:dijit.byId('dialog1').hide()").
另外需要注意的是当刷新页面时可能会短暂的显示出该对话框,虽不影响使用,但影响美观.此现象我只在IE中发现过,火狐则没有,
那么此现象的解决在IE中就是写在html标签外也是不行的,我在使用JSP做显示时使用的框架技术,将其DIV体写在其它页面或是模板上面则可完美的解决.
也许还有其它方法可以解决,谁知道可以告诉我.
一点DOJO的心得:DOJO其实是很简单的,因为控件等都是人家写完的,我们只需引入相应的东西即可了,而且在DOJO的几大目录中也提供了相应的示例页面,
我们完全可以将我们需要的功能分离出来再重新组合成我们需要的即可.便拿此例来说,我便是将dojoroot/dijit/tests/test_Dialog.html中的显示对话
框分离出来后又加了一个返回按钮和验证吗,为了示例方便所以我将验证码给去掉了.返回按钮的灵感是因为弹出对话框上面的关闭按钮,即然他能实现,
那么就一定有现成的方法,所以我试了一下hide(),原因则是他在按钮里使用了此句onclick="dijit.byId('dialog1').show(),后来在某个js文件里也找到了该方法,
忘了是哪个了,谁想找可以去搜一下.呵呵.

运行后效果:

页面:

对话框:

java解决并发

java解决并发

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子曲江龙邸曲池曲池准确位置图和作用曲池的准确位置图曲池的作用与好处曲池的准确位置图和作用曲沃县曲沃吧曲沃景点曲沃代翼曲沃打架曲沃羊汤山西曲沃曲沃县万户村女人照片曲沃朝阳沟门票多少钱曲沃县事业单位招聘曲沃世纪小区曲沃仁惠医院曲沃温泉宾馆曲沃事业单位招聘曲泉曲波曲波简介曲洋曲溪曲溪景区曲炜秦腔曲牌豫剧曲牌将军令曲牌曲牌秦腔曲牌二胡祭灵秦腔曲牌祭灵秦腔曲牌连秦韩小青秦腔曲牌肖炳晋剧曲牌简谱大全秦腔曲牌连奏豫剧曲牌联奏晋剧曲牌大全京剧曲牌大全在线播放秦腔曲牌柳生芽