dojo实现透明对话框以及拖动效果

 

          明天就要数学模型的比赛....今晚写上一篇博客 ..........

首先介绍一下如何使用dojo框架,关于dojo的基础知识点,网上已经有很多的文章做了介绍了,现在主要介绍一个dojo的两个主要应用:1,拖动效果的实现   2,网站上面经常能看到的一个登录界面

一  安装dojo的主要步骤 :

(1)  复制dojo-0.4.0-ajax文件夹下面的两个文件,分别是dojo.js和src文件夹到你的应用程序的目录下面.下面以复制到dojojs文件夹下面为例.

(2)  要引入dojo的javascript库

<script type="text/javascrpt" src="dojojs/dojo.js"></script>

(3)除了要引入库之外,还要动态加载某些需要使用的函数以及对象.

如:<script >dojo.require("dojo.widget.*");

</script>

 二 拖动效果的实现

 

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML >
  < HEAD >
   < TITLE >  New Document  </ TITLE >   </ HEAD >
< script type = " text/javascript " >
var djConfig = ... { isDebug: true } ;
</ script >
< script type = " text/javascript "  src = " dojojs/dojo.js " ></ script >

< script >
dojo.require( " dojo.dnd.* " );
dojo.require( " dojo.dnd.HtmlDragMove " );
dojo.require( " dojo.event.* " );
dojo.require( " dojo.widget.Button " );
dojo.addOnLoad(function ()
... {
    new dojo.dnd.HtmlDragMoveSource(dojo.byId("test1"));
    new dojo.dnd.HtmlDragMoveSource(dojo.byId("test2"));
}
);
function tt()
... {
    alert("-------------------------");
}
dojo.addOnLoad(tt);
</ script >  
  < BODY >
  < button dojoType = " Button "  widgetId = " helloButton "  onclick = " dojo.dom.copyChildren(dojo.byId('t1'),dojo.byId('t2'),true) " > 提交 </ button >
  < button dojotype = " button "  widgetid = " bt "  onclick = " dojo.byId('ll').innerHTML+='Hello xinshaoye  ' " > 显示 </ button >

  < div id = " t1 " >
  < div id = " ll " > 文本1 </ div >
  < div > 文本2 </ div >
  < div > 文本3 </ div >
  </ div >
  < hr >
   < div id = " t2 " > 呵呵 这是第2个div </ div >
   < hr >
   < div id = " test1 "  style = " width:300px;height:200px;background-color:#ee4444 " > 可以自由拖动 </ div >
     < div id = " test2 "  style = " width:300px;height:200px;background-color:#ee44dd " > 可以拖 </ div >
  </ BODY >
</ HTML >

 

三  实现一个经常用到的透明登陆界面

一个很不错的登陆界面

 

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML >
  < HEAD >
   < TITLE >  New Document  </ TITLE >   </ HEAD >
< script type = " text/javascript " >
var djConfig = ... { isDebug: true } ;
</ script >
< script type = " text/javascript "  src = " dojojs/dojo.js " ></ script >

< script >
dojo.require( " dojo.widget.Dialog " );
dojo.require( " dojo.widget.Button " );

var dlg;
function init()
... {
    dlg=dojo.widget.byId("dialog0");
}
dojo.addOnLoad(init);
</ script >  

< div >
< button dojotype = " button "  onclick = " dlg.show() " > 带表单的对话框 </ button >
</ div >
< br >
< div dojotype = " dialog "  id = " dialog0 "  bgcolor = " blue "  bgopacity = " 0.5 "  toggle = " fade "  toggleDuration = " 250 "  lifetime = " 5000 " >
< form action = " test.html "  method = " post " >
< table border = " 0.5 " >
< caption > 登陆 </ caption >
< tr colspan = 2 >< hr ></ tr >
< tr >< td > 用户名 </ td >< td >< input type = " text " ></ td ></ tr >
< tr >< td > 密  码: </ td >< td >< input type = " text " ></ td ></ tr >
< tr >< td >< input type = " submit "  id = " hider0 " ></ td >< td >< input type = " reset "  id = " reset " ></ td ></ tr >
</ table >
</ form >
</ div >

  < BODY >
 
  </ BODY >
</ HTML >