本人一直很喜欢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