在简单对话框中链接的标签顺序

我使用出色的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>

来源

2011-11-17 Andrew Bucknell

我刚遇到了这个问题自己。这是我到目前为止所做的。 Simplemodal必须添加到功能“watchTab”和“focus”中的制表导航中，以便将焦点保持在模态内。它可以通过记录第一个和最后一个输入以及当您将它们标记出来时着重于其他适当的输入来实现。不幸的是，它只是看着输入而不看链接。这意味着您只能选中位于第一个和最后一个输入元素之间的链接。您可以覆盖或修改这些功能以获得所需的行为。事情是这样的：

替换线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');

这是一个简单的解决方案，这将在不超过标签链接浏览器的情况下可能断裂。我会尽力想出更好的东西。

来源

2011-11-18 23:04:01

这是fantasic乔恩 - 谢谢你的分享。我也会考虑获得更强大的解决方案并分享。感谢您指点我正确的方向。 –

快速跟进 - 我应用了你所建议的改变，到目前为止它在ie7 ie8 ie9 chrome和firefox中运行良好7.我将＃simplemodal-data更改为.simplemodal-data用于我的特定用例，至此它看起来不错。再次感谢乔恩。 –

sddata [0] sddata [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]));

其中函数最小/ biggestTabindex返回适当的元件

来源

2012-02-02 14:46:06

我发现了一个解决方案与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');

来源

2012-03-21 20:11:38

在简单对话框中链接的标签顺序

回答

相关问题