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

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

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

一 安装dojo的主要步骤 :

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

(2) 要引入dojo的javascript库

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

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

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

</script>

二 拖动效果的实现

<! DOCTYPEHTMLPUBLIC " -//W3C//DTDHTML4.0Transitional//EN " >
< HTML >
< HEAD >
< TITLE > NewDocument </ TITLE > </ HEAD >
< scripttype = " text/javascript " >
vardjConfig = ... {isDebug:true} ;
</ script >
< scripttype = " 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()
... {
newdojo.dnd.HtmlDragMoveSource(dojo.byId("test1"));
newdojo.dnd.HtmlDragMoveSource(dojo.byId("test2"));
}
);
functiontt()
... {
alert("-------------------------");
}
dojo.addOnLoad(tt);
</ script >
< BODY >
< buttondojoType = " Button " widgetId = " helloButton " onclick = " dojo.dom.copyChildren(dojo.byId('t1'),dojo.byId('t2'),true) " > 提交 </ button >
< buttondojotype = " button " widgetid = " bt " onclick = " dojo.byId('ll').innerHTML+='Helloxinshaoye' " > 显示 </ button >

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

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

一个很不错的登陆界面

<! DOCTYPEHTMLPUBLIC " -//W3C//DTDHTML4.0Transitional//EN " >
< HTML >
< HEAD >
< TITLE > NewDocument </ TITLE > </ HEAD >
< scripttype = " text/javascript " >
vardjConfig = ... {isDebug:true} ;
</ script >
< scripttype = " text/javascript " src = " dojojs/dojo.js " ></ script >

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

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

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

< BODY >

</ BODY >
</ HTML >