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

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

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

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

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

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

一.tab菜单

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

1. 搭建html结构

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

<li class="design"><a href="design.htm">design</a></li>

</ul>

<ul>

<div id="content">

<ul id="list">

<li>1.asdfasdf</li>

<li>2.asdfgasdfasdf</li>

<li>3.asdfaasdghhhjjkkksdf</li>

</ul>

</div>

</body>

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

2.设置整体样式

外部的tab。css文件中定义各个css属性:

body{margin:10px;}

#content{

border-left:1px solid #lla3ff;

border-right:1px solid #lla3ff;

border-bottom:1px solid #lla3ff;

padding:5px;

font-size:12px;

}

3.设置tab的样式

ul #tabnav{

list-style-type:none;

margin:0px;

padding-left:0px;

padding-bottom:23px;

border-bottom:1px solid #11a3ff;

font:bold 12px verdanna,arial;

}

再设置li的样式

ul#tabnav li{

float:left;

height:20px;

margin:0 3 0 0;

border:1 solid #11a3ff;

}

设置所有超链接的3个伪类，

ul#tabnav a:link,ul#tabnav a:visited{

display:block;

color:#006eb3;

text-decoration:none;

padding:5 10 3 10;

}

ul#tabnav a:hover{

color:#ffffff;

}

设置当前页的tab样式

每个页面的body标记都添加唯一的id，因此可以设置当前页面的菜单项，如home.htm的home菜单等，

给当前页的菜单项添加白色的下边框，从而覆盖了ul标记中设置的蓝色下边框，实现了tab菜单的效果，此时效果如下所示

body#home li.home,body#dev li.dev,body#design li.design...{

border-bottom:1px solid #ffffff;

color:#000000;

}

tab菜单和核心部分已经完成，下面为当前页面的菜单项添加单独的超链接效果，以区别于其他页面，代码如下

body#home li.home a:link,body#home li.home a:visited,body#home li.dev a:visited,......{

color:#000000;

}

body#home li.home a:hover,body#dev li.dev a:hover...

{

color:#006eb3;

text-decoration:underline;

}

为每个页面添加相应的内容，内容部分使用css于公共的css样式文件分别存放，可以使用style嵌入到页面中

代码如下：

放置各个页面单独的具体内容所使用的css

</style>

二，借助于spry实现tab面板

1html结构

<body>

<ul class="tpg">

<li class="tt" tabindex="0"><span>t1</span></li>

<li class="tt" tabindex="0"><span>t2</span></li>

</ul>

</div>

</div>

</body>

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.设置当前页效果

.ttselected{

border-bottom:1px solid #eee;

}

替换为

.ttselected{

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

color:#900;

}

.ttsecected 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代码中加入如下语句

<li class="tpt tabindex="0" onmouseover="tp1.showpanel(1)"><span>web development</span></li>

</ul>

</div>

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

三。折叠面板

效果如下图

1.简历基本的折叠面板

2.准备背景图片

12章应用spary制作高级网页组件的更多相关文章

