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

本文介绍了Dojo框架的基本安装步骤,并通过实例演示了拖动效果的实现及一个透明登录界面的设计方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

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

首先介绍一下如何使用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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值