您现在的位置： 365建站网 > 365文章 > [orginal]TabControlView based on css ,js and html .

[orginal]TabControlView based on css ,js and html .

文章来源：365jz.com 点击数：250 更新时间：2009-09-18 10:21 参与评论

Physical structure:

The tabcontrolview can be separate as three parts ( tabbody,tabheader,tabitem)

Tabbody is the area which will contain all elements in.

1- The tabheader : each tab header contain at least three elements

Background image, header image and tab header text

The tab also has to support the nice looked effective and interactions mean that when mouse move, clicked and others states.

Below we see the physical view of tab background image, including the normal state, mouse over, mouse down, focused and disabled.

Logical structure:

The tabcontrolview will be as div element mean we need to set its property like width, height, margin, padding and others. For the header will be as list with inline display property .

Css style:

/* left side is the tab*/
#LeftSide
{

   position:fixed;
   width:195px;
   height:800px;
   margin-top:76px;
   left:0px;
   border:2px #494949 solid ;

}
/* the tab header */
.LeftSideTabHeader
{
   background-image:url('images/OtherBg.png');
   background-repeat:repeat-x;
   position:fixed;
   width:195px;
   height:23px;
   margin-top:0px;
   margin-left:0px;
}

/* header is list*/

.LeftSideTabHeader ul
{
    margin:0px;
    padding: 0px;
    width:195px;
    height:20px;
    list-style-type:none;

}
/* for all headres.*/

.LeftSideTabHeader  ul li
{
    float:left;
    margin:0px;
    padding: 0px 0px 0px 0px;
    list-style-type:none;
    display:inline;



}

.LeftSide  ul li a
{
    float:left;
    margin:0px;
    padding:0px;
    width:51px;
    height:20px;

}
.LeftSideTabHeader ul li a span
{

    float:left;
    margin:0px;
    padding:0px;
    width:51px;
    height:20px;
    font-family: 宋体;
    font-size: 12px;
    color:black;


}

/*body*/
#LeftSide .yunTaiTabItem
{
     height: 181px;
     width:195px;
     margin-top:22px;
     padding:0px;
     position:fixed;
     background-image:url('images/左云台背景.png');
     background-repeat:repeat-x;
     background-position:center;


}
.yunTaiTabItem .yunTaiWheel
{
    width:110px;
    height: 111px;
    margin:0px;
    position:fixed;
    background-image:url('images/云台.png');
    background-position:center;
    background-repeat:no-repeat;

}

/* start the left side , yuntai tab1 , the left side of yuntai wheel
---------------------------------------------------------------------------------------
*/

.yunTaiTabItem .buttonsListLeft
{
   width:84px;
   height:76px;
   margin-left:110px;
   position: fixed;
   margin-top:0px;

}

.buttonsListLeft ul
{

     height:76px;
     width:21px;
     list-style:none;
     position:fixed;
     margin:0px;
     padding:0px;




}

.buttonsListLeft ul li
{
    margin:0px;
    padding:4px 0px 0px 0px;
    display:block;
    width:20px;
    height: 20px;


}

.buttonsListLeft ul li a
{
     margin:0px;
     padding:0px;
     width:20px;
     height: 20px;
     cursor:default;


}

.buttonsListLeft ul li a span
{
     margin:0px;
     padding:0px;
     width:20px;
     height: 20px;
     cursor:default;
     font-family: 宋体;
     font-size: 12px;
     color:black;


}

/* end the left side , yuntai tab1 , the left side of yuntai wheel
---------------------------------------------------------------------------------------
*/

.yunTaiTabItem .slider
{

   width:84px;
   height:26px;
   margin-left:110px;
   margin-top:76px;
   position: fixed;
   border: 1px red dotted;

}

.yunTaiTabItem .buttonsBottomsGallary
{
   width:192px;
   height:10px;
   margin-left:0px;
   margin-top:111px;
   position: fixed;
   border: 1px red dotted;


}

/*
start  left side . yuntai tab1, yuntai bottom side

-----------------------**********************************************------------------
*/
.buttonsBottoms
{
   width:192px;
   height:55px;
   margin:0px;
   position: fixed;
   margin-top:125px;

}

.Side1R
{
    margin-left:2px;
    padding: 0px;
    width:87px;
    height:50px;
    position:fixed;
    border:2px #FFFFFF double;

}
.Side1R ul
{
    margin:0px;
    padding: 0px;
    list-style:none;
    width:92px;
    height:25px;
    position:fixed;

}

.Side1R li
{
    display: inline;
    width:20px;
    height:20px;
    padding: 0px;
    margin:0px;
    position:fixed;


}

.Side1R a
{
     margin-top:1px;
     margin-left:0px;
     padding:0px;
     width:20px;
     height: 20px;
     cursor:default;
     position: fixed;

}
.Side1R span
{
     margin:0px;
     padding:0px;
     width:20px;
     height: 20px;
     cursor:default;
     font-family: 宋体;
     font-size: 12px;
     color:black;
     position: fixed;


}

/*
end    left side . yuntai tab1, yuntai bottom side

-----------------------**********************************************------------------

*/