大家看看我这样写的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();
});
}
});



其他相关的东西在附近里!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值