欢迎来到天天文库
浏览记录
ID:11496031
大小:355.00 KB
页数:15页
时间:2018-07-12
《动态下拉列表与可读性思考》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、一、俗耐的开篇语关于下拉菜单的可用性问题,我之前一直都是忽略的,可以说是不知道,常常仅仅止步于眼前的效果上。前段时间看到了Roger的”AccessingNavDrop-Downs“一文,就是讲了下下拉菜单的可用性问题。同时,巧的是,最近在看淘宝UED翻译的《ppk谈JavaScript》一书,其多次提到了可访问性的问题,尤其在p28~p37对JavaScript及其一些可用性问题发表了自己的看法。其中主要的观点和注意事项与Roger的文章是一致的。这些阅读的经历让我意识到自己长时间忽略下拉菜单的可访
2、问性,于是开始结合实际情况,思考自己以后需要注意和提高的地方。这让我对下拉菜单实现方式选择、标签的使用等有了更加明确的认识。不太成熟的思考,仅用于交流。再具体讲述下拉菜单的可访问性之前,先简单说说下拉菜单以及下拉菜单的实现吧。二、关于下拉菜单及其实现百度百科对“下拉菜单”一词的解释是:以条形菜单栏和菜单栏中每个菜单项的弹出菜单窗口两部分组成,一般作为应用系统的主菜单使用。不过这段话就像《盗梦空间》一样,让人很难懂。通俗点讲,就是“经过/会点击就会显示列表的菜单”就叫做下拉菜单。在web上非常之常见,例
3、如~~我随便打开个页面,啊,就像是我浏览器现在显示的百科的页面的右上角:或是隔壁的微博页面,啊,果然,看左上角的广场下拉:恩恩,看来下拉菜单就像是男人一样,满地都是。就不一一举例了,关于下拉菜单的实现,那方法可就多了,class切换,属性绑定,js定位等,不同的页面,不同的设计,不同的架构,就有不同的实现方法。由于每个项目,每个页面的情况都不一样,所以,不能轻易的下结论,你是大熊猫,是国宝,它是小野猫,是杂草。但是,就可用性而言,不同的方法优劣还是有标准来评判的,这个在后面会自然而然的展示。现在,举个
4、切换class实现下拉效果的简单例子,实例菜单原型来自Mtime时光网,//zxx:Mtime创始人在新浪微博上很活跃,你有兴趣可以follow他,@马日拉,你有没有觉得这个名字很有遐想的空间呢?,截图如下:此导航下拉的每个下拉内容都已经通过CSS定位好了,但是,考虑到加载的原因,其下拉内容默认是未装载的。也就是说,是鼠标移至导航内容上,才动态load下拉div并嵌入导航li标签内的,如下图所示:当然,作为静态demo页面,没有必要动态load下拉内容,所以,demo页面的下拉div默认就是隐藏且装载
5、好的,于是,我们就可以通过简单的class切换实现下拉效果。首先是HTML结构,见下图:核心CSS代码如下:.i_n_l{display:none;}.showtime_hover.i_n_l,.quiz_hover.i_n_l,.home_hover.i_n_l,.movie_hover.i_n_l,.tv_hover.i_n_l,.person_hover.i_n_l,.blog_hover.i_n_l,.group_hover.i_n_l{display:block;}可见,我们只要让li标签的
6、class,例如“我的时光”所在li标签,由”home”变成”home_hover”就可以控制下拉菜单的显示与隐藏了,很简单吧,所以,相应的js代表就会类似于下面:然后,效果就如下图所示,截自IE6浏览器:人用户所有的电脑操作都依赖于读屏软件和键盘来完成。这三位用户现在使用的都是永德读屏软件,它安装后即在后台运行,把普通的操作系统变成了带语音的操作系统。盲人朋友依靠tab键,方向键和部分快捷键来调整目前光标的所在位置,而每按一次键盘,或屏幕上出现新的内容,或可操作界面
此文档下载收益归作者所有