- 浏览: 41349 次
- 性别:
- 来自: 南京
最新评论
// 动态创建可移动div var vIndex =9999; ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// var move_obj_x0=0,move_obj_y0=0,move_obj_x1=0,move_obj_y1=0; //(x0,y0)为开始拖动时鼠标的位置(x1,y1)为开始拖动时对象的位置 var obj_moveable=false; //定义DIV是否可移动的标志 var returnValue =null; // 开始拖动; function startMove(obj) { if(event.button==1) { obj.setCapture(); move_obj_x0 = event.clientX; move_obj_y0 = event.clientY; move_obj_x1 = parseInt(obj.style.left); move_obj_y1 = parseInt(obj.style.top); obj_moveable = true; } } // 拖动; function Moving(obj) { if(obj_moveable) { obj.style.left = (move_obj_x1 + event.clientX - move_obj_x0>0)?move_obj_x1 + event.clientX - move_obj_x0:0; obj.style.top = (move_obj_y1 + event.clientY - move_obj_y0>0)?move_obj_y1 + event.clientY - move_obj_y0:0; } } // 停止拖动; function stopMove(obj) { if(obj_moveable) { obj.releaseCapture(); obj_moveable = false; move_obj_x1 = parseInt(obj.style.left); move_obj_y1 = parseInt(obj.style.top); } } // 动态创建div // title 标题 // ico 显示的图标,可为null // url div里嵌入的iframe地址 // w宽度 // h高度 // havMask 是否有屏蔽膜(0:无) function CreateDivFrm(title,ico,url,w,h,havMask) { if(havMask !=0) { PopMaskLayer(); } vIndex =vIndex +2; var htmlStr,divCount; var divObj=document.createElement("div"); var countObj=document.getElementById("countObj") ; var formObj=document.forms[0]; if(ico==null) { ico="../images/ico/folderopen.gif"; } if( formObj == null) { alert("◎参数错误!(没有指定的表单form)"); return; } if( countObj == null) { var countObj=document.createElement("input"); countObj.type="hidden"; countObj.id="countObj"; countObj.value=1; formObj.appendChild(countObj); divCount = 1 } else { divCount=parseInt(countObj.value) + 1 ; countObj.value=divCount; } w =typeof w!="undefined" ?w:( w !=null ? w : 406); //容器中内容部分的实际高度 h =h< 50 ?50 : (h +50); //其中50表示页面中的操作区域 h =typeof h!="undefined" ?h:( h !=null ? h : 150); w1 =w+2; //主容器(外围DIV)的宽度 w2=w1 - 10; //容器顶部DIV自适应宽度 h=h + 15; var urlStr = new String(); urlStr =url; if(urlStr.indexOf("?")>=0) { urlStr = urlStr + "&divFrmID=divfrm" + divCount ; } else { urlStr = urlStr + "?divFrmID=divfrm" + divCount ; } htmlStr = "<div id='divfrm" + divCount + "' style='POSITION: absolute;width:" + w1 + "px;z-index:" + vIndex + ";' onmousedown=startMove(this) onmouseup =stopMove(this) onmousemove=Moving(this) >"; // htmlStr = htmlStr + "<div style='width:100%;'>"; // htmlStr = htmlStr + " <div class='fLeft dialogLeft'></div>"; // htmlStr = htmlStr + " <div id='dMiddle" + divCount + "' class='fLeft dialogMiddle' style='width:" + w2 + "px'>"; // htmlStr = htmlStr + " <div class='fLeft tPaddingLeft'>"; // htmlStr = htmlStr + " <img src='" + ico + "' style='vertical-align:middle;' alt='双击这关闭此窗口' ondblclick=delDivFrm('divfrm" + divCount + "') /> <font color='white'>" + title + "</font>"; // htmlStr = htmlStr + " </div>"; // htmlStr = htmlStr + " <div class='fRig tPaddingRight'>" // htmlStr = htmlStr + " <img src='../images/ico/close1.gif' alt='' id='imgbbsdiv' onclick=delDivFrm('divfrm" + divCount + "') />" // htmlStr = htmlStr + " </div>" // htmlStr = htmlStr + " </div>"; // htmlStr = htmlStr + " <div class='fLeft dialogRight'></div>"; // htmlStr = htmlStr + "</div>"; // htmlStr = htmlStr + "<div style='width:100%;'>"; // htmlStr = htmlStr + " <div id='dMain" + divCount + "' class='dialogMain' style='width:" + w + "px;height:1px;'>"; // htmlStr = htmlStr + " <iframe id='frm" + divCount + "' name='frm" + divCount + "' src='" + urlStr + "' scrolling='no' frameborder='0' style='width:100%;height:" + h + ";' onload='AutoOnloadIframe(" + divCount + ");'></iframe>"; // htmlStr = htmlStr + " </div>"; // htmlStr = htmlStr + "</div>"; htmlStr = htmlStr + "<table cellpadding='0' cellspacing='0' width='" + w1 + "' >"; htmlStr = htmlStr + " <tr>"; htmlStr = htmlStr + " <td width='5' id='dMiddle" + divCount + "'><img style='display:block;' src='top_left.gif'/></td>"; htmlStr = htmlStr + " <td style='background-image:url(../images/dialognew/top.gif);'>"; htmlStr = htmlStr + " <table width='" + w2 + "' cellpadding='0' cellspacing='0'>"; htmlStr = htmlStr + " <tr>"; htmlStr = htmlStr + " <td valign='middle' style='color:White;font-size:14px;font-weight:bold;'> <img src='folder.gif' style='vertical-align:middle;' alt='双击这关闭此窗口' ondblclick=delDivFrm('divfrm" + divCount + "') /> " + title + "</td>"; htmlStr = htmlStr + " <td align='right'><img src='close.gif' onclick=delDivFrm('divfrm" + divCount + "') /> </td>"; htmlStr = htmlStr + " </tr>"; htmlStr = htmlStr + " </table>"; htmlStr = htmlStr + " </td>"; htmlStr = htmlStr + " <td width='5'><img style='display:block;' src='top_right.gif'/></td>"; htmlStr = htmlStr + " </tr>"; htmlStr = htmlStr + " </table>"; htmlStr = htmlStr + " <table cellpadding='0' cellspacing='0' width='" + w1 + "'>"; htmlStr = htmlStr + " <tr>"; htmlStr = htmlStr + " <td style='background-image:url(../images/dialognew/left.gif);' width='5'></td>"; htmlStr = htmlStr + " <td style='background-color:white;' width='" + w2 + "' >"; htmlStr = htmlStr + " <table cellpadding='0' cellspacing='0' width='" + w2 + "'>"; htmlStr = htmlStr + " <tr>"; htmlStr = htmlStr + " <td style='padding:0px;overflow:auto; ' id='dMain" + divCount + "'>"; htmlStr = htmlStr + " <iframe id='frm" + divCount + "' name='frm" + divCount + "' scrolling='yes' src='" + urlStr + "' width='" + w2 + "' frameborder='0' style='width:100%;height:" + h + ";' onload='AutoOnloadIframe(" + divCount + ");'></iframe>"; htmlStr = htmlStr + " </td>"; htmlStr = htmlStr + " </tr>"; htmlStr = htmlStr + " <tr>"; htmlStr = htmlStr + " <td style='background-image:url(../images/dialognew/bottom_content.gif);height:4px;padding-left:0px;' align='right'></td>"; htmlStr = htmlStr + " </tr>"; htmlStr = htmlStr + " </table>"; htmlStr = htmlStr + " </td>"; htmlStr = htmlStr + " <td style='background-image:url(../images/dialognew/right.gif);' width='5'></td>"; htmlStr = htmlStr + " </tr>"; htmlStr = htmlStr + " </table>"; htmlStr = htmlStr + " <table cellpadding='0' cellspacing='0' width='" + w1 + "'>"; htmlStr = htmlStr + " <tr>"; htmlStr = htmlStr + " <td width='5'><img style='display:block;' src='bottom_left.gif'/></td>"; htmlStr = htmlStr + " <td style='background-image:url(../images/dialognew/bottom.gif);background-color:#F0F0F0;'><img style='display:block;' src='spacer.gif' height='4' width='" + w2 + "' /></td>"; htmlStr = htmlStr + " <td width='5'><img style='display:block;' src='bottom_right.gif'/></td>"; htmlStr = htmlStr + " </tr>"; htmlStr = htmlStr + " </table>"; htmlStr = htmlStr + "</div>"; divObj.innerHTML = htmlStr ; formObj.appendChild (divObj); InitDivPosition(h,w,divCount); } // 自动加载DIV的位置(居屏幕的最中间) function InitDivPosition(objHeight, objWidth, divCount) { var n =divCount -1; //用于层叠式显示多个DIV ,以28个像素为距 var clientHeight =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? document.documentElement.clientHeight : document.body.clientHeight; var clientWidth =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? document.documentElement.clientWidth : document.body.clientWidth; var paraTop =(clientHeight)/2-objHeight>=0 ? (clientHeight)/2 - objHeight + n * 28 : n * 28; var paraLeft =(clientWidth)/2 - objWidth/2 + n * 28; var divID ="divfrm" + divCount; var objDiv =document.getElementById(divID); // 获得页面被滚动条卷去的高度(若文档有了标准DTD声明,则高度需通过documentElement属性获取) var scrollPos; if (typeof window.pageYOnuffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { scrollPos = document.body.scrollTop; } objDiv.style.top =scrollPos + paraTop; objDiv.style.left =paraLeft; } // 自适应Iframe的高度 [注:如果用户自定义了高度,则以自定义的高度为准!宽度暂时不控制 ] function AutoOnloadIframe(divCount) { eval("var frmObj =frm" + divCount); var RealHeight =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? frmObj.document.documentElement.scrollHeight : frmObj.document.all.dialogBody.scrollHeight; var RealWidth =typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat' ? frmObj.document.documentElement.scrollWidth : frmObj.document.all.dialogBody.scrollWidth; // eval("document.all.frm" + divCount + ".style.height=RealHeight"); // eval("document.all.frm" + divCount + ".style.width=RealWidth"); eval("document.all.divfrm" + divCount + ".style.width =RealWidth + 2;"); // eval("document.all.dMiddle" + divCount + ".style.width =RealWidth -6;"); // eval("document.all.dMain" + divCount + ".style.width =RealWidth"); } // 删除该DIV标签 function delDivFrm(id) { var targetObj=document.getElementById(id); if (targetObj ==null) alert("对象为空"); else { targetObj.outerHTML=""; document.body.removeChild(document.getElementById("MaskLayer")); } }
发表评论
-
查询框架
2010-12-23 12:26 1904先定义一个枚举,配置条件查询是什么类型的,like = 还是b ... -
Hibernate 复合主键的映射问题
2010-09-07 09:01 1915--角色权限关系表 create table role_po ... -
jquery可增加删除列表格
2010-06-04 15:35 1501<!DOCTYPE HTML PUBLIC " ... -
jquery实现的可增加,删除行,可多行上下移动表格
2010-06-04 15:30 7374var rowId=1; //添加行 function a ... -
jdom 修改xml文件 保存
2010-02-01 10:12 21561 /* 2 * To change this te ... -
java 读取数据库 blob文件
2010-02-01 10:11 30261 /* 2 * To change this te ... -
数据库存取对象
2010-02-01 10:09 8821 /* 2 * To change this ... -
IO 文件夹的常用处理
2010-02-01 10:06 8501 public static void check ... -
清楚两个集合里面相同的元素
2010-02-01 10:04 14251 /* 2 * To change th ...
相关推荐
"通用弹出层"在IT领域中通常指的是一个设计用于应用程序或网站的组件,它可以作为显示额外信息、提示用户操作或者展示复杂内容的一种交互模式。通用弹出层的设计旨在提供一种非侵入性的用户体验,同时保持界面的清晰...
在实现弹出窗口中,通常会有一个主要的`div`作为弹出窗口的主体,另一个`div`作为背景变暗层。 在线op.css文件中,将包含定义这些`div`样式的CSS代码。比如,我们可以设置弹出窗口的`div`为绝对定位,使其能够悬浮...
"layer演示5种通用的手机弹出层"这个主题,显然关注的是如何利用layer库来实现各种类型的手机弹出层。Layer是一款广泛应用于前端开发的JavaScript库,尤其在网页端,它提供了丰富的弹出层解决方案,能够帮助开发者...
为了实现遮蔽层,我们通常会创建一个全屏的 `div`,并设置较低的不透明度(如 `opacity: 0.5`)和背景色(如 `background-color: rgba(0, 0, 0, 0.5)`),以达到半透明效果,从而让背景页面模糊可见。 在压缩包中的...
例如,可以定义一个通用的弹出层样式类`.popup`,包含基本的布局和动画效果,然后为每个具体的弹出层添加额外的类,如`.popup1`、`.popup2`,用于定制它们的外观和行为。 JavaScript在这个过程中起着关键作用,负责...
4. **ASP.NET AJAX Control Toolkit的PopupControlExtender**:对于服务器端控件的爱好者,ASP.NET AJAX Control Toolkit提供了一个PopupControlExtender,它可以将任何ASP.NET控件作为弹出框显示。这个组件利用AJAX...
普通的asp.net 2.0应用程序中,如果需要弹出一个对话框,可以使用 Response.Write("<script>alert('弹出一个对话框');...在ajax页面中,不能使用上述方法,但是在AJAX中的ScriptManager却提供了弹出对话框的功能
在网页设计和开发中,"泽元div 弹出层,弹出框"是一个常见的功能需求,用于显示一些额外的信息或者交互元素,如警告、确认对话框、表单填写等。这种技术通常涉及到HTML、CSS以及JavaScript的使用,尤其是jQuery或者...
在网页设计中,"页面中弹出对话框div"是一个常见的需求,用于向用户展示临时信息、确认操作或收集输入。对话框通常不离开主页面,而是覆盖在内容上,提供一种交互方式。本篇文章将深入探讨如何使用HTML的div元素来...
在网页设计中,"DIV弹出窗(兼容主流浏览器)"是一种常见的用户界面元素,用于在用户与页面交互时提供额外的信息或者功能。这个技术基于HTML的`<div>`元素,通过CSS样式和JavaScript实现动态效果,以确保在各种主流...
在网页设计和开发中,"通用弹出可移动的DIV块"是一种常见的交互元素,它允许用户通过JavaScript或jQuery等库动态创建、显示和移动一个包含内容的div元素。这种功能广泛应用于模态对话框、提示窗口或者自定义菜单等...
同时,设计上应有明显的关闭按钮,让用户可以随时关闭弹出层。 4. 动态加载:为了减少页面加载时间,协议内容可以在用户触发注册时动态加载,而不是预先加载在页面中。这需要用到前端开发技术,如JavaScript,实现...
"完整版弹出网页广告.rar"很可能包含了一系列关于如何创建、设计和实施弹出式广告的技术细节和实例。 弹出式广告是网页广告的一种形式,它在用户浏览网页时以独立窗口的形式突然出现,可以覆盖整个屏幕或者只占据一...
本资源“div弹出层打包,包括弹出图片浏览”提供了一个用于创建弹出图片浏览的解决方案,其特点在于提供了多种样式选择,以满足不同设计需求,同时具有精美的视觉效果和易于使用的特性,类似于QQ相册的浏览体验。...
本资源“漂亮的div弹出窗口样式”提供了一种美观的弹出窗口设计,适用于网页中的各种提示、警告或者信息展示。通过解压文件并双击html页面,我们可以直接预览这个弹出窗口的效果。 首先,我们来详细了解一下div弹出...
通过调用`window.createPopup()`方法,可以生成一个弹出窗口,但需注意的是,`createPopup`并非标准的JavaScript方法,这通常意味着这段代码可能是在特定的浏览器环境(如IE)下编写的,或者是在某种框架或库的上...
在网页设计和开发中,"层"(Layer)和"弹出层"(Popup Layer)是常见的布局技术,尤其在创建交互式用户界面时尤为重要。层是一种定位元素的方法,允许开发者将HTML元素(如图片、文本或表单)在页面上进行精确控制,...
标题 "原生jQuery实现弹出层页面分享插件特效源码.zip" 提供的信息表明,这个压缩包包含了一个使用原生jQuery编写的弹出层页面分享插件的源代码。弹出层通常指的是在用户交互时(如点击按钮)会在当前页面上弹出一个...
在实际开发中,为了提高代码复用性和可维护性,我们通常会封装这些功能成一个通用的Ajax弹出层组件,允许传入不同的参数,如请求URL、数据、回调函数等。 文件“Messaging”可能与这个话题有关,因为弹出层在消息...
本资源“jQuery插件集之(弹出div4)+Demo”提供了一个实用的解决方案,即用div而非模态窗口实现弹出功能。这个插件设计巧妙,能够为用户提供一种灵活的方式来展示信息,而无需依赖于传统的模态框。 首先,让我们深入...