Question

我正在用Jquery Mobile，Cordova和WordPress构建一个混合应用程序。我当前的问题是关于我在index.html中具有data-role="page"属性的“页面”之间的导航。

当前设置：我在data-role="navbar"内使用data-role="header"，并且每个页面具有以下标题：

 <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文件，我试图通过类名和.ui-page-active类将事件侦听器添加到每个导航元素中，我还捆绑了其他一些具有clickEvents的独特元素，但我通过ID引用了它们：

function setupMainNav（）{ 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"
    });

});


}

我要做的是，每次使用.on('pagecreate')更改页面时，都尝试使用所有setupMainNav（）函数，但仅加载的第一页具有#show_link和#shop_link元素以及这些ID和当然，那是仅有的两个。

设置通过JS（而不是<a href>

）控制的导航的最佳做法是什么？

Answer 1

免责声明：以下是我认为的“最佳实践”。其他人可能不同意； YMMV。这也是假设您不想使用像Vue.js或React.js这样的库或框架，它们通常会在功能上大相径庭。这些库根据情况可能既有优点也有缺点。

但是在这些限制内，总体思路是这样的：

保持事件处理程序的通用性，以便一个函数可以执行多项操作。
将链接之间不同的内容作为属性传递。这样会将与活动相关的内容放在链接中。
我喜欢将事件侦听器附加到DOM中的更高位置，然后在事件冒泡时对其进行处理。在这种情况下，我们会将事件附加到ul标记，并捕获从click标记冒起的所有a事件。恕我直言，这有一些优点：
- 如果您更改列表，则新链接将自动使用当前事件处理程序。
- 您只有一个附加到DOM的事件处理程序，而不是3（但是您拥有许多a标签）
- 如果您想在默认操作之前（或代替默认操作）执行特殊操作，这还使您有机会将其他事件侦听器直接添加到特定的a标签。因为直接发生的事件直接发生，然后事件冒泡。如果您不希望发生这种情况，则只需致电e.stopPropagation()以防止该事件冒泡。

此外，我过去有时要做的就是创建一个带有标题和导航栏的通用页面，然后通过ajax加载主要内容div。这具有非常视觉上令人愉悦的效果，当您转到其他页面时，导航栏保持放置状态，并且不会重新加载。如果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>

如何使用OnClick事件设置Jquery Mobile导航

1 个答案: