Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 20.07.2018, 15:07
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,691

рони,
Сообщение от рони
хотел бы я видеть, как это возможно.
Таки смотрите пост 9
Ответить с цитированием
  #12 (permalink)  
Старый 20.07.2018, 15:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,812

Dilettante_Pro,
ок, но я предполагал только некую секретную установку tabindex, без следующего изменения.
Ответить с цитированием
  #13 (permalink)  
Старый 20.07.2018, 16:03
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,691

Сообщение от рони
без следующего изменения
Так можно сделать только один проход (но менять tabindex элемента Navigator все равно нужно).
Если не менять tabindex у li a, то нужен в конце холостой элемент, на котором делать focus() на начало.
Ответить с цитированием
  #14 (permalink)  
Старый 20.07.2018, 16:36
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,691

Вариант, работающий также в IE и FF
<style>
ul li { display:inline; 
    border: 1px solid gray; 
}
div a{ border: 1px solid gray; }
:focus { background-color:lightgreen;}
</style>
<ul class='nav__list'>
  <li class = 'nav__item'>
    <a href="#" class='nav__item-link' tabindex="2">
      <span> Players </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link' tabindex="4">
      <span> Coaches </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link' tabindex="6">
      <span> Referees </span>
    </a>
  </li>
  <li class = 'nav__item'>
    <a  href="#" class='nav__item-link' tabindex="8">
      <span> &lArr; </span>
    </a>
  </li>
</ul>
<div class='navigation'>
  <a  href="#" tabindex="1"><span> Navigation</span> </a>
</div>
<script>
    var refs = document.querySelectorAll('a');
    var list = document.querySelectorAll('li a');
    var nav = document.querySelector('div a');
    nav.focus();
    [].forEach.call(refs, function(it) {
        it.addEventListener('focus',  function() {
           var ti = +this.getAttribute('tabindex');
           ti = (ti + 1).toString();
           if(this != nav) nav.setAttribute('tabindex',ti );
           if(this == list[list.length - 1]) list[0].focus();
       });
    });
</script>

Последний раз редактировалось Dilettante_Pro, 20.07.2018 в 16:44.
Ответить с цитированием
  #15 (permalink)  
Старый 21.07.2018, 14:37
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 169

Замучился с корректным решением, поэтому более детально опишу задачу, очень надеюсь на вашу помощь.
#app

  a.some-links link
  a.some-links link

  ul.list
    li.list__item
      a(href="#" data-nav-id="_1").list__link First

    li.list__item
      a(href="#" data-nav-id="_2").list__link Second

    li.list__item
      a(href="#" data-nav-id="_3").list__link Third

  ul.nav
    li(data-nav-id="_1").nav__item
      a(href="#").nav__link first

      .nav__popup
        ul.nav__popup-list
          li.nav__popup-item
            a(href="#").nav__popup-link first 1
          li.nav__popup-item
            a(href="#").nav__popup-link first 2

    li(data-nav-id="_2").nav__item
      a(href="#").nav__link second

      .nav__popup
        ul.nav__popup-list
          li.nav__popup-item
            a(href="#").nav__popup-link second 1

    li(data-nav-id="_3").nav__item
      a(href="#").nav__link Third

      .nav__popup
        ul.nav__popup-list
          li.nav__popup-item
            a(href="#").nav__popup-link third 1

  a(href="#").nav-pane pane

  a.some-links link
  a.some-links link


Должно работать как данном примере: http://www.kentfa.com/

При первом нажатии на tab, первый элемент a или button принимает focus, после чего в default порядке происходит смена focus, но когда focus принимает .list__link, далее при нажатии на клавишу tab, focus переходит на .nav-pane(без фокуса он скрыт). Далее мы нажимаем на enter (space), фактически это событие click, и появляется .nav__item (с соответствуещей привязкой по data атрибутам), далее мы при нажатии на tab также меняем фокус по default порядку. Когда же будет последний элемент .list__item, мы в последний раз перейдем на .nav__popup, и далее вниз по a (button). И также важно, что default навигация, смена focus, при shift + tab, также корректно работает.
Ответить с цитированием
  #16 (permalink)  
Старый 21.07.2018, 15:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,812

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

Последний раз редактировалось рони, 21.07.2018 в 16:02.
Ответить с цитированием
  #17 (permalink)  
Старый 21.07.2018, 16:22
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 169

Если сказать проще.
http://www.kentfa.com/
В этом примере при загрузке страницы мы tab доходим до меню. Далее после каждого пункта переход на панель открытия. Можно сказать не стандартный tabindex.
Ответить с цитированием
  #18 (permalink)  
Старый 21.07.2018, 16:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,812

Сообщение от s24344
В этом примере при загрузке страницы мы tab доходим до меню.
ок понятно, вы пост №10 смотрели?
Ответить с цитированием
  #19 (permalink)  
Старый 21.07.2018, 19:37
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 169

Всё, разобрался, спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Native javascript css properties s24344 Элементы интерфейса 4 18.07.2018 12:04
Фильтрация коллекции (native javascript) s24344 Элементы интерфейса 2 13.07.2018 12:48
Интерпретатор Java на JS kobezzza Оффтопик 24 11.10.2012 18:32
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34