• [ORGINAL]OOP Panel control design(based on web )


     

    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:Double Brace:  Design issue as usual we keep in our mind the physical and the logical two entities cannot be separated

       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-    Folded Corner: Before write the css file see the physical points of the control u want to create  , just try to put the default properties of  control in css file 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

     

    Text Box: .panel
{
   position:absolute;
   padding:0px;
   border:1px gray solid;
}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

    Text Box:  In the SetWidth () function we keep the Val value in the w variable so that just will be easy to return it in the getWidth () function, the same issue also in others functions below.  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.

     

    Text Box: Obj is the html element we want to control it , just we consider it  as  panel control   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>

     

     

  • 相关阅读:
    hash的简单应用
    2273: 蓝桥杯第八届省赛正则问题
    Git 消息提交规范
    监听数据变化
    微信小程序组件传参和交互
    vue3 setup语法糖
    GitBook——制作精美的电子书、产品文档、知识库、个人项目、API文档等,并「分享」
    ps镜像翻转单个图层
    windows10或server没有「启动快速启动」的选项的解决方案
    win10驱动程序安装失败的解决方案(禁用驱动程序强制签名)
  • 原文地址:https://www.cnblogs.com/ammar/p/1633312.html
Copyright © 2020-2023  润新知