|
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:
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>