主要实现了easyUI中
1  panel的打开，关闭，resize。 
2  通过按钮动态新建panel。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Panel Practise</title>
<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css"> 
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>   
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<style>
.panel{
    display:inline;
    float:left
}

body{
    overflow:auto; 

}
</style>

<script type="text/javascript" >
    // fit 为true 时， width 和 height 失去效果
    // move 不好用
    
    $(function(){
        
        $("#pannel").panel({
            title:"测试panel",
            width:300,
            height:300,
            fit:false,
            border:true,
            noheader:false,
            collapsible:true,
            minimizable:true,
            maximizable:true,
            closable:true,
            collapsed:false,
            iconCls:"icon-ok",
            tools:[
                {
                    iconCls:'icon-add',
                    handler:function(){alert('add')}
                },{
                    iconCls:'icon-edit',
                    handler:function(){alert('edit')}
                }],
            onBeforeOpen:function(){
                alert("onBeforeOpen");
            },
            onOpen:function(){
                alert("onOpen");
            },
            onBeforeClose:function(){
                alert("onBeforeClose");
            },
            onClose:function(){
                alert("onClose");
            }
            
        });
         
         
        $("#openpanel").bind("click", openPanel);
        $("#closepanel").bind("click", closePanel);
        $("#movepanel").bind("click", movePanel);
        $("#resizepanel").bind("click", resizePanel);
        $("#newpanel").bind("click", newPanel);
        
    });
    
    

    
    function openPanel(){
        console.log("openPanel");
        $("#pannel").panel('open');
    }
    
    function closePanel(){
        console.log("closePanel");
        $("#pannel").panel('close');
    }    

    function movePanel(){
        console.log("movePanel");
        $("#pannel").panel('move',{left:100, top:100});
    }
    
    function resizePanel(){
        console.log("resizePanel");
        $("#pannel").panel('resize',{height:100, width:100});
    }    

    function newPanel(){
        console.log("new");
        var index = $(".panel").size();
        var p_id = "pannel" + index;
        var html = "<div id='"+ p_id +"'></div>"
        console.log(html);
        
        $(".panel:last").after(html)
        
        $("#"+p_id).panel({
            title:"测试panel",
            width:300,
            height:300,
            content: p_id
        });
        
    }
    
</script>
</head>


<body>
<div style="display:block">
<input id="openpanel" type="button" value="打开" />
<input id="closepanel" type="button" value="关闭" />
<input id="movepanel" type="button" value="移动" />
<input id="resizepanel" type="button" value="resize" />
<input id="newpanel" type="button" value="新建" />
</div>


<div id="pannel" style="width:300px; height:300px;"  >   
 abc
</div>

</body>
</html>