首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > 网站重构教程 > 正文
Google
标准的 语义的 非侵入的页签切换
来源:Realazy 作者:Realazy 2007年04月11日 08:52 网友评论:0条 点击:

解决之道

首先,请打开我们的Demo页面,先自行分析一下。如果您使用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外无须任何钩子,且页签数目灵活没有限制。再次,您可以指定页签切换的事件形式,可以指定初始的页签是哪个。

首页 上一页 [1] [2] [3] 下一页 尾页
上一篇:未知高度的非表格垂直对齐   下一篇:网站程序员如何应对web标准
收藏此页】【打印】【关闭
 相关文章  我要点评

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】