Управление фокусировкой вкладок в контексте контекстного виджета JavaScript - PullRequest
Новая
       29

Управление фокусировкой вкладок в контексте контекстного виджета JavaScript

3 голосов
/ 01 декабря 2009

Я работаю над плагином javascript в стиле лайтбокса, который выскакивает изображение с помощью кнопок «следующий + предыдущий» и кнопки «закрыть». Я хочу сделать так, чтобы вкладки только перепрыгивали между тремя представленными кнопками во всплывающем окне, а не проходили через три из них, а затем продолжали просматривать содержимое страницы в фоновом режиме.

Есть ли у кого-нибудь какие-либо предложения по поводу лучшего способа сделать это, в настоящее время я думаю, что лучший способ - это создать массив элементов с вкладками, когда появляется всплывающее окно, и просто захватывать вкладки, чтобы перебирать настройки этого массива, фокусироваться на каждом один и предотвращает поведение вкладки по умолчанию.

Кто-нибудь знает, есть ли лучшие практики по этому поводу?

Ответы [ 2 ]

1 голос
/ 04 декабря 2009

Возможное решение, по-видимому, заключается в установке свойства tabindex для элементов, для которых вы не хотите вкладку, ставить -1. 

<div>
    <input type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
</div>
<div>
    <input type="button" value="not tabbable" tabindex="-1"/>
    <input type="button" value="also not tabbable" tabindex="-1"/>
</div>

Хотя я не нашел этого ни в одной документации, похоже, что он работает во всех протестированных браузерах (FF 3.5, IE 6 & 7, Opera 9.64).

Другой подход был бы к blur(), когда нежелательный элемент получает фокус: 

<div>
    <input type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
</div>
<div>
    <input type="button" value="not tabbable" onfocus="blur()"/>
    <input type="button" value="also not tabbable" onfocus="blur()"/>
</div>

Недостаток этого подхода состоит в том, что как только вы нажмете на элемент «untabbable», ни один элемент не будет выбран, и следующая вкладка начнется с самого первого элемента. Это особенно сложно при переходе назад, что больше невозможно. Решением этой проблемы будет активная фокусировка на следующем правильном элементе: 

<div>
    <input id="firstTabbable" type="button" value="tabbable one" />
    <input type="button" value="tabbable two" />
    <input id="lastTabbable" type="button" value="tabbable three" />
</div>
<div>
    <input type="button" value="not tabbable" onfocus="blur(); $('firstTabbable').focus();"/>
    <input type="button" value="also not tabbable" onfocus="blur(); $('lastTabbable').focus();"/>
</div>

Однако, на мой взгляд, это слишком сложно.

1 голос
/ 01 декабря 2009

Я попытался сделать следующее при отображении всплывающего окна, похоже, оно работает в Firefox 3. Этого может быть достаточно для начала работы: 

$('#nonpopup a').attr('disabled','true');
$('#nonpopup input').attr('disabled','true');

Селектор JQuery находит все элементы A и input, которые находятся в div с id nonpopup, и устанавливает атрибут html disabled в true. Если вы не используете JQuery, вам понадобится другой способ найти все эти элементы, но он может быть таким простым, как document.getElementsByTagName().

Это позволяет браузеру не вкладывать эти элементы. Порядок вкладок по-прежнему покидает страницу и проходит через весь хром браузера, например строку URL.

...