主要实现了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",
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, 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",
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="300px; height:300px;" >
abc
</div>
</body>
</html>