Переход к следующему или предыдущему тегу привязки (на мобильном телефоне) при нажатии кнопки - PullRequest
Новая
       42

Переход к следующему или предыдущему тегу привязки (на мобильном телефоне) при нажатии кнопки

0 голосов
/ 10 мая 2019

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

Я пытался реализовать эту функцию с помощью WayPoints (https://github.com/imakewebthings/waypoints), как показано в приведенном ниже коде, но кнопки «вверх» и «вниз» не работают должным образом (и вообще не обновляются на мобильном устройстве!))

Структура разделов формы: 

<div id="section-1" class="nav-section"></div>
<div id="section-2" class="nav-section"></div>
<div id="section-3" class="nav-section"></div>
...

И у меня есть две кнопки в нижней панели: 

<button id="jump-section-up"><a href="#">Up</a></button>
<button id="jump-section-down"><a href="#">Down</a></button>

Я получаю все необходимые мне элементыперейдите к использованию: 

  $(".nav-section").each(function(){
    sections.push(this.id);
  });

при первой загрузке документа.

Использование маршрутных точек 

waypoints = $(".nav-section").waypoint(function(direction){
//Clear the previous hash (if any)
history.pushState("", document.title, window.location.pathname + window.location.search);
var cur=0, prev=0, next=0,
cur = jQuery.inArray($(this.element).attr("id").toString(), sections);
if(cur>0){
  prev=cur-1;
}
else{
  prev=0;
}

if(cur==sections.length-1){
next=cur;
}
else{
  next=cur+1;
}

$("#jump-section-up a").attr("href",$(location).attr("href")+"#"+sections[prev]);
$("#jump-section-down a").attr("href",$(location).attr("href")+"#"+sections[next]);
}, offset=25);

Поскольку это запрос, связанный с мобильными устройствами, нажмите "TAB "не сработает. Я хотел бы знать, есть ли какие-нибудь умные или более интересные способы сделать это.

Кнопки« Вверх »и« Вниз »hrefs правильно обновляются на рабочем столе (смещение не работает, но href обновляется, и я могу правильно перемещаться вверх / вниз по разделам), но это не работает на мобильных устройствах. Любая помощь приветствуется. Спасибо!

...