javascript动态创建可拖动、最大化、最小化的层

by shinichi_wtn 2010-02-06 13:19

用Javascript实现p层的拖动是很常见的一种操作,比如弹出提示对话框,快捷登录等等。之前用隐藏层的方式实现了p层的弹出操作,仅仅用到了js修改style的display属性。现在,需要弹出许多可以拖动的窗口,这些窗口之前并不存在于dom,而是根据用户点击动态创建的,于是需要写一个js的类,用于实现p层的动态弹出,而且具有最大化、最小化、关闭等操作。效果如下图:


(一个打开的窗口)


(最小化窗口)


(打开两个窗口)

js类的实现方式如下

// JScript source code
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("p");
    this.head = document.createElement("p");
    this.content = document.createElement("p");
    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();//最大化

Comments (3) -

38580698 People's Republic of China
2/10/2010 10:50:39 PM #

这个太好了,就是在谷歌浏览器里测试不通过,哪个属性或者方法不支持可能

Reply

shinichi_wtn People's Republic of China
2/11/2010 10:47:34 AM #

我在Chrome里面测试可以运行的,我截了张图:hiphotos.baidu.com/.../...afeff9bee925fcfa3c6a.jpg

Reply

snjdju People's Republic of China
8/24/2010 8:51:55 AM #

学习了!

Reply

(仅用于Gavatar)

  Country flag

biuquote
  • Comment
  • Preview
Loading

About

shinichi_wtnI'm Shinichi_wtn

Software Engineering Manager at Microsoft

[More...]

Recent Tweets

Twitter November 29, 00:30
周末再刷环球影城,这次把之前没有玩过的项目都体验了一遍,试了一下园区的照相服务,拍得一般般,还成功打卡了三把扫帚餐厅,餐厅有一个绝佳的城堡观景台 https://t.co/6UXPrv6gCx

Twitter November 20, 21:35
大闸蟹 https://t.co/aofvI1miI1

Twitter September 19, 20:56
开园就限流😳 https://t.co/P5jRS6gENg

Twitter September 6, 23:51
环球城市大道 https://t.co/ZIcpGmigvp

Twitter September 6, 23:14
北京环球影城探路,试运行时期依旧不少人,下午抵达时停车楼已经没空闲车位了,只能停在地面停车场。目前乐园外的城市大道已经免费开放,在环球商店里面买了一些纪念品,价格和日本环球影城差不多,整体商品数量还挺少的。乐园还有2周就正式开放了… https://t.co/820oxZeKQo

Twitter August 26, 21:38
傍晚的彩虹🌈 https://t.co/lkS7lSksSq

Twitter August 22, 21:01
密云天门山爬山,周六天气不错 https://t.co/Sc8t6XXLBG

Twitter August 1, 14:37
北京周末终于晴天了😃,前段时间雨太多了 https://t.co/jjrtR2izgA


Follow me on twitter >>

Month List