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

原创 2007年09月20日 22:32:00

 

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

首先介绍一下如何使用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 1.7 Dialog和ToolTip 教程

原文:http://dojotoolkit.org/documentation/tutorials/1.7/dialogs_tooltips/ 原文作者:David Walsh译者:Elaine Li...

上传照片代码记录(1) ——实现周围透明灰色,中间可以操作的对话框效果

上传照片功能中将呈现一种特效,如下图所示:                   中间呈现为可用对话框,页面周围为灰色、不可用的视觉效果。具体实现代码如下: 实现代码共分为三部分,下面的代码是从...

Android UI设计--半透明效果对话框

  • 2015年08月26日 10:11
  • 1.19MB
  • 下载

JS弹出可移动的DIV对话框透明遮罩效果

弹出提示    * {margin:0;padding:0;font-size:12px;}  html,body {height:100%;width:100%;}  #content {b...

使用png 实现透明边缘的对话框

  • 2012年03月15日 10:34
  • 223KB
  • 下载

实现对话框控件透明

  • 2014年06月26日 15:54
  • 3.85MB
  • 下载

Dojo JavaScript实现消息滚动出现效果

介绍 这种效果说的就是类似状态监视器一样的应用。实时更新后台或某个监控点的状态消息。主要采用的技术就是定时器和滚动定位。   代码示例 @import "../js/dijit/...
  • eengel
  • eengel
  • 2013年10月30日 11:03
  • 2231

js 弹出对话框(遮罩) 透明,可拖动

function sAlert(txt) { //var eSrc=(document.all)?window.event.srcElement:arguments[1]; var shield = ...

jquery实现的拖拽效果,解决拖动速度过快时的会卡现象,select的遮挡问题和透明效果

我的html 代码 弹出层 点击这里,弹出层 这是标题 X 关闭 这是内容 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dojo实现透明对话框以及拖动效果
举报原因:
原因补充:

(最多只允许输入30个字)