大家看看我这样写的Panel没有问题吧

本人一直很喜欢ext的风格，想自己用jquery仿写一个！闲着无事，写个试试，先写了个panel。高手们帮忙看看有没有问题。

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();
		});
	}
});

其他相关的东西在附近里！

评论

1 楼 zhupan 2011-12-23