关于我们 广告服务 社区论坛
设为首页 加入收藏

行业新闻
服 务 器
模版下载
建站指南
冲浪宝典
办公软件
网站运营
操作系统
QQ 专题
网页制作
安全防御
视频教程
网络编程
SEO专区
软件下载
图像设计
Cisco
网页特效
Wap 技术
联盟赚钱
网页素材
 首页 | 企业建站 | 网页制作 | 网站运营 | 网络编程 | 图像设计 | 冲浪宝典 | 操作系统 | SEO专区 | 联盟赚钱 | Cisco

欢迎来到e天下网络首页>>网页制作>>CSS>>正文|标准的、语义的、Unobtrusive的页签切换

标准的、语义的、Unobtrusive的页签切换

[ 来路:21kn.com    时间:2007-7-7 20:56:37    点击: ]

 

页签的流行
自从Yahoo!的首页引进页签(tab, 见下图)之后,这种可用性极佳的方式越来越受欢迎,用户也逐步习惯和喜欢上它,因为它可以在原有的空间上增加更多的可用信息,而且只需切换,不需刷新整个页面,浏览更舒畅。很多网站接受并使用,如新浪等。
标准的、语义的、Unobtrusive的页签切换


页签的标记结构
那么,让我们来看看这些页签后的代码。

新浪完全不考虑什么标准,就是表格嵌套,我们略过不提。Yahoo!的XHTML形式是这样的:
<div>
<ul>
<li>页签1</li>
<li>页签2</li>
...
</ul>
</div>
<div>
<div>内容1</div><!--它们可能由Ajax载入-->
<div>内容1</div>
...
</div>


符合标准,但却没有语义。页签和相应内容没有任何关联。也就是说,在没有CSS展现的情况下,用户并不晓得页签究竟对应哪一块内容。而且就JavaScript实现来说,必须对元素定义更多的id或者class作为调用钩子(hook),容易造成代码冗余。有人对此作出改良,使用连接元素的hash(即#号后的字段)跟内容进行关联,即下面这种形式:
<div>
<ul>
<li><a href="#content1">页签1</a></li>
<li><a href="#content2">页签2</a></li>
...
</ul>
</div>
<div>
<div id="content1">内容1</div><!--它们可能由Ajax载入-->
<div id="content2">内容1</div>
...
</div>


这种方式对于机器来说,确实找到了关联点,而且用户点击的时候,也能在hash的作用下(传统说法中的“锚点”)调到相应的内容区块。有进步,但还是不够语义。

语义,语义,语义!
理想中标准的、语义的tab代码应该是怎么样的呢?在我看来,应该是这样:
<dl>
<dt>页签1</dt>
<dd>内容1</dd>
<dt>页签2</dd>
<dd>内容2</dd>
</dl>



当然,我认为并不是Yahoo!的设计师/开发者并不了解语义,可能是由于某些特殊的需求在这种代码下可能会实现不了,只好采取折衷方案。是的,在这种代码形式下,语义虽能充分体现,但是要实现页签的表现形式,确实是一个难题。

解决之道
首先,请运行我们的演示,先自行分析一下。如果您使用Firefox,可以尝试把CSS样式禁用进行“欣赏”(如果您装了Web developer toolbar,您可以CTRL + SHIFT + S)。继续。

解决dt的横排
dt与dd交错,如何能够使得dt排在一行上?well,理论不分析太多,要使它们在一起,我们假设dd不存在。这样的话,使用float就能排在一起。既然dd不能不存在,ok,那么让它们脱离文档流,如何做?position:absolute;就可以了。但是IE6有问题,wtf . 我的解决方法是,使用JavaScript把所有的dt凑一块,这样严重伤害了语义,但这只是一个浏览器问题,而且是在有JavaScript的时候才产生语义问题,阿弥陀佛,辩证法认为事物都具两面性。

解决dd的自适用高度
对于已经position:absolute;了的dd,无论是理论还是实践,使用纯CSS都没有解决方法。同样,我使用了JavaScript来动态计算它的每一次高度,然后赋予整个dl。

局限性与缺点
这样做保证了标准、语义、Unobtrusive。但对于少部分拥有能解析CSS的先进浏览器但却关闭了JavaScript的用户来说,极有可能会被不能自适用高度的页签下的内容区块挡住了跟随在后的信息。

s2uTab
很高兴我能写出一些实用的JavaScript,以上所提到的,我将之命名为s2uTab — 偏要解释的话,它就是Standard, Semantic, Unobtrusive Tab的缩写。首先,它很小,不依赖于任何库,在IE6+, opera 9+, Firefox 2+均通过测试(若您有Safari,务必帮忙测试一下,谢谢)。其次,灵活,除了dl外无须任何钩子,且页签数目灵活没有限制。再次,您可以指定页签切换的事件形式,可以指定初始的页签是哪个。

用法
您可以为window.onload添加如下函数:
s2uTab(页签, 事件类型, 初始页签);

其中,页签指dl元素的引用,如果您传入的是字符串,则返回id是改字符串的dl引用;事件类型是指,页签的激活是点击还是鼠标悬停,传入click或者mouseover(注意:没有”on”!)即可;初始页签是指您在初始化页面时需要激活的页签,注意,为符合编程习惯,请从0算起。

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

::::站长友情提示:多花一分钟学点什么都好::::

 

上一篇:网页:完美兼容IE6/IE7/FF的通用方法  下一篇:Div CSS布局常见问题:两个层之间的间隙(IE 3px bug)

 ::热点信息::

 

= = 免责声明 = =

① 欢迎转载我网所刊信息,请注明“来源:E天下网络”。
② 凡本网注明“来源:XXX(非E天下网络)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。
※联系方式:Airtofly@163.com

::推荐文章::

 

Dreamweaver8创建自定义代码片

::图像设计::

 

动态图片搜索家——GIF RUNN
软件搜索利器——FileFerret
实例说明构图要讲规律
Character Builder让你尽展靓
全景图速成者Cool360
三维模型速成工具——Canoma
剪贴专家SmartBoard 32
新世纪的图像处理利器——Ph
更多内容..

 

 

关于我们 广告服务 友情链接 合作伙伴 社区论坛 免责声明

Copyright © 2007   21kn.com Inc. All rights reserved.e天下网络工作室

网站白天客服QQ:26875416 (非24小时)  合作QQ:597004688    粤ICP备06026423号