dialog.js

axjx工具代码给大家交流

Class("linb.UI.Dialog","linb.UI.Widget",{
    Instance:{
        show:function(parent, modal, left, top){
            parent = parent || linb('body');
            return this.each(function(profile){
                var t,
                    pro=profile.properties,
                    instance = profile.boxing(),
                    fun = function(){
                        parent.append(profile.boxing());

                        var box=profile.box,
                            root=profile.root,
                            //in ie, .children can't get the same thread added node(modal div,  here)
                            t1=root.topZindex(),
                            t2=root.css('zIndex');

                        root.css('zIndex',t1>t2?t1:t2).show(left?(parseInt(left)||0)+'px':null, top?(parseInt(top)||0)+'px':null);

                        if(modal && !profile.$inModal)
                            box._modal(profile);

                        box._active(profile);

                        if(profile.onShow)profile.boxing().onShow(profile);
                        box._refreshRegion(profile);
                    };

                if(t=pro.fromRegion)
                    linb.Dom.animate({border:'dashed 1px #ff0000'},{left:[t.left,pro.left],top:[t.top,pro.top],width:[t.width,pro.width],height:[t.height,pro.height]}, null,fun,360,12,'inexp').start();
                else
                    fun();
            });
        },
        hide:function(){
            this.each(function(profile){
                var pro=profile.properties,
                    box=profile.box;

                if(profile.$inModal)
                    box._unModal(profile);
                //max has dock prop
                if(pro.status=='max' || pro.status=='min')
                    box._restore(profile);

                profile.root.hide();

                var t=pro.fromRegion;
                if(t)
                    linb.Dom.animate({border:'dashed 1px #ff0000'},{left:[pro.left,t.left],top:[pro.top,t.top],width:[pro.width,t.width],height:[pro.height,t.height]},  null, null,360,12,'outexp').start();
            });
            return this;
        },
        close:function(){
            return this.each(function(profile){
                if(profile.beforeClose && false === profile.boxing().beforeClose(profile))
                    return;
                var pro=profile.properties, t=pro.fromRegion, fun=function(){
                    profile.boxing().destroy();
                };

                if(t)
                    linb.Dom.animate({border:'dashed 1px #ff0000'},{left:[pro.left,t.left],top:[pro.top,t.top],width:[pro.width,t.width],height:[pro.height,t.height]}, null,fun,360,12,'outexp').start();
                else
                    fun();
            });
        }
    },
    Initialize:function(){
        var t = this.getTemplate();
        _.merge(t.FRAME.BORDER,{
            BAR:{
                tagName:'div',
                className:'uibar-bar',
                style:'{barDisplay};height:{_barHeight}px;',
                BART:{
                    cellpadding:"0",
                    cellspacing:"0",
                    width:'100%',
                    height:'100%',
                    border:'0',
                    tagName:'table',
                    className:'uibar-t',
                    BARTR:{
                        tagName:'tr',
                        BARTDL:{
                            tagName:'td',
                            className:'uibar-tdl'
                        },
                        BARTDM:{
                            $order:1,
                            width:'100%',
                            tagName:'td',
                            className:'uibar-tdm'
                        },
                        BARTDR:{
                            $order:2,
                            tagName:'td',
                            className:'uibar-tdr'
                        }
                    }
                },
                BARCMDL:{
                    tagName: 'div',
                    className:'uibar-cmdl',
                    ICON:{
                        $order:0,
                        className:'ui-icon',
                        style:'background:url({image}) transparent no-repeat  {imagePos};{iconDisplay}'
                    },
                    CAPTION:{
                        $order:1,
                        text:'{caption}'
                    }
                },
                BARCMDR:{
                    tagName: 'div',
                    className:'uibar-cmdr',
                    onselectstart:'return false',
                    unselectable:'on',
                    OPT:{
                        className:'uicmd-opt',
                        style:'{optDisplay}',
                        $order:1
                    },
                    PIN:{
                        $order:2,
                        className:'uicmd-pin',
                        style:'{pinDisplay}'
                    },
                    LAND:{
                        $order:3,
                        className:'uicmd-land',
                        style:'{landDisplay}'
                    },
                    
                    MIN:{
                        $order:4,
                        className:'uicmd-min',
                        style:'{minDisplay}'
                    },
                    RESTORE:{
                        $order:5,
                        className:'uicmd-restore',
                        style:'display:none;'
                    },
                    MAX:{
                        $order:6,
                        className:'uicmd-max',
                        style:'{maxDisplay}'
                    },
                    CLOSE:{
                        $order:7,
                        className:'uicmd-close ',
                        style:'{closeDisplay}'
                    }
                }
            },
            PANEL:{
                tagName:'div',
                $order:2,
                className:'ui-content',
                text:'{html}'+linb.UI.$childTag
            },
            STATUS:{
                tagName:'div',
                $order:3
            }
        },'all');
        this.setTemplate(t)
    },
    Static:{
        Appearances:{
            KEY:{
                overflow:'visible'
            },
            PANEL:{
                position:'absolute',
                left:0,
                overflow:'auto',
                'background-color':'#FFF',
                border:'solid 1px #BBB',
                'border-top':0
            },
            STATUS:{
                position:'absolute',
                left:0,
                bottom:0,
                height:0,

                '*font-size':0,
                '*line-height':0
            },
            CAPTION:{
                'font-size':'12px',
                display:'inline',
                'vertical-align':'middle'
            },
            'BAR-focus BART':{
                $order:1,
                'background-position' : 'right -22px'
            },
            MIN:{
                background: linb.UI.$bg('cmds.gif', ' -16px 0', true),
                $order:0
            },
            'MIN-mouseover':{
                $order:1,
               'background-position': ' -16px -16px'
            },
            'MIN-mousedown':{
                $order:2,
               'background-position':  '-16px -32px'
            },
            RESTORE:{
                background: linb.UI.$bg('cmds.gif', ' -32px 0', true)
            },
            'RESTORE-mouseover':{
                $order:1,
               'background-position':  '-32px -16px'
            },
            'RESTORE-mousedown':{
                $order:2,
               'background-position':  '-32px -32px'
            },
            MAX:{
                background: linb.UI.$bg('cmds.gif', ' -48px 0', true)
            },
            'MAX-mouseover':{
                $order:1,
               'background-position':  '-48px -16px'
            },
            'MAX-mousedown':{
                $order:2,
               'background-position':  '-48px -32px'
            },
            PIN:{
                background: linb.UI.$bg('cmds.gif', ' 0 0', true)
            },
            'PIN-mouseover':{
                $order:1,
                'background-position': '0 -16px'
            },
            'PIN-mousedown':{
                $order:2,
                'background-position': ' 0 -32px'
            },
            'PIN-checked, PIN-checked-mouseover':{
                $order:2,
                'background-position':  '0 -32px'
            }
        },
        Behaviors:{
            DropableKeys:['PANEL'],
            DragableKeys:['LAND'],
            HoverEffected:{OPT:'OPT', PIN:'PIN',MIN:'MIN',MAX:'MAX',RESTORE:'RESTORE',CLOSE:'CLOSE',LAND:'LAND'},
            ClickEffected:{OPT:'OPT', PIN:'PIN',MIN:'MIN',MAX:'MAX',RESTORE:'RESTORE',CLOSE:'CLOSE',LAND:'LAND'},
            onMousedown:function(profile, e){
                profile.box._active(profile);
            },

            onDragstop:function(profile){
                var pos = profile.root.cssPos(),p=profile.properties;
                p.left = pos.left;
                p.top = pos.top;
            },
            BAR:{
                onMousedown:function(profile, e, src){
                    if(profile.getKey(linb.Event.getSrc(e).parentNode.id)==profile.keys.BARCMDR)return;

                    if(profile.properties.movable && !profile._locked){
                        profile.box._active(profile);
                        profile.root.startDrag(e, {
                            dragDefer:1,
                            targetOffsetParent:profile.root.parent()
                        });
                    }
                },
                onDblclick:function(profile, e, src){
                    if(profile.getKey(linb.Event.getSrc(e).parentNode.id)==profile.keys.BARCMDR)return;
                    if(!profile.properties.maxBtn)return;
                    if(profile.properties.status=='max')
                        profile.box._restore(profile);
                    else
                        profile.box._max(profile);
                }
            },
            PIN:{
                onClick:function(profile, e, src){
                    var key=profile.keys.PIN, t=profile.properties;
                    //set pinned status
                    t.pinned = !t.pinned;
                    //set appea
                    profile.getSubNode('PIN').tagClass('-checked', t.pinned);
                    //set lock flag for not movable
                    profile._locked = t.pinned;

                    // add/remove resize
                    if(t.resizer){
                        if(!t.pinned){
                            // if not in min mode
                            if(t.status != 'min' && profile.$resizer)
                                profile.$resizer.show();
                        }else
                            if(profile.$resizer)
                                //profile.boxing().setResizer(false);
                                profile.$resizer.hide();
                    }
                }
            },
            MIN:{
                onClick:function(profile, e, src){
                    profile.box._min(profile);
                }
            },
            MAX:{
                onClick:function(profile, e, src){
                    profile.box._max(profile);
                }
            },
            RESTORE:{
                onClick:function(profile, e, src){
                    profile.box._restore(profile);
                }
            },
            OPT:{
                onClick:function(profile, e, src){
                    profile.boxing().onShowOptions(profile, e, src);
                }
            },
            CLOSE:{
                onClick:function(profile, e, src){
                    profile.boxing().close();
                }
            }
        },