dojo实现透明对话框以及拖动效果
发布时间：2020-12-16 21:55:18 所属栏目：百科 来源：网络整理
导读：明天就要数学模型的比赛....今晚写上一篇博客.......... 首先介绍一下如何使用dojo框架,关于dojo的基础知识点,网上已经有很多的文章做了介绍了,现在主要介绍一个dojo的两个主要应用:1,拖动效果的实现 2,网站上面经常能看到的一个登录界面 一 安装dojo的主要
|
明天就要数学模型的比赛....今晚写上一篇博客.......... 首先介绍一下如何使用dojo框架,关于dojo的基础知识点,网上已经有很多的文章做了介绍了,现在主要介绍一个dojo的两个主要应用:1,拖动效果的实现 2,网站上面经常能看到的一个登录界面 一 安装dojo的主要步骤 : (1) 复制dojo-0.4.0-ajax文件夹下面的两个文件,分别是dojo.js和src文件夹到你的应用程序的目录下面.下面以复制到dojojs文件夹下面为例. (2) 要引入dojo的javascript库 <scripttype="text/javascrpt" src="dojojs/dojo.js"></script> (3)除了要引入库之外,还要动态加载某些需要使用的函数以及对象. 如:<script >dojo.require("dojo.widget.*"); </script> 二 拖动效果的实现
<!
DOCTYPEHTMLPUBLIC
"
-//W3C//DTDHTML4.0Transitional//EN
"
>
< HTML > < HEAD > < TITLE > NewDocument </ TITLE > </ HEAD > < scripttype = " text/javascript " > vardjConfig = ... {isDebug:true} ; </ script > < scripttype = " 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() ... { newdojo.dnd.HtmlDragMoveSource(dojo.byId("test1")); newdojo.dnd.HtmlDragMoveSource(dojo.byId("test2")); } ); functiontt() ... { alert("-------------------------"); } dojo.addOnLoad(tt); </ script > < BODY > < buttondojoType = " Button " widgetId = " helloButton " onclick = " dojo.dom.copyChildren(dojo.byId('t1'),dojo.byId('t2'),true) " > 提交 </ button > < buttondojotype = " button " widgetid = " bt " onclick = " dojo.byId('ll').innerHTML+='Helloxinshaoye' " > 显示 </ button > < divid = " t1 " > < divid = " ll " > 文本1 </ div > < div > 文本2 </ div > < div > 文本3 </ div > </ div > < hr > < divid = " t2 " > 呵呵这是第2个div </ div > < hr > < divid = " test1 " style = " width:300px;height:200px;background-color:#ee4444 " > 可以自由拖动 </ div > < divid = " test2 " style = " width:300px;height:200px;background-color:#ee44dd " > 可以拖 </ div > </ BODY > </ HTML > 三 实现一个经常用到的透明登陆界面 一个很不错的登陆界面
<!
DOCTYPEHTMLPUBLIC
"
-//W3C//DTDHTML4.0Transitional//EN
"
>
< HTML > < HEAD > < TITLE > NewDocument </ TITLE > </ HEAD > < scripttype = " text/javascript " > vardjConfig = ... {isDebug:true} ; </ script > < scripttype = " text/javascript " src = " dojojs/dojo.js " ></ script > < script > dojo.require( " dojo.widget.Dialog " ); dojo.require( " dojo.widget.Button " ); vardlg; functioninit() ... { dlg=dojo.widget.byId("dialog0"); } dojo.addOnLoad(init); </ script > < div > < buttondojotype = " button " onclick = " dlg.show() " > 带表单的对话框 </ button > </ div > < br > < divdojotype = " dialog " id = " dialog0 " bgcolor = " blue " bgopacity = " 0.5 " toggle = " fade " toggleDuration = " 250 " lifetime = " 5000 " > < formaction = " test.html " method = " post " > < tableborder = " 0.5 " > < caption > 登陆 </ caption > < trcolspan = 2 >< hr ></ tr > < tr >< td > 用户名 </ td >< td >< inputtype = " text " ></ td ></ tr > < tr >< td > 密码: </ td >< td >< inputtype = " text " ></ td ></ tr > < tr >< td >< inputtype = " submit " id = " hider0 " ></ td >< td >< inputtype = " reset " id = " reset " ></ td ></ tr > </ table > </ form > </ div > < BODY > </ BODY > </ HTML > （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |