如何使用 OnClick 事件设置 Jquery Mobile 导航 [英] How to setup Jquery Mobile navigation using OnClick Events

问题描述

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

I am building a hybrid application out of Jquery Mobile, Cordova and WordPress. My current question is regarding my navigation between "pages" in index.html that have the data-role="page" attribute.

当前设置:我在 data-role="header" 中使用 data-role="navbar" 并且 EACH 页面有以下标题:

Current Setup: I am using data-role="navbar" inside data-role="header" and EACH page has the following 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 引用它们的独特元素:

main.js file I am trying to add event listeners to each of the navigation elements by class name and .ui-page-active class I am also bundling in a few other unique elements that have clickEvents but I reference them by ID:

函数 setupMainNav() {console.log("设置 SUB NAV");

function setupMainNav() { console.log("Settign Up 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 的第一页和具有这些 ID 的 #shop_link 元素当然只有这两个.

What I do is try to all the setupMainNav() function every-time a page changes using the .on('pagecreate') but only the first page that is loaded which has the #show_link and #shop_link elements with those ID's and of course those are the only two.

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

推荐答案

免责声明:这些是我认为的最佳实践"中的一些.其他人可能不同意；YMMV.这也是假设您不想使用像 Vue.js 或 React.js 这样的库或框架，它们通常会以完全不同的方式做事.根据具体情况，这些库既有优点也有缺点.

Disclaimer: these are a few of what I think of as "best practices." Others may disagree; YMMV. Also this is assuming you don't want to use libraries or frameworks like Vue.js or React.js, which in general will do things quite differently. Depending on circumstances these libraries can have both advantages and drawbacks.

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

But within those limits, the general idea is this:

• 保持事件处理程序的通用性，以便一个函数可以执行多项操作.
• 将链接之间不同的内容作为属性传递.这会将与活动相关的内容放在链接中.
• 我喜欢将事件侦听器附加到 DOM 中更高的位置，然后在事件冒泡时处理它们.在这种情况下，我们将事件附加到 ul 标签，并捕获从 a 标签冒出的任何 click 事件.恕我直言，这有几个优点:
  • 如果您改变列表，新链接将自动使用当前事件处理程序.
  • 您只有一个附加到 DOM 的事件处理程序，而不是 3 个(无论您有多少 a 标签)
  • 如果您想在默认操作之前(或代替)执行一些特殊操作，这也使您有机会直接将其他事件侦听器添加到特定的 a 标记.因为直接附加的事件首先发生，然后事件冒泡.如果您希望它发生而不是，您只需调用 e.stopPropagation() 来防止事件冒泡.
  • Keep the event handler generic, so that one function can do multiple things.
  • Pass in stuff that differs between links as attributes. This keeps things related to the activity together at the link.
  • I like to attach the event listener higher up in the DOM and then handle the events as they bubble. In this case we're attaching the event to the ul tag, and catching any click events that bubble up from a tags. IMHO this has a few advantages:
    • if you mutate the list, new links will automatically use the current event handler.
    • you only have one event handler attached to the DOM, instead of 3 (however many a tags you have)
    • this also gives you the chance to add other event listeners directly to specific a tags if you want to do something special before (or instead of) the default action. Because events attached directly happen first, and then the event bubbles. If you want it to happen instead of, you would just call e.stopPropagation() to prevent the event from bubbling.

    此外，我过去有时会做一个带有标题和导航栏的通用页面，然后通过 ajax 加载主要内容 div.这具有非常视觉上令人愉悦的效果，当您转到不同的页面时，导航栏保持不变，并且不会重新加载.如果 changePage 正在执行 XHR/fetch，然后将内容加载到主内容 div 中，您可以在下面的示例代码中轻松地做到这一点.

    Also what I've done sometimes in the past is to have a single generic page with header and navbar, and then load the main content div via ajax. This has the very visually pleasing effect that when you go to a different page the navbar stays put, and doesn't reload. You could easily do this in the example code below, if changePage was doing an XHR/fetch, and then loading the contents into a main content div.

    在这个大大简化的示例中，我展示了如何使用 href、innerText 和 data 属性根据点击的链接执行不同的操作.当然，您可以在这方面做尽可能多(或尽可能少)的工作.

    In this greatly simplified example, I show how we can use the href, innerText, and a data attribute to do different things depending on which link is clicked. Of course you can do as much (or as little) as you want/need in this regard.

    $('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 导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！