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学习笔记--dijit.Dialog

带背景遮罩的对话框:dijit.Dialog这个对话框通用性非常好。而且显示效果比较友好,能给使用者很好的体验。而且无论是正常方式,还是编程方式,实现起来都比较简单。对话框包括两种,一种是普通的对话框...
  • liyong1115
  • liyong1115
  • 2008年02月17日 15:39
  • 1277

Dojo1.7动画特效详解

在本教程中我们将会探索Dojo1.7工具包提供的JavaScript特效,这些特效将给你的页面和网站创造酷炫的效果!本文由Oliver翻译自: Dojo Effects本文是对dojo1.6同名教程的...
  • dojotoolkit
  • dojotoolkit
  • 2012年04月24日 13:20
  • 4262

Dojo 1.7 Dialog和ToolTip 教程

原文:http://dojotoolkit.org/documentation/tutorials/1.7/dialogs_tooltips/ 原文作者:David Walsh译者:Elaine Li...
  • dojotoolkit
  • dojotoolkit
  • 2012年05月29日 10:11
  • 9209

dojo中Dialog对话框拖动移出浏览器屏幕的问题

dojo作为功能强大的js框架,提供了很多web页面小部件,包括树形、表格、对话框等。其中对话框作为常用的页面元素,很大程度上简化了开发人员的操作。但是如果拖动对话框到浏览器边缘,会发生界面宽高变化显...
  • fenqixiaoqiang
  • fenqixiaoqiang
  • 2015年02月11日 15:18
  • 513

dojo自定义对话框

  • 2017年05月16日 18:38
  • 960KB
  • 下载

Dojo1.11官方教程文档翻译(5.5)对话框和工具提示

对于构建响应式、交互式的web应用来说,用户交互是极为重要的。web浏览器在警告和对话框方面为用户交互提供了基本的方法,但是这些功能既不优雅也不灵活。`dijit/Tooltip`、`dijit/Di...
  • taijiedi13
  • taijiedi13
  • 2017年01月29日 19:13
  • 265

MFC 对话框 开启 Aero 毛玻璃 半透明 效果 (一)

必备要求: 1. Vista 及以上操作系统。 2. VS2008 SP1 及以上编译环境。 导入下列文件: #if _WIN32_WINNT >= 0x0600 #include...
  • polytechnic
  • polytechnic
  • 2010年06月26日 11:42
  • 7371

MFC 中实现在客户区拖动来拖动窗口的方法总结

VC++实现无标题栏对话框的拖动 其实说白了就是欺骗,欺骗谁了?呵呵,当然是欺骗windows,本来是移动标题栏可以拖动窗体,那么我们现在是拖动客户区来移动,当我们拖动标题栏的时候windows产生一...
  • CreatedSign
  • CreatedSign
  • 2014年02月07日 14:35
  • 2733

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

           明天就要数学模型的比赛....今晚写上一篇博客 ..........首先介绍一下如何使用dojo框架,关于dojo的基础知识点,网上已经有很多的文章做了介绍了,现在主要介绍一个d...
  • GXZheng1985
  • GXZheng1985
  • 2007年09月20日 22:32
  • 3107

dojo小例子(7)dijit.Dialog实现alert功能

function showMsg(message, title) { if( title == null ) title = ""; var d = new dijit.Di...
  • earthhour
  • earthhour
  • 2014年03月02日 11:00
  • 1340
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dojo实现透明对话框以及拖动效果
举报原因:
原因补充:

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