标准的、语义的、Unobtrusive的页签tab切换
作者:realazy 来源:realazy.org 发布时间:2007-11-03 13:58:00
页签的流行
自从Yahoo!的首页引进页签(tab, 见下图)之后,这种可用性极佳的方式越来越受欢迎,用户也逐步习惯和喜欢上它,因为它可以在原有的空间上增加更多的可用信息,而且只需切换,不需刷新整个页面,浏览更舒畅。很多网站接受并使用,如新浪等。
页签的标记结构
那么,让我们来看看这些页签后的代码。
新浪完全不考虑什么标准,就是表格嵌套,我们略过不提。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!的设计师/开发者并不了解语义,可能是由于某些特殊的需求在这种代码下可能会实现不了,只好采取折衷方案。是的,在这种代码形式下,语义虽能充分体现,但是要实现页签的表现形式,确实是一个难题。
解决之道
首先,请打开我们的Demo页面,先自行分析一下。如果您使用Firefox,可以尝试把CSS样式禁用进行“欣赏”(如果您装了Web developer toolbar,您可以++)。继续。
解决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算起。
相关文章推荐:三种简洁的Tab导航简析源码打包下载
猜你喜欢
- 说明: a、以下字符中数据库名forum,数据库服务器名WWW-2443D34E558\SQL2005(或者127.0.0.1) b、查看s
- 可以采用exec方法注意:使exec不能返回一些变量的值,而且当前的变量值在exec的语句里无效。declare @tempStr
- 阅读上一篇:W3C优质网页小贴士(三)明智地选择 URI没有什么比走到你最喜欢的商店门口,却发现店门紧闭,而且没有看见店面搬迁告示这种事情还
- 一扯上文化二字,总觉虚无缥缈、漫无边际,或者老气横秋,如何有趣地利用中华文化的思想和符号,结合现代的元素,使其成为有意思的传播手法,这个问题
- 在设计网页之前,客户或产品经理会提出对网页视觉风格设计的期望:活跃、大气、稳重、信赖、都市化….. 设计师一听到关键词或许很自然地在心里蹦出
- MySQL有多种存储引擎:MyISAM、InnoDB、MERGE、MEMORY(HEAP)、BDB(BerkeleyDB)、EXAMPLE、
- 在学习与运用ASP中,response对象涉及到的方面也比较多,想全部都掌握也并非一两天的事,我也是最近才发现response对象中居然有这
- 随着十几年前“用户体验”这一概念的提出,“用户研究”也逐渐发展成为一个新兴的行业。那么,“用户研究”究竟包括哪些工作内容,在企业中如何开展,
- 本文介绍了两个asp实用的技巧,一是使用asp强制刷新页面,二是判断一个文件是否存在强制刷新网页 强制性刷新随机验证码 ,让随机验
- 前言:话说,我一直没能理解美工究竟是什么(这是一篇投稿)。因为要求确实很多。目前,我只能理解成,是前端开发+页面设计+用户体验设计的全能手。
- 如图:其中Num是自增长列,Operation是分类标签,count是汇总数据 代码如下:select Num=row_numb
- 今年年初之时,微软发布了一个针对ActiveX控件的补丁,安装此补丁后的IE6中,当ActiveX控件获得焦点时,IE自动为其套上一个虚线矩
- 事情开始得很简单。MegaWare公司市场部门想要一个新的网站来发布文档,开发团队觉得使用SQL Server 2000数据库作为文档存储仓
- 如何随机显示图片计数器?一切就绪,看看我们的代码:count.asp< html >< head >
- 代码如下:<% class MyClass Dim var '公共变量必须使
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 15 - SlidersMooTools 1.2的
- SQL*Plus system/manager 2、显示当前连接用户 SQL> show user 3、查看系统拥有哪些用户 SQL&
- 网站域名一般都会选简短易记的,因为这对于网站宣传来说也可以省不少力。而被很多网站忽视的站内Url结构则在一定程度上反映出网站的整体架构。当设
- 这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了,字体放大、显示所有图片、显示Cookie等等
- 关于SQL Server数据库的一切信息都保存在它的系统表格里。我怀疑你是否花过比较多的时间来检查系统表格,因为你总是忙于用户表格。但是,你