关闭

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

标签: dojobuttondivdialoghtmljavascript
2943人阅读 评论(1) 收藏 举报

 

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

首先介绍一下如何使用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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:68157次
    • 积分:1157
    • 等级:
    • 排名:千里之外
    • 原创:45篇
    • 转载:9篇
    • 译文:0篇
    • 评论:7条
    文章分类
    最新评论
    JAVA