javascript动态创建可拖动、最大化、最小化的层
来源:互联网 发布:MAC pro先启动外置显卡 编辑:程序博客网 时间:2024/06/07 18:54
javascript动态创建可拖动、最大化、最小化的层
2010-02-06 13:19
用Javascript实现div层的拖动是很常见的一种操作,比如弹出提示对话框,快捷登录等等。之前用隐藏层的方式实现了div层的弹出操作,仅仅用到了js修改style的display属性。现在,需要弹出许多可以拖动的窗口,这些窗口之前并不存在于dom,而是根据用户点击动态创建的,于是需要写一个js的类,用于实现div层的动态弹出,而且具有最大化、最小化、关闭等操作。效果如下图:
(一个打开的窗口)
(最小化窗口)
(打开两个窗口)
js类的实现方式如下:
var Dialog = function() { var options = arguments[0] || {}; this.title = options.title || "新窗口"; this.width = options.width || 400; this.height = options.height || 300; this.html = options.html || ""; this.left = options.left || document.documentElement.scrollLeft + document.documentElement.clientWidth / 2 - this.width / 2; this.top = options.top || document.documentElement.scrollTop + document.documentElement.clientHeight / 2 - this.height / 2; this.container = document.createElement("div"); this.head = document.createElement("div"); this.content = document.createElement("div"); this.dialogclose = document.createElement("span"); this.dialogmin = document.createElement("span"); this.dialogmax = document.createElement("span"); this.init();};Dialog.prototype = { init: function() { var me = this, container = me.container, head = me.head, content = me.content, dminw = me.dialogmin, dclose = me.dialogclose, dmaxw = me.dialogmax, left = me.left, top = me.top; title = me.title, width = me.width, height = me.height, html = me.html; container.appendChild(head); container.appendChild(content); container.style.fontFamily = "微软雅黑"; container.style.width = width + "px"; container.style.height = "auto"; container.style.border = "solid 10px #CCC"; container.style.zIndex = "100"; container.style.background = "#FFF"; container.style.position = "absolute"; container.style.left = left + "px"; container.style.top = top + "px"; document.body.appendChild(container); head.style.background = "#F4F4F4"; head.style.padding = content.style.padding = "5px"; head.style.borderBottom = "dotted 1px #666"; head.style.cursor = "move"; head.style.width = me.width - 10 + "px"; dminw.onclick = function() { me.miniw(me); }; dminw.innerHTML = "最小化"; dmaxw.onclick = function() { me.maxw(me); }; dmaxw.innerHTML = "最大化"; dmaxw.style.display = "none"; dclose.onclick = function() { me.hide(me); }; dclose.innerHTML = "关闭"; head.innerHTML = title; head.appendChild(dclose); head.appendChild(dmaxw); head.appendChild(dminw); content.style.height = height + "px"; content.style.overflow = "scroll"; content.style.overflowX = "hidden"; content.style. content.innerHTML = html; head.onmousedown = function(e) { e = e || window.event; container.posX = e.clientX - container.offsetLeft; container.posY = e.clientY - container.offsetTop; document.onmousemove = function(e) { me.drag(e, me); }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }; }, drag: function(e, me) { e = e || window.event; var o = me.container; o.style.left = (((e.clientX - o.posX) >= 0) ? e.clientX - o.posX : 0) + "px"; o.style.top = (((e.clientY - o.posY) >= 0) ? e.clientY - o.posY : 0) + "px"; }, show: function(me) { var o = me.container; o.style.display = "block"; }, hide: function(me) { var o = me.container; o.style.display = "none"; }, miniw: function(me) { var o = me.container; me.content.style.display = "none"; me.dialogmax.style.display = "inline"; me.dialogmin.style.display = "none"; o.style.height = me.head.style.height; me.head.style.borderBottom = ""; }, maxw: function(me) { var o = me.container; me.content.style.display = "block"; me.dialogmin.style.display = "inline"; me.dialogmax.style.display = "none"; o.style.height = "auto"; me.head.style.borderBottom = "dotted 1px #666"; }};
调用方法很简单,如下:
var CatalogDialog = new Dialog({ width: 300, height: 300, title: "这里是标题" });CatalogDialog.content.innerHTML = "×××";//这里设置窗口内容
CatalogDialog.hide();//关闭
CatalogDialog.show();//显示
CatalogDialog.miniw();//最小化
CatalogDialog.maxw();//最大化
- javascript动态创建可拖动、最大化、最小化的层
- 可拖动、关闭及最小化的层拖动窗口
- JavaScript弹出Div层(嵌入文字)- 可拖动+最小化
- Flex带最大化最小化按钮可拖动调整窗口大小的TitleWindow
- 漂亮的Js拖动层,窗口拖拽(改变大小/最小化/最大化/还原/关闭)
- 可拖动的层
- 可拖动的层
- Flex 窗口最小化,最大化,拖动
- Flex 窗口最小化,最大化,拖动
- JavaScript 窗体的最大化/最小化/关闭
- javascript 最大化最小化窗口
- javascript 最大化最小化窗口
- 可拖动,可拖拉大小的层
- QT实现无边框窗体的最小化,最大化/还原,关闭,拖动和双击最大化等功能
- Js无刷新添加新层,拖动DIV层可互换位置的JavaScript实现
- QT自绘最小化最大化拖动
- html+javascript实现可拖动弹出层、对话框、可提交
- javascript可拖动的日历
- 有关Java中关键字final的理解
- Meego:为什么是QT (KDE与GNOME的圣战)
- 人情冷暖
- SQL SERVER中测试SQL语句的速度
- Form表单实现ASP.NET认证
- javascript动态创建可拖动、最大化、最小化的层
- Windows 中 SQLite3 使用(1) -- 配置
- Windows 中SQLite3 使用(2) -- 基本导出函数
- Visual Studio 2010 之调用继承树Call Hierarchy
- 手机软件开发平台逐个来数
- 隐藏磁盘的好办法,适合有收藏的朋友
- 在Windows下获取控制台(DOS)下可执行文件的标准输入输出
- jQuery学习前言
- linux字符界面与图形界面的转换——学习中