Как настроить Jquery Мобильная навигация с помощью OnClick Events - PullRequest
Новая
       27

Как настроить Jquery Мобильная навигация с помощью OnClick Events

0 голосов
/ 30 января 2020

Я создаю гибридное приложение из Jquery Mobile, Cordova и WordPress. Мой текущий вопрос касается моего перехода между "страницами" в индексе. html, которые имеют атрибут data-role="page".

Текущая настройка: я использую data-role="navbar" внутри data-role="header" и EACH Страница имеет следующий заголовок: 

 <div data-role="navbar">
                <ul>
                    <li><a class="blue-button home-button" href="#" data-transition="slidefade">HOME</a></li>
                    <li><a class="blue-button artist-refresh artist-button" href="#" data-transition="slidefade">ARTIST</a></li>
                    <li><a class="blue-button show-button" href="#" data-transition="slidefade">SHOW INFO</a></li>
                </ul>
            </div><!-- /navbar -->

main. js file I пытаясь добавить прослушиватели событий к каждому из элементов навигации по имени класса и классу .ui-page-active () {console.log ("Установить SUB NAV"); 

$('.ui-page-active .show-button').on('click', function () {
    console.log("In the show info click");
    $.mobile.changePage("#show-info", {
        transition: "slide"
    });
});


$('.ui-page-active .home-button').on('click', function () {
    console.log("In the show info click");
    $.mobile.changePage("#home", {
        transition: "slide"
    });
});


$('#artistContactButton').on('click', function () {
    console.log("Show Contact Form");
    $.mobile.changePage("#artist-contactpage", {
        transition: "slide"
    });
});


$('div.ui-page-active a.artist-button').on('click', function () {
    console.log("artist button click");
    $.mobile.changePage("#cyan-home", {
        transition: "slide"
    });

});

$('#show_link').on('click', function () {
    $.mobile.changePage("#cyan-home", {
        transition: "slide"
    });

});

$('#shop_link').on('click', function () {
    $.mobile.changePage("#shop-home", {
        transition: "slide"
    });

});


}

Я пытаюсь использовать все функции setupMainNav () каждый раз, когда страница изменяется с помощью .on('pagecreate'), но только первая загруженная страница, которая имеет элементы #show_link и #shop_link с этими идентификаторами и, конечно, это только две.

Каковы оптимальные методы настройки навигации, управляемой с помощью JS, а не <a href>

1 Ответ

1 голос
/ 31 января 2020

Отказ от ответственности: это несколько из того, что я считаю «наилучшей практикой». Другие могут не согласиться; YMMV. Также предполагается, что вы не хотите использовать библиотеки или фреймворки, такие как Vue. js или React. js, которые в целом будут действовать совсем иначе. В зависимости от обстоятельств у этих библиотек могут быть как преимущества, так и недостатки.

Но в этих пределах общая идея такова:

  • Держите обработчик событий generi c, чтобы Функция может делать несколько вещей.
  • Передавать вещи, которые отличаются между ссылками в качестве атрибутов. Это связывает вещи, связанные с деятельностью, по ссылке.
  • Мне нравится прикреплять прослушиватель событий выше в DOM, а затем обрабатывать события по мере их появления. В этом случае мы присоединяем событие к тегу ul и отлавливаем любые события click, всплывающие из тегов a. ИМХО, у этого есть несколько преимуществ:
    • если вы изменяете список, новые ссылки будут автоматически использовать текущий обработчик событий.
    • у вас есть только один обработчик событий, подключенный к DOM, вместо 3 ( сколько бы у вас не было тегов a
    • это также дает вам возможность добавлять других слушателей событий непосредственно в указанные теги c a, если вы хотите сделать что-то особенное до (или вместо) действие по умолчанию. Потому что события, прикрепленные напрямую, сначала происходят, а затем всплывают. Если вы хотите, чтобы это произошло вместо, вы просто позвоните e.stopPropagation(), чтобы предотвратить всплытие события.

Кроме того, что я делал в прошлом, так это иметь одну общую страницу c с заголовком и панелью навигации, а затем загрузить основной контент div через ajax. Это имеет очень приятный визуальный эффект: когда вы go переходите на другую страницу, панель навигации остается на месте и не перезагружается. Вы можете легко сделать это в приведенном ниже примере кода, если changePage выполнял XHR / fetch, а затем загружал содержимое в основное содержимое div.

В этом очень упрощенном примере я показываю, как мы можем используйте href, innerText и атрибут data, чтобы делать разные вещи в зависимости от того, какая ссылка нажата. Конечно, вы можете сделать столько (или меньше), сколько захотите / нуждаетесь в этом отношении. 

$('ul.navbar').on('click', 'a', function(e) {
  var t = e.target;
  var info = t.dataset.info || '';
  console.log("click " + t.innerText + ' ' + info);
  $.mobile.changePage(t.href, {
    transition: "slide"
  });
  e.preventDefault();
  return false;
});

// stub of $.mobile.changePage
$.mobile = {
  changePage: function(href, opts) {
    console.log('changePage', href);
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class='navbar'>
  <li><a href="#home" data-info="let's go home!">HOME</a></li>
  <li><a href="#artist">ARTIST</a></li>
  <li><a href="#info">SHOW INFO</a></li>
</ul>
...