在簡單對話框中鏈接的標籤順序

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

在簡單對話框中鏈接的標籤順序

回答

相關問題