相关依赖的东西在博客中可以下载,大家给看看!我的思路对嘛?
http://nmgxzm2001.iteye.com/blog/1316262
EasyJs.Panel=function(config){
EasyJs.Panel.superclass.constructor.call(this,config);
}
EasyJs.extend(EasyJs.Panel,EasyJs.Component,{
renderTo: document.body,
initTool:function(panelHeader){
if(this.collapsible||this.minimizable||this.maximizable||this.closable){
var panel_tool=$('<div class="panel-tool"></div>');
if(this.closable)$('<div class="panel-tool-close"></div>').appendTo(panel_tool);
if(this.maximizable)$('<div class="panel-tool-max"></div>').appendTo(panel_tool);
if(this.minimizable)$('<div class="panel-tool-min"></div>').appendTo(panel_tool);
if(this.collapsible)$('<div class="panel-tool-collapse"></div>').appendTo(panel_tool);
panel_tool.appendTo(panelHeader);
}
},
initBody:function(panel){
$('<div id="'+this.getID()+'body" class="easyui-panel panel-body" style="width:'+(this.width-22)+'px; height:'+(this.height-48)+'px; padding: 10px; display: block;"></div>').appendTo(panel);
},
initComponent:function(){
var panelOutside=$("<div class='easyui-panel-title' id="+this.getID()+"></div>");
var panel=$('<div class="panel" style="display: block; width:'+this.width+'px;"></div>');
var panelHeader=$('<div class="panel-header" style="width:'+(this.width-12)+'px;">');
$('<div class="panel-title panel-with-icon">'+(this.title?this.title:"")+'</div>').appendTo(panelHeader);
if(this.iconCls){
$('<div class="panel-icon '+this.iconCls+'"></div>').appendTo(panelHeader);
}
this.initTool(panelHeader);
panelHeader.appendTo(panel);
this.initBody(panel);
panel.appendTo(panelOutside);
panelOutside.appendTo(this.getRenderTo());
delete this.renderTo;
this.initItems();
this.initHtml();
this.initEvent();
},
initItems:function(){
var items=this.items;
if(items&&items.length>0){
var count=items.length;
var pBody=$("#"+this.getID()+"body");
for(var i=0;i<count;i++){
$("#"+items[i].getID()).appendTo(pBody);
}
}
},
initHtml:function(){
var html=this.html;
if(html){
$("#"+this.getID()+"body").append(html);
}
},
initEvent:function(){
var id=this.getID();
var panel=$("#"+id),tool=panel.find("div.panel-tool"),tools=tool.find("> div");;
tools.bind("mouseover",function(){$(this).addClass("panel-tool-over");});
tools.bind("mouseout",function(){$(this).removeClass("panel-tool-over");});
tool.find("div.panel-tool-close").click(function(e) {
panel.find("div.panel").hide();
e.stopImmediatePropagation();//阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上
});
tool.find("div.panel-tool-collapse").bind('click', function(e) {
var th=$(this),newClass="panel-tool-expand",thBody=$('#'+id+'body');
if(th.attr("class").indexOf(newClass)>-1){
th.removeClass(newClass);
thBody.slideDown('slow');
}else{
th.addClass(newClass);
thBody.slideUp('slow');
}
e.stopImmediatePropagation();
});
tool.find("div.panel-tool-min").bind('click', function(e) {
panel.find("> div.panel").hide();
e.stopImmediatePropagation();
});
}
});
$(function(){
var t=new EasyJs.Panel({
width:500,
height:200,
title:'panel',
iconCls:"icon-save",//图标 className
collapsible:true,//可折叠
minimizable:true,//可以最小话
maximizable:true,//可以最大化
closable:true,//可以关闭
items:[new EasyJs.Panel({width:100,height:100,title:"child title",collapsible:true,closable:true})],
html:"ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd"
});
}
)
http://nmgxzm2001.iteye.com/blog/1316262