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

问题描述

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

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"，并且每个页面具有以下标题:

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:

function 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()函数，但仅加载的第一页中包含具有这些ID的#show_link和#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>

What are best practices for setting up navigation that is controlled via the JS and not the <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屋！