12章 应用spary制作高级网页组件

比较复杂的用户界面，tab面板  伸缩面板和折叠面板等组件。

 

 
tab面板和菜单实际上分为两种
           一种是切换各个tab页中的内容时并不刷新浏览器窗口，仅仅是被隐藏起来了  利用javascript显示和隐藏tab面板

          另一种是切换各个tab页中的内容时，会刷新浏览器窗口，实际上就是更换了一个新的html页面    也可以局部刷新tab页面内的区域，利用ajax技术。

             浏览器无刷新的制作效果为tab面板，因为他是一个页面中的一个区域

           浏览器刷新的制作效果为tab菜单，因为它是多个页面之间的导航菜单

一.tab菜单

     浏览器刷新  即载入不同的页面

    1. 搭建html结构

    为每个页面都设置相同的框架

 

  

          

home

          

dev

          

design

          

  

     

    

        

1.asdfasdf

        

2.asdfgasdfasdf

         

3.asdfaasdghhhjjkkksdf

    

   

除了每个页面的具体内容，即上面代码中div中包含的部分外，所有tab页面的整体框架都是完全相同的，每个页面都采用语句调用相同的css外部文件，而页面的具体内容所采用的css则放在页面内用

 

 二，借助于spry实现tab面板 

          1html结构

t1

t2

 

内容1

内容2

 

2,背景图片

  3.设置整体的css样式

.tps{

margin:0;

padding:0;

float:left;

clear:none;

width:100%;

}

 

.tpg{

margin:0;

padding:0;

}

4.设置单个tab的css的样式

.tt{

display:block;

height:30px;

float:left;

position:relative;

top:2;

padding:0 0 0 0;

margin:0 0 0 0;

background:url('tab-back.gif');

list-style:none;

cursor:pointer;

color:#fff;

font:bold 14 arial;

-moz-user-select:none;

-khtml-user-select:none;

}

5.设置单个tab的滑动门背景

要利用html中span标签作为钩子来载入右边的背景图

将tt设置为padding：0 0 0 15；

对span增加css设置

.tt span{

display:block;

background:url('tab-back.gif') right top;

padding:7 25 7 0;}

  6.设置鼠标经过效果

.tthover{

 

}

更改为：

.tthover span{

display:block;

background:url('tab-hover.gif') right top;

padding:7 25 7 0;

}

 

7.设置当前页效果

.tts elected{

 

border-bottom:1px solid #eee;

}

  替换为

.tt selected{

background:url('tab-current.gif');

color:#900;

}

.tt secected span{

display:block;

background:url('tab-current.gif') right top;

padding:7 25 7 0;

}

8.设置tab页内容的css样式

  .tpcontentg{

clear:both;//清除浮动的影响

border:solid 2 #900;

 

}

 

 

 

 9.鼠标经过时换页

在html代码中加入如下语句

οnmοuseοver="tp1.showpanel(0)">home

οnmοuseοver="tp1.showpanel(1)">web development

增加onmouserover事件处理语句   当鼠标指针经过时就会显示该tab页

 

 

三。折叠面板

效果如下图

 

  1.简历基本的折叠面板

 

 

 

 

2.准备背景图片

 

转载于:https://www.cnblogs.com/dongguolei/p/7902888.html