?

P

anel controls are most often used as—and are intended as—containers for other controls. They're often useful when you want to show or hide a group of controls at once, or when you want to add controls to a Web page in code. The figure below show four panels top, left, bottom and right

Figure: panels view

??? Design issues:

?? Panel control is very straightforward for designs no need for more details with it feature just because the main function of the panel is to contain other controls to be convention for move them, hiding, or showing them, all what we need then just to implement html container that can contain many nested element here we going to use the Div element and the nested children tag consider as div tag also.

v? Main methods of panel:

1-?? SetWidth: Just to set the width size of the panel nothing else , the getWidth function return the width of the panel? as integer value.

2-?? SetHeight : set the height of panel control

3-?? Set size : set the width and height of panel control

4-?? Set margin left : locate the position of the panel control? in x? form the left to the right of screen

5-?? Set margin top : locate the position of the panel in y from top to bottom of the screen

6-?? ?Set margin: set the margin left and top of the panel control

7-?? Set visibility: just control the visibility of the panel control mean when to show it in screen and when to hide it off.

8-?? Set background :?? the port to set the background feature of the control panel

9-?? Set border: make the panel more customizable, showing line border with size color and other border type features like dotted border, dashed border...act

10-??? Add function: the most important ever, so as it suggested name the just is port for the panel container to put children inside in hierarchal way.

v? Css view of panel control:

J

ust because we will control the features of the panel using java script so no need to set the more sheet and attributes in the css file, according to what the control need features as default, just wrote the default ones see the code source below

?

The code beside show only the position of the control, padding and the border

Code: css file code of the panel control

?

?

?

?

?

?

?

?

?

?

v? Java script aspects:

?Using java script to control the auto generation html code, mean we try to create all html elements using js code

·???????? Sizing control: that is to say how to set the size (width, height) of the control, object below is the div html element that we can consider it as panel control

??this.setWidth=function(val)
??{
???w=val;
???obj.style.width=w;
??}
??this.getWidth=function(){return?w;}
??this.setHeight=function(val)
??{
???obj.style.height=val;
???h=val;
??}
??this.getHeight=function(){return?h;}
??this.setMarginLeft=function(val)
??{
???l=val;obj.style.marginLeft=val;
??}

·???????? Margining: the margining property intended for layout of the controls, where to put the control in from, page or document.

?

??this.setMarginLeft=function(val)
??{
???l=val;obj.style.marginLeft=val;
??}
??this.getMarginLeft=function(){return?l;}
??this.setMarginTop=function(val)
??{
???obj.style.marginTop=val;t=val;
??}
??this.getMarginLeft=function(){return?t;}
??

Outlook: just consider the background and the border of the panel control

??this.setBackground=function(image,xy)
??{
????obj.style.backgroundImage="url("+image+")";
????switch(xy)
????{
???????case?'x':
?????????obj.style.backgroundRepeat='repeat-x';
???????break;
???????case?'y':
???????obj.style.backgroundRepeat='repeat-y';
???????break;
????}
??}

??this.setBorder=function(boderWidth,color,type)
??{
????obj.style.border=boderWidth+"px?"+color+?"?"+type;
??}
??

?add function :

?????this.add=function()
????{
?????????childIndex++;
?????????var?ch=new?Child();
?????????ch.setParent(pid);
?????????ch.setTag('div');
?????????ch.setId(pid+childIndex);
?????????return?ch.getId();
??
???}

???this.setVisibilty=function(val)
???{
?????if(val==true){obj.style.display='block';}
?????else?if(val==false){obj.style.display='none';}
???}

?

Total js code:

?

function?Child()
{
??var?pa;
??var?chi;
??this.setParent=function(pid)
??{
????pa=document.getElementById(pid);
??}
??this.setTag=function(tag)
??{
??????chi=document.createElement(tag);
??????pa.appendChild(chi);
??}
??this.setId=function(Name)
??{
????chi.id=Name;

??}
??this.setClassName=function(css)
??{
???chi.className=css;
??}
??
??this.getId=function(){return?chi.id;}
??this.getObject=function(){return?document.getElementById(chi.id);}

??
}


function?createHtmlPanel(pid)
{
?????var?baba=document.getElementById(pid);
?????????baba.className='panel';
}

function?Panel(pid)
{

??var?childIndex=-1;
??createHtmlPanel(pid);
??var?w,h,l,t;
??var?obj=document.getElementById(pid);
??
??this.setWidth=function(val)
??{
???w=val;
???obj.style.width=w;
??}
??this.getWidth=function(){return?w;}
??this.setHeight=function(val)
??{
???obj.style.height=val;
???h=val;
??}
??this.getHeight=function(){return?h;}
??this.setMarginLeft=function(val)
??{
???l=val;obj.style.marginLeft=val;
??}
??this.getMarginLeft=function(){return?l;}
??this.setMarginTop=function(val)
??{
???obj.style.marginTop=val;t=val;
??}
??this.getMarginLeft=function(){return?t;}
??
??this.setSize=function(wi,he)
??{
?????this.setWidth(wi);
?????this.setHeight(he);????
??}
??
??this.setMargin=function(lef,top)
??{
???this.setMarginLeft(lef);
???this.setMarginTop(top);
??}
??
??this.setBackground=function(image,xy)
??{
????obj.style.backgroundImage="url("+image+")";
????switch(xy)
????{
???????case?'x':
?????????obj.style.backgroundRepeat='repeat-x';
???????break;
???????case?'y':
???????obj.style.backgroundRepeat='repeat-y';
???????break;

???
????}
??}
??
??this.setBorder=function(boderWidth,color,type)
??{
????obj.style.border=boderWidth+"px?"+color+?"?"+type;
??}
??
??this.getId=function()
??{
???return?pid;
??}
??
?????this.add=function()
????{
?????????childIndex++;
?????????var?ch=new?Child();
?????????ch.setParent(pid);
?????????ch.setTag('div');
?????????ch.setId(pid+childIndex);
?????????return?ch.getId();
??
???}
???this.setVisibilty=function(val)
???{
?????if(val==true){obj.style.display='block';}
?????else?if(val==false){obj.style.display='none';}
???}

??
?
}

?

Html aspect:

?

<div?id="Top"></div>
<div?id="left"></div>
<div?id="right"></div>
<div?id="bottom"></div>
<div?id="center"></div>

<script?language="javascript"?type="text/javascript">

?var?pan1=new?Panel('Top');
?????pan1.setSize(1000,200);
?????pan1.setMargin(100,0);
?????pan1.setBackground('images/no.png','x');
?????pan1.setBorder(1,'#333','solid');
?????
?????
?var?pan2=new?Panel('left');
?????pan2.setSize(200,300);
?????pan2.setMargin(100,200+5);
?????pan2.setBackground('images/SmallScreen.png','xy');
?????pan2.setBorder(1,'#333','solid');

?var?pan2=new?Panel('right');
?????pan2.setSize(200,300);
?????pan2.setMargin(900,200+5);
?????pan2.setBackground('images/SmallScreen.png','xy');
?????pan2.setBorder(1,'#333','solid');
?var?pan1=new?Panel('bottom');
?????pan1.setSize(1000,50);
?????pan1.setMargin(100,500);
?????pan1.setBackground('images/no.png','x');
?????pan1.setBorder(1,'#333','solid');

?????
</script>

?

?

轉載于:https://www.cnblogs.com/ammar/archive/2009/12/27/1633312.html

總結

以上是生活随笔為你收集整理的[ORGINAL]OOP Panel control design(based on web )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。