最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
javascript 弹出菜单/窗口实现代码
时间:2011-12-13 编辑:简简单单 来源:一聚教程网
window.open 新建的浏览器窗口
<iframe /> 创建的窗口
页面 DOM 创建的伪弹出窗口:如弹出 tips 等
一、当页面无 JS 的时候
通常来说,无 JS 的情况那就按 HTML 的行为来做事。让链接可以链接,就已经解决。比较简单,我们简单带过:
1. window.open 新建的浏览器窗口:尽量让 JS 触发器绑定在 上,并把 a 链接到一个新的页面,即可。
// 链接与 window.open 的目标相同
代码如下 | 复制代码 |
[open window] |
// 记得阻止链接有默认行为,不然有 JS 的时候会打开两次
代码如下 | 复制代码 |
window.open('./iframe.html', 'name', 'height=300,width=500'); return false; |
2.
// 动态创建,请尽量使用这种方法,因为 IE8 不能用 JS focus 到动态创建的 focusable 元素
// 而空 src 则请使用 javascript:'' 这种方式,因为这是解决性能的最好方式,详见:空路径对页面性能影响的解决方案
代码如下 | 复制代码 |
// js |
3. 页面 DOM 创建的伪弹出窗口:使用 来隐藏。链接用锚点。
代码如下 | 复制代码 |
[open current page DOM] |
... 很多很多东西隔在中间 ...
代码如下 | 复制代码 |
二、大多数情况下
大数多情况下,用户的浏览器都是有开启 JS 的。而我们要做的是:focus 到弹出的窗口,并且第一个 tab 就可以访问里面的内容。听过来挺简单的,hub? 先看看 DEMO:
预览:可访问弹出菜单/窗口
1. window.open 新建的浏览器窗口:focus 到新建的窗口即可。
代码如下 | 复制代码 |
// 引用自:QuickMode - popups function popitup(url) { newwindow=window.open(url,'name','height=200,width=150'); if (window.focus) { // focus 到新建窗口 newwindow.focus(); } // 阻止触发器的默认行为 return false; } |
2.
代码如下 | 复制代码 |
// for all except firefox // hack for firefox |
3. 页面 DOM 创建的伪弹出窗口:对于 dom,除了 等这些 focusable 元素(W3C SPEC),都是不可以 focus 的。那么当需要 focus 到一个 div 时,我们有什么方法可以做到呢?通常来说,我们可以设置 Tabindex 来让像
这样的非 focusable 元素可以触发 focus 事件。但我们想要的时真正 focus 到一个地方,以便于使用 tab 来访问这个区域的内容,所以这种方法对我们等于无用。目前还没有比较好的方法(对于我能想到的和找到的),所以目前来说,我们只能利用一个 focusable 元素来创建 focus 目标。我们可以这样做:
Get focus
但问题是,对于这个链接对于我们来说是毫无作用的,我们需要隐藏他,又能 focus 到。但 display:none 的时候是不能 focus 的。对于隐藏 来说,这里也不想说太多。推荐看看这篇文章:使用clip隐藏内容。那么我们可以这样来 hack 我们的这个链接:
代码如下 | 复制代码 |
// html: 注意用 hidefocus 来删除虚线框 // CSS: 使用 clip |
// javascript: 记得把 放在这个 DOM 结构的最前面方便自上至下 tab 下去
a.focus()
三、总结:
至此,重要的技术实现点也已经说明白。代码请见这个粗陋的 DEMO,虽然只是没有特别优化的一段代码,但相信可以解决很多问题。对于可访问性,我们要走的路还有很多。一点点来吧,从今天开始。
-
上一个: jquery星级评分打份实现代码
相关文章
- javascript点击弹出无菜单新窗口代码 07-29
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31