mysql 12章_MySQL数据库的高级管理
一. 用户管理 Root用户是MySQL数据库管理系统中的系统管理员,但在实际开发过程中通常需要根据不同的开发者分配不同的用户,这样有利于用户的管理和维护. . 用户的创建: ) 方式1:使用MySQ ...
CSS3秘笈第三版涵盖HTML5学习笔记9~12章
第9章,装饰网站导航限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...
20191105 《Spring5高级编程》笔记-第12章
第12章使用Spring远程处理 12.4 在Spring中使用JMS 使用面向消息的中间件(通常成为MQ服务器)是另一种支持应用程序间通信的流行方法.消息队列(MQ)服务器的主要优点在于为应用程序 ...
javascript高级程序设计第3版——第12章 DOM2与DOM3
12章——DOM2与DOM3 为了增强D0M1,DOM级规范定义了一些模块. DOM2核心:为不同的DOM类型引入了一些与XML命名空间有关的方法,还定义了以编程方式创建Document实例的方法: ...
Linux就这个范儿第12章一个网络一个世界
Linux就这个范儿第12章一个网络一个世界与Linux有缘相识还得从一项开发任务说起.十八年前,我在Nucleus OS上开发无线网桥AP,需要加入STP生成树协议(SpanningTree ...
Hadoop专业解决方案-第12章为Hadoop应用构建企业级的安全解决方案
一.前言: 非常感谢Hadoop专业解决方案群:313702010,兄弟们的大力支持,在此说一声辛苦了,春节期间,项目进度有所延迟,不过元宵节以后大家已经步入正轨, 目前第12章为Hadoop应用构 ...
《Entity Framework 6 Recipes》中文翻译系列 (30) ------ 第六章继承与建模高级应用之多对多关联
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇第六章继承与建模高级应用现在,你应该对实体框架中基本的建模有了一定的了解,本章 ...
敏捷软件开发：原则、模式与实践——第12章　ISP：接口隔离原则
第12章 ISP:接口隔离原则不应该强迫客户程序依赖并未使用的方法. 这个原则用来处理“胖”接口所存在的缺点.如果类的接口不是内敛的,就表示该类具有“胖”接口.换句话说,类的“胖”接口可以分解成多组 ...
鸟哥的linux私房菜——第12章正则表达式与文件格式化处理
12.1什么是正则表达式正则表达式就是处理字符串的方法,它是以行为单位来进行字符串的处理行为,正则表达式通过一些特殊符号的辅助,可以让用户轻易达到查找.删除.替换某特定字符串的处理程序. vi.gr ...

随机推荐

真正的S2b其实是S2b2c
本文转自阿里参谋长曾鸣:真正的S2b其实是S2b2c! 在<在未来五年,S2b是最有可能领先的商业模式>这篇文章发表之后,曾鸣书院收到了非常多的反馈,看到很多实践和思考. 在这篇文章中,曾 ...
JS等号的小注释
一言以蔽之:一个等号是赋值操作,==先转换类型再比较,===先判断类型,如果不是同一类型直接为false.
CF Gym 100463B Music Mess （思路）
好题,当时想了半个小时,我往图论方面去想了,把出现过的字符串当场点,然后相互连边,那么就构成了一个三角形,一个大于三个点的连通分量里有以下结论:度为二的点可能是track,度为大于二的点一定不是tra ...
Python中Numpy ndarray的使用
本文主讲Python中Numpy数组的类型.全0全1数组的生成.随机数组.数组操作.矩阵的简单运算.矩阵的数学运算. 尽管可以用python中list嵌套来模拟矩阵,但使用Numpy库更方便. 定义数 ...
Java(面试题)：字符串截取
在Java中,字符串“abcd”与字符串“ab你好”的长度是一样,都是四个字符. 但对应的字节数不同,一个汉字占两个字节. 定义一个方法,按照指定的字节数来取子串. 如:对于“ab你好”,如果取三个字 ...
Xcode中的Project和Target
新创建工程(如下图e.g.),APP的属性包括了 PROJECT 和 TARGETS 两块内容.且一个工程只有一个 PROJECT,但可以有一个或多个 TARGETS(从苹果的命名上也可以看出,这个 ...
SAP HANA
DROP PROCEDURE ""."ZCONCAT_EKKO_EBN"; CREATE PROCEDURE ""."ZCONCA ...
node 文件下载到本地 (支持中文文件名)
downloadfile:function(req,res,next){ var name= encodeURI(req.query.name); var path= req.query.url; v ...
Unity基础-编辑器
编辑器 Special Folders Hidden Folder(start with .) Standard Assets:第一批加载的文件 Editor:只在编辑下才能使用, Plugins R ...
Verilog之语句位置
1.if语句.case语句必须放在always过程语句块中. 2.verilog的系统函数比如:\(display/\)monitor必须放在initial 过程语句块中.这点尚为理解为何,但必须这样 ...

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

12章 应用spary制作高级网页组件的更多相关文章

随机推荐

热门专题

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

12章应用spary制作高级网页组件的更多相关文章