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

最新推荐文章于 2021-01-11 10:34:39 发布

原创最新推荐文章于 2021-01-11 10:34:39 发布 · 3.7k 阅读

·

0

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了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>

标签

#dojo #button #div #dialog #html

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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