淘宝首页代码调整
来源:陈成的博客 发布时间:2011-04-22 12:44:00
1. 吊顶下拉菜单的键盘可用性改进
无障碍访问貌似最近比较火,大家都在聊,其中一块就是键盘的可访问性。我们在首页上作了些调整,让用户可以通过键盘访问到下拉菜单里的内容,希望小小的改进能够帮助到一些人。
实现方式不多解释,具体见代码:
var S = KISSY, DOM = S.DOM, Event = S.Event;var siteNav = DOM.get('#site-nav');var ulEl = DOM.get('#site-nav-bd ul');var linkEls = DOM.query('a', ulEl);var liEls = ul.getElementsByTagName('li');var menuEls = DOM.query('div.menu', ulEl);var searchLiEl = DOM.get('li.search', ulEl);var searchHdEl = DOM.get('span.menu-hd', searchLiEl);searchHdEl.setAttribute('tabIndex', 0);linkEls.push(searchHdEl);linkEls.push(DOM.get('header.top-header').getElementsByTagName('a')[0]);Event.on(linkEls, 'focus', function() { var li = DOM.parent(this, 'li'); DOM.removeClass(liEls, 'hover'); DOM.addClass(li, 'hover'); if (DOM.hasClass(li, 'services') && DOM.html('#J_ServicesContainer') === '') { KISSY.getScript('http://www.taobao.com/index_inc/2010c/includes/get-services.php?cb=__services_results'); }});Event.on(menuEls, 'mouseleave', function() { DOM.removeClass(liEls, 'hover');}); Event.on(document.body, 'click', function() { DOM.removeClass(liEls, 'hover');});
PS: 国外很多站点都作了类似处理:比如 Mozilla、Google,但国内好像不多见。
2. Flash 嵌入方法调整
源于小马提的一个 bug 反馈:在 IE 下没装 Flash 控件时,页面会出现大片空白。
乔花 MM 分析原因,反复测试后发现:
没装 Flash 和装了 Flash 后禁用 Flash 的表现是不一致的,后者不会出现 bug 里描述的问题
没装 Flash 时,如果用下面这种古老的 Flash 嵌入方法,浏览器会去请求 codebase 指定的地址,完了提示你安装 Flash
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="90" height="40"> <param name="movie" value="/file/UploadPic/20114/22/t1ovv6xbxkxxxxxxxx-62.swf"> <param name="wmode" value="transparent"> <embed wmode="transparent" src="https://img.aspxhome.com/file/UploadPic/20114/22/t1ovv6xbxkxxxxxxxx-62.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" width="90" height="40" type="application/x-shockwave-flash" wmode="transparent"/></object>
如果 object 对象后跟一个内联脚本,则会阻塞后续资源的渲染和下载,直到 codebase 的请求完成。很悲剧,首页就这种情况;更悲剧的是,download.macromedia.com 的请求返回很慢 ...
解决方式是换一种 Flash 嵌入方式,比如:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="90" height="40" class="holiday-logo"> <param name="movie" value="/file/UploadPic/20114/22/t1ovv6xbxkxxxxxxxx-62.swf"> <param name="wmode" value="transparent"> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="/file/UploadPic/20114/22/t1ovv6xbxkxxxxxxxx-62.swf" width="90" height="40"> <param name="wmode" value="transparent"> </object> <!--<![endif]--></object>
最后附上各种情况的测试页面:阻塞(问题页面),不阻塞(问题已解决)。测试时请注意要:IE浏览器、卸载Flash和清空缓存。
猜你喜欢
- 一般用 createProcessingInstruction 方法创建处理指令指定参数为 "xml","ve
- jqGrid是一个优秀的基于jQuery的DataGrid框架,想必大伙儿也不陌生,网上基于ASP的资料很少,我提供一个,数据格式是json
- 系列目录:1. 服务器XMLHTTP(Server XMLHTTP in ASP)基础2. 
- 锚点是“top”,可以放在页面的任何位置,一般是页首。程序就是对锚点出现的判断,我设置的数值是4,意思是出现4个动态数据就出现一个锚点,少于
- 本文列出了一些asp编程种可能会用到的正则表达式例子,大家可以方便的调用!如果您对asp种的正则表达式不是很了解可以看看这篇文章《ASP中R
- 代码如下:---这是一个人事系统中的示例,要求记录一下员工的缺勤情况 ---1.要在表中记录一下缺勤计分,是对经常缺勤者的一种处
- 阅读上一篇:垂直栅格与渐进式行距(上) 新问题来也匆匆,去也“冲冲”。距上次发布垂直栅格与渐进式行距(上)发布,已经不知不觉过去了
- prototype框架最早是出于方便Ruby开发人员进行JavaScript开发所构建的,从这个版本上更加体现的淋漓尽致。比起1.3.1版本
- 描述:让Len,Left,Right函数识别中文;对中文识别为两个字符,ASCII码为一个;可用此函数代替Len,Left,Right函数。
- 最近论坛里总有人问幻灯片怎么从数据库里取数据,花了几分钟简单的写了下。用到的人可以自己在细化<%dim rs,sqlset&
- CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA
- 摘要:Oracle和微软都是数据库方面的大厂商,采用两家的产品的企业也不少。今天这篇文章为大家对比Oracle和SQLServer的镜像。标
- 上节我们介绍了表连接,更确切的说是inner joins內连接. 內连接仅选出两张表中互相匹配的记录.因此,这会导致有时我们需要的记录没有包
- 关于 游标 if,for 的例子 create or replace procedure peace_if is cursor var_c
- 今日一同时问我,new Date(Date(str))这段代码什么意思?我一看就晕了,一个new Date 一个Date这是什么意思?这函数
- 缓动,学名为Tween,缓冲移动的简称。要想页面内容切换起来舒服,就使用淡入淡出特效,要想让页面元素动起来自然,就要使用缓动效果。这两个混合
- 图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项
- 这里列出了13种实现图片或网页内容 lightbox 效果的方法,大部分是链接到各种lightbox作者的英文页面,里面都有源代码下载。Th
- 经过摸索和实践,我把自己的解决方法,写在下面: 说明: 我的Oracle客户端的版本是 oracle 9i, 安装client端的时候,不能
- 第一个保存在新建一个文本中<% Dim Username,PassWord,strLogFile,f,ff,Str