在简单模型对话框中的链接的制表顺序 [英] tab order for links in a simplemodal dialog
问题描述
我正在使用优秀的jquery.simplemodal对话框插件来显示项目列表。这些项目包含超链接。除了模式对话框中的链接不会作为标签顺序的一部分，这一切都很好。我已经尝试显式设置tabindex，但由于某些原因，只有输入元素是标签顺序 - 如果我通过对话框选中，我只是循环访问3个输入元素，不要打锚点。
I am using the excellent jquery.simplemodal dialog plugin to show a list of items. These items contain hyperlinks. It all works great except that the links in the modal dialog arent coming up as part of the tab order. I have tried setting tabindex explicitly, but for some reason only the input elements are in the tab order - if I tab through the dialog I just cycle through the 3 input elements and dont hit the anchors.
我在调用simplemodal插件时出错了？
Am I doing something wrong with calling simplemodal plugin?
一个例子是在 http://dev.andrewbucknell.com/basic/demo1.html
代码（带演示的相对路径如下所示：
The code (with relative paths) for the demo is as follows
<!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>
推荐答案
我刚刚遇到这个问题。这是我迄今为止所做的工作。 Simplemodal必须添加到功能'watchTab'和'焦点'中的选项卡导航，以便将焦点保持在模态中。通过记录第一个和最后一个输入，当您通过它们，通过记录第一个和最后一个输入，专注于适当的其他输入。不幸的是，它只是看输入而不是链接。这意味着您只能选中位于第一个和最后一个输入元素之间的链接。您可以覆盖或修改这些函数以获得所需的行为。这样做：
I just ran into this problem myself. Here's what I worked out so far. Simplemodal has to add to tab navigation in the functions 'watchTab' and 'focus' in order to keep focus inside the modal. It achieves this by recording the first and last inputs and when you tab past them, focusing on the appropriate other one. Unfortunately, it is only looking at the inputs and not the links. This means that you can only tab to the links that are located between the first and last input elements. You can overwrite or modify these functions to get the desired behavior. Something like this:
将行473替换为 var input = $（'＃simplemodal-data：input：visible：enabled，＃simplemodal-data a：visible'）[p]（）;
将行592替换为 s.inputs = $（' ＃simplemodal-data：input：visible：enabled，＃simplemodal-data a：visible'）;
这是一个简单的解决方案，在浏览器的情况下可能会断开链接。我会尽量想出一些更好的东西。
This is a simplistic solution which will probably break in the case of a browser which doesn't tab over links. I will try to come up with something better.
这篇关于在简单模型对话框中的链接的制表顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
