我正在使用优秀的jquery.simplemodal对话框插件来显示项目列表。这些项目包含超链接。这一切都很有效,只是模态对话框中的链接不会作为Tab键顺序的一部分出现。我已经尝试显式设置tabindex,但由于某种原因,只有输入元素按Tab键顺序排列 - 如果我在对话框中选中,我只需循环浏览3个输入元素并且不要点击锚点。
我是否在调用simplemodal插件时出错?
一个例子是http://dev.andrewbucknell.com/basic/demo1.html
演示的代码(带有相对路径)如下
<!DOCTYPE html>
<html>
<head>
<title> SimpleModal Basic Modal Dialog </title>
<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2010 - Eric Martin' />
<!-- Page styles -->
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<!-- Contact Form CSS files -->
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
<!-- IE6 "fix" for the close png image -->
<!--[if lt IE 7]>
<link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
<!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='basic-modal'>
<h3>Basic Modal Dialog</h3>
<p>A basic modal dialog with minimal styling and no additional options. There
are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly
on style options and/or external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic'/> or <a
href='#' class='basic'>Demo</a>
</div>
<div id="funddialog">
<div id="fundpickfilter">
<div class="fundfilter">
<label style="font-weight: bold;" for="filtertext">Find: </label>
<input class="tfilter" type="text" id="filtertext" value=""/>
</div>
<div id="fundactions">
<button type="button" id="fundsearch"
class="searchbutton">Search</button>
<button type="button" id="fundreset"
class="resetbutton">Reset</button>
</div>
</div>
<div id="fundpicklist">
<div class="fund"><a href="http://www.slashdot.org" >Item
1</a></div>
<div class="fund"><a href="http://www.arstechnica.com" >Item
2</a></div>
<div class="fund"><a href="http://www.techmeme.com" >Item
3</a></div>
</div>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<div id="funddialog">
<div id="fundpickfilter">
<div class="fundfilter">
<label style="font-weight: bold;" for="filtertext">Find: </label>
<input class="tfilter" type="text" id="filtertext" value=""/>
</div>
<div id="fundactions">
<button type="button" id="fundsearch"
class="searchbutton">Search</button>
<button type="button" id="fundreset"
class="resetbutton">Reset</button>
</div>
</div>
<div id="fundpicklist">
<div class="fund"><a href="http://www.slashdot.org" >Item
1</a></div>
<div class="fund"><a href="http://www.arstechnica.com" >Item
2</a></div>
<div class="fund"><a href="http://www.techmeme.com" >Item
3</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>
</body>
</html>
答案 0 :(得分:3)
我自己也遇到了这个问题。这是我到目前为止所做的工作。 Simplemodal必须在函数'watchTab'和'focus'中添加选项卡导航,以便将焦点保持在模态内。它通过记录第一个和最后一个输入来实现这一点,当你选择它们时,关注适当的其他输入。不幸的是,它只关注输入而不是链接。这意味着您只能选择位于第一个和最后一个输入元素之间的链接。您可以覆盖或修改这些函数以获得所需的行为。像这样:
用var input = $('#simplemodal-data :input:visible:enabled, #simplemodal-data a:visible')[p]();
将第592行替换为s.inputs = $('#simplemodal-data :input:visible:enabled, #simplemodal-data a:visible');
这是一个简单的解决方案,如果浏览器没有链接选项卡,它可能会中断。我会尝试提出更好的东西。
答案 1 :(得分:1)
我找到了SimpleModal 1.4.2的解决方案
第609行
改变这个
s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', s.d.data[0]);
对此
s.inputs = $('a:visible, :input:enabled:visible', s.d.data[0]).filter(':first,:last');
答案 2 :(得分:0)
s.d.data [0] s.d.data [0]还注意到既没有现有的实现,也有以下选择器:
s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', s.d.data[0]);
也不是上面的答案,正确处理tabindexes - 最后一个元素之后的开关将完成dom中的第一个元素,而不是tabindex最少的元素(反之亦然) 解决这个问题,你必须这样做:
s.inputs = $.merge(self.smallestTabindex(s.d.data[0]), self.biggestTabindex(s.d.data[0]));
其中函数smallest / largestTabindex返回适当的元素