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 (){
                $ ( '#btn1' ). click ( function (){
                    $ ( '#d2' ). append ( "<label style='width:" + 80 + "px;display:inline-block'>文件1</label>" );
                    $ ( '#d2' ). append ( "<span style='width:" + 80 + "px;display:inline-block'>200M</span>" )
                    $ ( '#d2' ). append ( "<span style='width:" + 80 + "px;display:inline-block'>200kb/s</span>" );
                    $ ( '#d2' ). append ( "<a href='javascript:void(0)' style='width:" + 30 + "px;display:inline-block'>暂停</a>" );
                    $ ( '#d2' ). append ( "<a href='javascript:void(0)' style='width:" + 30 + "px;display:inline-block'>取消</a>" );
                    $ ( '#d2' ). append ( "<br><hr><br>" )
                });
                $ ( '#d2' ). window ({
                    left: $ ( '#d1' ). width () - 350 ,
                    top: $ ( '#d1' ). height () - 350 ,
                    onCollapse : function (){
                        $ ( '#d2' ). window ( 'move' ,{left: $ ( '#d1' ). width () - 350 ,top: $ ( '#d1' ). height () - 30 });
                    },
                    onExpand : function (){
                        $ ( '#d2' ). window ( 'move' ,{left: $ ( '#d1' ). width () - 350 ,top: $ ( '#d1' ). height () - 350 });
                    }
                })
            })
        < / 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" >
                    < input id = "btn1" type = "button" value = "添加信息" />
                    < div id = "d2" class = "easyui-window" title = "上传管理" data-options = "
                    inline:true,minimizable:false,maximizable:false,draggable:false" ></ div >
                </ div >
            </ div >
        </ div >
    </ body >
</ html >


效果图:

猜你喜欢

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