порядок вкладок для ссылок в простом модальном диалоге - PullRequest
Новая
       12

порядок вкладок для ссылок в простом модальном диалоге

4 голосов
/ 17 ноября 2011

Я использую отличный плагин диалога jquery.simplemodal, чтобы показать список элементов.Эти элементы содержат гиперссылки.Все это прекрасно работает, за исключением того, что ссылки в модальном диалоге не появляются как часть порядка вкладок.Я попытался установить tabindex явно, но по какой-то причине только элементы ввода расположены в порядке вкладок - если я перемещаюсь по диалоговому окну, я просто циклически перебираю 3 элемента ввода и не нажимаю на якоря.

Я делаючто-то не так с вызовом simplemodal plugin?

Пример: 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>

Ответы [ 3 ]

3 голосов
/ 19 ноября 2011

Я сам столкнулся с этой проблемой.Вот что я разработал до сих пор.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');

Это упрощенное решение, которое, вероятно, сломается в случаебраузер, который не вкладывает ссылки.Я постараюсь придумать что-нибудь получше.

1 голос
/ 22 марта 2012

Я нашел решение с помощью 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');

0 голосов
/ 02 февраля 2012

sddata [0] sddata [0] также отметим, что ни существующая реализация со следующим селектором: 

s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', s.d.data[0]);

, ни ответ выше, правильно обрабатывают табличные индексы - переключение после последнего элемента будет выполненоПервый элемент в dom, а не тот, с наименьшим tabindex (и наоборот), чтобы это исправить, вы должны сделать так: 

s.inputs = $.merge(self.smallestTabindex(s.d.data[0]), self.biggestTabindex(s.d.data[0]));

, где функции smallle /gestTabindex возвращают соответствующие элементы

...