- 浏览: 170726 次
- 性别:
- 来自: 福州
文章分类
最新评论
-
mncc:
太好了!!!Mark一下!不过貌似那个冒泡的还少个右下角吧? ...
Google Maps 图标地址收藏 -
ivorytower:
去年5月捡了命回来,现在不评论那些豆腐渣工程……
汶川地震留给我们什么?单单建什么地震纪念馆是没有用的 -
lgx2351:
wtusmchen 写道blog写的不错啊,以后多过来学习:) ...
js学习笔记2-函数 -
wtusmchen:
blog写的不错啊,以后多过来学习:)
js学习笔记2-函数
应用开发时很经常地要生成浮动层,在 浮动层 里显示一些我们需要显示的内容。
生成浮动层主要分为两个部份。一个是外围的div,这个div主要是根据传入的参数值来设置它的属性,如它的left、top、width、height、opacity等值。另一个部份是div里放的一table,这个table有两行,第一行用在拖动和最大化最小化上;第二行是放置浮动层要显示的内容。
function drag(elementToDrag, event) { var startX = event.clientX, startY = event.clientY; var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop; var deltaX = startX - origX, deltaY = startY - origY; if (document.addEventListener) { // DOM Level 2 event model document.addEventListener("mousemove", moveHandler, true); document.addEventListener("mouseup", upHandler, true); } else if (document.attachEvent) { // IE 5+ Event Model elementToDrag.setCapture( ); elementToDrag.attachEvent("onmousemove", moveHandler); elementToDrag.attachEvent("onmouseup", upHandler); elementToDrag.attachEvent("onlosecapture", upHandler); } else { // IE 4 Event Model var oldmovehandler = document.onmousemove; // used by upHandler( ) var olduphandler = document.onmouseup; document.onmousemove = moveHandler; document.onmouseup = upHandler; } if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2 else event.cancelBubble = true; // IE if (event.preventDefault) event.preventDefault( ); // DOM Level 2 else event.returnValue = false; // IE function moveHandler(e) { if (!e) e = window.event; // IE Event Model elementToDrag.style.left = (e.clientX - deltaX) + "px"; elementToDrag.style.top = (e.clientY - deltaY) + "px"; if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2 else e.cancelBubble = true; // IE } function upHandler(e) { if (!e) e = window.event; // IE Event Model if (document.removeEventListener) { // DOM event model document.removeEventListener("mouseup", upHandler, true); document.removeEventListener("mousemove", moveHandler, true); } else if (document.detachEvent) { // IE 5+ Event Model elementToDrag.detachEvent("onlosecapture", upHandler); elementToDrag.detachEvent("onmouseup", upHandler); elementToDrag.detachEvent("onmousemove", moveHandler); elementToDrag.releaseCapture( ); } else { // IE 4 Event Model document.onmouseup = olduphandler; document.onmousemove = oldmovehandler; } if (e.stopPropagation) e.stopPropagation( ); // DOM Level 2 else e.cancelBubble = true; // IE } } function minimize(floatLayerId,event){ if (event.stopPropagation) event.stopPropagation( ); // DOM Level 2 else event.cancelBubble = true; // IE if (event.preventDefault) event.preventDefault( ); // DOM Level 2 else event.returnValue = false; // IE var o = document.getElementById(floatLayerId+"TD"); var eventElement = event.srcElement || event.target; if(o.style.display != 'none'){ o.style.display = 'none'; eventElement.src = "/ags_web/css/img/bullet_arrow_down.png"; document.getElementById(floatLayerId+"DIV").style.height = "7px"; }else{ o.style.display = ''; eventElement.src = "/ags_web/css/img/bullet_arrow_up.png"; } } function EngenderDriftLyr(){} EngenderDriftLyr.prototype = { genDriftDiv:function(driftDivId,driftDivPro){ var dirftDiv = document.createElement("div"); dirftDiv.id = driftDivId; dirftDiv.className = "float-div"; dirftDiv.style.position = "absolute"; dirftDiv.style.left = driftDivPro.left||"0px"; dirftDiv.style.top = driftDivPro.top||"0px"; dirftDiv.style.width = driftDivPro.width||"200px"; dirftDiv.style.height = driftDivPro.height||"100px"; if(driftDivPro.opacity){ dirftDiv.style.opacity = driftDivPro.opacity; dirftDiv.style.filter = 'alpha(opacity=' + parseInt(parseFloat(driftDivPro.opacity)*100) + ')'; } dirftDiv.style.borderColor = driftDivPro.borderColor||"#6495ED"; dirftDiv.style.zIndex = "1000"; dirftDiv.style.display = 'none'; trColor = driftDivPro.trColor||"#6495ED"; return dirftDiv; }, genDriftContent:function(title,floatLayerId,tableAttr){ var result = ""; floatDivId = floatLayerId + "DIV"; contDivId = floatLayerId + "TD"; titleTdId = floatLayerId + "_TITLETD"; result = '<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">' + '<tr class="float-div-cnt-tr" ' + (tableAttr.color?'style="background-color:' + tableAttr.color + '"':"") + '>' +'<td id="' + titleTdId + '"height="20" width="100%" style="color:#FFFFFF;cursor:hand;padding-left:5px;"' + 'onmousedown=\"drag(document.getElementById(\'' + floatDivId + '\'),event);\">' + title + '</td>' +'<td width="15" style="color:#FFFFFF;cursor:hand" onclick="minimize(\'' + floatLayerId + '\',event)"><img src="/ags_web/css/img/bullet_arrow_up.png" style="cursor:hand" /></td>' +'<td width="15" style="color:#FFFFFF;cursor:hand" onclick="document.getElementById(\'' + floatDivId + '\').style.display=\'none\'"><img src="/ags_web/css/img/cancel.png" style="cursor:hand" /></td>' +'</tr>' +'<tr><td colspan="3" valign="top">' +' <div id="' + contDivId + '" class="float-div-cnt" style="height:' + (tableAttr.height?tableAttr.height:'') + 'px;"></div>' +' </td></tr>' +'</table>'; return result; }, genDriftLyr:function(LyrTitle,driftLyrId,driftLyrPro){ document.body.appendChild(this.genDriftDiv(driftLyrId+"DIV",driftLyrPro)); document.getElementById(driftLyrId+"DIV").innerHTML = this.genDriftContent(LyrTitle,driftLyrId,driftLyrPro); } } var engenderDriftLyr = new EngenderDriftLyr();
其中,css代码为:
.float-div{ left: 40px; width: 250px; position:absolute; opacity: 0.7; filter: alpha(opacity=70); padding:2px; border-width: 1px; border-style: solid; border-color: #AA2DCF; background-color:#FFFFFF; }
大概的代码就如上面所写的,只要思路对了,就没有问题了。
在使用上,我们发一个请求把返回的值设置为table内容的innerHTML,然后设置生成的浮动div为可见的就可以了。
以上代码要注意的地方如下:
1.以上我们先 createElement 一个 DIV 元素,然后设置它的一些如 id 、 className 、 left 、 top 、 height 、 width 、 opacity 、 borderColor 等属性。且这种写法常与 appendChild 一起使用,把生成的元素加载到另一个元素中。
2.floatdiv.style.left = floatLyrPro.left|| "0px" 与floatdiv.style.left=floatLyrPro.left?floatLyrPro.left:"0px";的写法是一样的,我们常用第二种方式的写法,这在当传入的参数为对象时,用于判断对象的属性是否存在的处理很常用。
3.注意什么时候是传 floatdiv ,什么时候是传 floatdiv.id 如:
1.以上我们先 createElement 一个 DIV 元素,然后设置它的一些如 id 、 className 、 left 、 top 、 height 、 width 、 opacity 、 borderColor 等属性。且这种写法常与 appendChild 一起使用,把生成的元素加载到另一个元素中。
2.floatdiv.style.left = floatLyrPro.left|| "0px" 与floatdiv.style.left=floatLyrPro.left?floatLyrPro.left:"0px";的写法是一样的,我们常用第二种方式的写法,这在当传入的参数为对象时,用于判断对象的属性是否存在的处理很常用。
3.注意什么时候是传 floatdiv ,什么时候是传 floatdiv.id 如:
document.getElementById(\''+floatdiv.id+'\')
这里显然不能传 floatdiv ,因为 floatdiv 是一个 obj ,如果外面再嵌一个 document.getElementById 就有问题了,这时候应该传的是 floatdiv.id ,这点容易写错。
发表评论
-
在一个定时器里频繁发ajax请求
2011-04-11 10:07 1724在一个定时器里频繁发ajax请求,最好设置一个全局变量,当请求 ... -
前台开发总结
2011-01-12 10:35 7651、如果在频繁地发送ajax请求,最好在前面的请求发送完成返回 ... -
TD中长串英文字母不能自动换行而汉字却可以自动换行
2010-12-23 10:06 1903例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaa ... -
Google Maps 图标地址收藏
2010-11-27 10:46 2764Google Maps 图标 - ... -
js乱码
2010-05-30 16:08 01)在同一个工程下没有问题,可是如果跨工程的话,且引入的js有 ... -
ajax请求提供接口的讨论
2009-12-26 15:33 1020要提供一个查询某点周边的最近设施的功能给同事,在gis端的实现 ... -
ie8与ie6取form的讨论
2009-12-16 10:49 1363多frames下,在ie6下通过frames[i]为取得某个f ... -
把一个jsp分为两个div布局记录
2009-12-15 16:41 5579一个jsp页面想分成左右两块分开显示两块内容。这种效果很不错, ... -
js取整数四舍五入
2009-11-21 22:08 3375http://blog.csdn.net/Feiin/arch ... -
读“javascript权威指南”笔记(更新中。。。)
2009-11-14 13:00 0第一章: 第二章: 第三章: 第四章: 第五章: 第 ... -
grid拖动列头改变列宽
2009-10-21 17:19 1556grid中,当某一单元格的内容很多时,要能够拖动grid标题行 ... -
js常用功能-drag功能总结
2009-09-18 13:50 1187在做web开发中,拖动一个元素是很常见的功能,特别是对于浮动层 ... -
常用功能-tip相关知识总结
2009-09-18 08:48 1188在应用开中很常用的功能是tip,比如鼠标放在某个需要说明的元素 ... -
js学习笔记4-事件和事件处理
2009-09-16 22:18 9781. 总述: 本章将讲三种完全不同的不兼容的事件处理模型 ... -
构造结果集实现类似grid显示
2009-09-16 20:24 862在做应用开发中,最经常的操作是到后台数据库去获取数据,在前台用 ... -
grid里用右键来实现功能菜单
2009-09-15 20:22 1167在自定义grid中,如果一个grid的列很多,窗口无法显示这么 ... -
js学习笔记3-构造函数、类和原型
2009-09-06 16:18 26483. 构造函数、类和原型总述:对象是我们很熟悉的,常在程序中用 ... -
gird分页时form与url参数的探讨
2009-09-05 22:35 1134大家可能很常用一个查 ... -
js学习笔记2-函数
2009-09-02 23:01 13662. 函数 2.1函数直接量函数直接量是用作表达式,而不是用作 ... -
下拉提示文本框
2009-08-24 18:46 1672文本框在当用户输入时,常常需要把相近的信息提示给用户,以方便用 ...
相关推荐
浮动的变色层.rar浮动的变色层.rar浮动的变色层.rar浮动的变色层.rar浮动的变色层.rar浮动的变色层.rar
js浮动浮动层显示,帮助层的应用,同时利于javaScript特效应用
js浮动层制作在线客服float浮动层固定在浏览器左侧
理解利用js制作图片浮动特效的原理,效果一般
附带完整的例子,对js完全不会的人也可以轻松使用,只要把例子中的js引用语句复制过去(地址当然要重新设定),然后把函数 $(function(){ $("#compore").floatdiv({left:"10px",top:"100px"}); }); 中10px和100px改成...
Wyn Enterprise-浮动菜单
浮动广告(js封装类,javascript,浮动层)
慢慢打开的浮动层.rar慢慢打开的浮动层.rar
浮动JS层浮动JS层
Day06-CSS布局-浮动
Android---浮动搜索框(SearchManager)(An-Beer工作室)借鉴.pdf
web前端开发-浮动广告
css基础-浮动
行业分类-设备装置-浮动式亲水平台.zip
商业编程-源码-浮动窗体中的OpenGL多视图的实现.zip
网络工程基础实验报告-浮动静态路由的基本配置
网页浮动QQ,自己做的,给一个客户使用的时候用到的,预览效果可以点击下边的链接看下是否满意 http://www.592yu.cn/xw/news/1057.html
行业分类-设备装置-浮动式制动闸片分解专机.zip
05-浮动与定位.md
JS弹出基于Table的可关闭浮动层.rarJS弹出基于Table的可关闭浮动层.rarJS弹出基于Table的可关闭浮动层.rar