五一刚回来, 感觉五一 太短了, 一下就过了, 不过这个五一玩的还可以, 和发小去抓黄鳝, 成绩还可以,忙了一晚上弄到5斤左右的黄鳝,太爽了, 好久没有这种感觉了,好了不说这个了, 说说window , 下面是window的初级版本,还有在上面加很多功能,呵呵先共享一些;

 

Easy.Window = Easy.extend(Easy.UI.Base, {
    height: 
"auto",
    width: 
300,
    baseCls: 
"e-window",
    isRender: 
false,
    closeAction: 
'close',
    tools: {},
    constructor: 
function (cfg) {
        Easy.apply(
this, cfg);
        Easy.Window.superclass.constructor.call(
this);
    },
    initComponent: 
function () {
        
var me = this;
        me.tools.closeBtn 
= me.create({
            tag: 
'img',
            cls: 
'e-window-close',
            style: {
                height: 
17,
                width: 
28
            },
            src: me.BLANK_IMAGE_URL
        });
        
var header = me.header = me.create({
            tag: 
'td',
            cls: 
'e-window-tc e-window-move',
            children: [{
                tag: 
'em',
                cls: 
'e-tool',
                children: [me.tools.closeBtn]
            }, {
                tag: 
'div',
                cls: 
'e-window-title' + (me.iconCls ? " e-icon "+me.iconCls : ""),
                html: me.title 
|| " "
            }]
        });
        me.wrap 
= me.create({
            tag: 
'div',
            cls: me.baseCls,
            style: {
                
"z-index"10000,
                width: me.width,
                height:me.height
            },
            children: {
                tag: 
'table',
                cls: me.baseCls 
+ "-wrap",
                style:
"width:100%;height:100%;",
                children: [{
                    tag: 
'tr',
                    children: [{
                        tag: 
'td',
                        cls: 
'e-window-tl'
                    }, header, {
                        tag: 
'td',
                        cls: 
'e-window-tr'
                    }]
                }, {
                    tag: 
'tr',
                    children: [{
                        tag: 
'td',
                        cls: 
'e-window-cl'
                    }, {
                        tag: 
'td',
                        cls: 
'e-window-cc',
                        valign:
'top',
                        html: me.html 
|| ' '
                    }, {
                        tag: 
'td',
                        cls: 
'e-window-cr'
                    }]
                }, {
                    tag: 
'tr',
                    children: [{
                        tag: 
'td',
                        cls: 
'e-window-bl'
                    }, {
                        tag: 
'td',
                        cls: 
'e-window-bc',
                        html: 
' '
                    }, {
                        tag: 
'td',
                        cls: 
'e-window-br'
                    }]
                }]
            }
        });
    },
    initEvent: 
function () {
        
var me = this;
        Easy.DOM.on(me.tools.closeBtn, 
"mouseover", Easy.delegate(me.toogleClass, me.tools.closeBtn, ["e-window-close-over"]));
        Easy.DOM.on(me.tools.closeBtn, 
"mouseout", Easy.delegate(me.toogleClass, me.tools.closeBtn, ["e-window-close-over"]));
        Easy.DOM.on(me.wrap, 
"mousemove", Easy.delegate(me.dragMove, me));
        Easy.DOM.on(me.tools.closeBtn, 
"click", Easy.delegate(me.closeClick, me))

        Easy.DOM.on(me.header, 
"mousedown", Easy.delegate(me.dragStart, me));

    },
    render: 
function (el) {
        
if (!this.isRender) {
            Easy.DOM.render(
this.wrap, Easy.getBody());
            
this.isRender = true;
        }
    },

    hide: 
function () {
        Easy.DOM.setStyle(
this.wrap, { display: 'none' });
    },
    close: 
function () {
        Easy.removeNode(
this.wrap);
        
this.isRender = false;
    },
    show: 
function () {
        
var me = this;
        
if (me.isRender) {
            Easy.DOM.setStyle(me.wrap, { display: 
'block' });
        } 
else {
            me.render.call(me);
        }
    },
    closeClick: 
function () {
        
this[this.closeAction]();
    },

    dragStart: 
function (p, e) {
        
var me = this, b = Easy.getBody();
        me.draging 
= true;
        b.onselect 
= function () { return false; };        
        me.dd 
= {
            x: e.clientX 
- me.wrap.offsetLeft + b.scrollLeft,
            y: e.clientY 
- me.wrap.offsetTop + b.scrollTop
        }
    },
    dropStart: 
function () {
        
var me = this;
        Easy.getBody().onselect 
= null;
        me.draging 
= false;
    },
    dragMove: 
function (p, e) {
        
var me = this, b = Easy.getBody();
        
if (me.draging) {
            
var b = Easy.getBody(),

            x 
= e.clientX - me.dd.x + b.scrollLeft,
            y 
= e.clientY - me.dd.y + b.scrollTop;

            Easy.DOM.setXY(me.wrap, [x, y]);

        }

    }

}); 

 

演示如图:

 

作者: EasyJS Framework 发表于 2011-05-03 20:45 原文链接

推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架