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:

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>