extjs4 desktop 实现仿win7效果的桌面窗口预览效果

先上图：

这个预览效果是不是很炫，代码如下：

在原extjs desktop自带的demo的基础上，拓展TaskBar.js代码：

Ext.namespace("LinBsoft._PreviewBox");
LinBsoft._PreviewBox = Ext.extend(Ext.Component,
				{
				    inited: false,
				    defaultZIndex: 21000,
				    defaultLeft: 0,
				    defaultBottom: 40,
				    hideBottom: 30,
				    boxWidth: 250,
				    cloneWinMaxWidth: 220,
				    cloneWinMaxHeight: 116,
				    hideDelay: 500,
				    showDelay: 500,
				    constructor: function () {
				        LinBsoft._PreviewBox.superclass.constructor.call(this, { renderTo: document.body, cls: "lbs-previewbox", hidden: true });
				        this.inited = false;
				        this.hoverCount = 0
				    },


				    createBoxElements: function () {
				        var a = this.getEl(), b;
				        this.boxMl = a.createChild({ tag: "div", cls: "lbs-previewbox-ml" });
				        this.boxMr = this.boxMl.createChild({ tag: "div", cls: "lbs-previewbox-mr" });
				        this.boxMc = this.boxMr.createChild({ tag: "div", cls: "lbs-previewbox-mc" });
				        this.arrow = a.createChild({ tag: "div", cls: "lbs-previewbox-arrow" });
				        b = this.boxMc;
				        this.desc = b.createChild({ tag: "div", cls: "lbs-previewbox-desc" });
				        b.createChild({ tag: "hr" });
				        this.win = b.createChild({ tag: "div", cls: "lbs-previewbox-win" });
				        this.inited = true;
				        this.mon(mydsk.desktop.taskbar.getEl(), "click", this.onTaskbarClick, this);
				        this.mon(mydsk.desktop.taskbar.getEl(), "contextmenu", this.onTaskbarClick, this)
				    },
				    onTaskbarClick: function () { this.hideBox(true) },
				    showBox: function (a) {
				        this.needShowBox = true;
				        this.hoverCount += 1;
				        Ext.defer(function () { this.doShowBox(a, this.hoverCount) }, 300, this);
				    },

				    doShowBox: function (f, e) {
				        var d, h, b, a, c, g;
				        if (!f || !f.win || !f.centerX) { alert("required parameters not exist"); return }
				        if (this.hoverCount !== e) { return }
				        if (!this.needShowBox) { return }
				        if (!this.inited) { this.createBoxElements() }
				        c = Ext.isNumber(f.centerX) ? f.centerX : this.defaultLeft;
				        d = f.win;
				        h = d.getEl();
				        g = d.title || "";
				        this.desc.update(g || "");
				        if (this.clonedEl) { this.clonedEl.remove() }
				        this.clonedEl = this.getClonedEl(d);
				        this.clonedEl.show();
				        this.win.appendChild(this.clonedEl);
				        b = this.getEl();
				        if (this.isVisible()) {
				            b.setBottom(this.defaultBottom);
				            this.show();
				            b.shift({ left: c - (this.boxWidth / 2), opacity: 1, easing: 'easeIn', duration: 500 })
				        } else {
				            b.setLeft(c - (this.boxWidth / 2));
				            b.setBottom(this.hideBottom);
				            b.setOpacity(0.2);
				            this.show();
				            b.shift({ bottom: this.defaultBottom, opacity: 1, easing: 'easeIn', duration: 500 })
				        }
				        this.hoverCount = 0
				    },

				    hideBox: function (a) {
				        this.needShowBox = false;
				        Ext.defer((function () { if (this.needShowBox) { return } this.doHideBox(a) }), (a === true) ? 0 : 300, this)
				    },

				    doHideBox: function (b) {
				        var c;
				        var a = function () {
				            if (this.needShowBox) { return }
				            this.hide();
				        };
				        if (this.clonedEl) { this.clonedEl.remove() }
				        this.hoverCount = 0;
				        if (b === true) { a.call(this); return }
				        c = this.getEl();
				        c.shift({ bottom: this.hideBottom, opacity: 0, duration: 500, easing: 'easeIn', scope: this, callback: a })
				    },


				    getClonedEl: function (e) {
				        var c = 0;
				        var h = 0;
				        var g = e.getEl();
				        var b = g.dom.cloneNode(true);
				        b.className = b.className.replace('x-hide-offsets', '');
				        b.removeAttribute("id");
				        var f = Ext.get(b);
				        f._previewMask = f.createChild({ tag: "div", cls: "lbs-previewbox-win-mask" });
				        var a = g.getSize();
				        var d = this.cloneWinMaxWidth / a.width;
				        c = (this.cloneWinMaxHeight - a.height * d) / 2;
				        if ((a.height * d) > this.cloneWinMaxHeight) { d = this.cloneWinMaxHeight / a.height; c = 0; h = (this.cloneWinMaxWidth - a.width * d) / 2 }
				        d = Math.min(d, 1);
				        f.setStyle("transform-origin", "0% 0%");
				        f.setStyle("-webkit-transform-origin", "0% 0%");
				        f.setStyle("-moz-transform-origin", "0% 0%");
				        f.setStyle("-o-transform-origin", "0% 0%");
				        f.setStyle("msTransform-origin", "0% 0%");
				        f.setStyle("-webkit-transform", String.format("scale({0})", d));
				        f.setStyle("-moz-transform", String.format("scale({0})", d));
				        f.setStyle("-o-transform", String.format("scale({0})", d));
				        f.setStyle("transform", String.format("scale({0})", d));
				        f.setStyle("msTransform", String.format("scale({0},{1})", d, d));
				        f.setLeftTop(h, c);
				        return f
				    }
				});

然后，在Ext.define('Ext.ux.desktop.TaskBar', { 的 initComponent: function () { 里new一个对象

  LinBsoft.PreviewBox = new LinBsoft._PreviewBox();

在鼠标经过进入和移出任务栏快捷图标时显示和隐藏预览小窗：

    onMouseOverHandler: function (d) {        var posx = 173 + d.x + (d.width / 2);        var mx = window.event.x;        if (Ext.isIE) { posx = mx + 173 }        else if (Math.abs(posx - mx) > 73) { posx = mx }        var b = { win: d.win, centerX: posx };        LinBsoft.PreviewBox.showBox(b)    },    onMouseOutHandler: function (a) {        LinBsoft.PreviewBox.hideBox()    },

其中 b变量计算显示小窗的位置，因如ie和谷歌浏览器等的位置计算有差别，作了适应计算。

因为win7 是操作系统，可以直接操作复制屏幕显示内存，而js在浏览器中运行，不可能做这个操作，因此，这只是通过复制dom和css的缩小效果实现。

更多相关文章

随机推荐