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动态创建可拖动、最大化、最小化的层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。