EasyUI——Window窗体

代码:
<!doctype>
< html >
    < head >
        < title >window窗体</ title >
        < link rel = "stylesheet" type = "text/css" href = "EasyUI/themes/default/easyui.css" />
        < link rel = "stylesheet" type = "text/css" href = "EasyUI/themes/icon.css" />
        < script type = "text/javascript" src = "EasyUI/jquery.min.js" > < / script >
        < script type = "text/javascript" src = "EasyUI/jquery.easyui.min.js" > < / script >
        < style >
            body , html {
                width : 100 % ;
                height : 100 % ;
            }
            #d2 {
                width : 300 px ;
                height : 300 px ;
                padding : 20 px ;
            }
        < / style >
        < script >
            $ (document). ready ( function (){
                $ ( '#d2' ). window ({
                    onMove : function ( left , top ){
                        var w1 = $ ( '#d1' ). width ();
                        var h1 = $ ( '#d1' ). height ();
                        var w2 = $ ( '#d2' ). width () + 55 ;
                        var h2 = $ ( '#d2' ). height () + 80 ;
                        if (left < 0 ){
                            $ ( '#d2' ). window ( "move" ,{left: 0 });
                        }
                        if (top < 0 ){
                            $ ( '#d2' ). window ( "move" ,{top: 0 });
                        }
                        if ((left + w2) > w1){
                            $ ( '#d2' ). window ( "move" ,{left:w1 - w2});
                        }
                        if ((top + h2) > h1){
                            $ ( '#d2' ). window ( "move" ,{top:h1 - h2});
                        }
                    },
                    onResize : function ( width , height ){
                        var w = $ ( '#d1' ). width ();
                        var h = $ ( '#d1' ). height ();
                        var left = $ ( '#d2' ). window ( 'options' ).left;
                        var top = $ ( '#d2' ). window ( 'options' ).top;
                        if ((width + left) > w){
                            $ ( '#d2' ). window ( 'resize' ,{width:w - left});
                        }
                        if ((height + top) > h){
                            $ ( '#d2' ). window ( 'resize' ,{height:h - top});
                        }
                    }  
                })
            })
           
        < / script >
    </ head >
    < body >
        < div class = "easyui-layout" data-options = "fit:true" >
            < div class = "easyui-center" style = "width: 100%;height: 100%;" >
                < div id = "d1" class = "easyui-panel" style = "position:relative;width:1000px;height: 600px;
                background: bisque;overflow:hidden" >
                    < div id = "d2" class = "easyui-window" title = "上传管理" data-options = "maximizable:false,
                    inline:true,minimizable:false" ></ div >
                </ div >
            </ div >
        </ div >
    </ body >
</ html >

效果图:


猜你喜欢

转载自blog.csdn.net/dumiaoxin/article/details/80796832