問題描述

我正在用 Jquery Mobile、Cordova 和 WordPress 構(gòu)建一個混合應(yīng)用程序.我目前的問題是關(guān)于我在 index.html 中具有 data-role="page" 屬性的頁面"之間的導(dǎo)航.

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.

當(dāng)前設(shè)置:我在 data-role="header" 中使用 data-role="navbar" 并且 EACH 頁面有以下標(biāo)題:

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 類向每個導(dǎo)航元素添加事件偵聽器 我還捆綁了其他一些具有 clickEvents 但我通過 ID 引用它們的獨(dú)特元素:

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:

函數(shù) setupMainNav() {console.log("設(shè)置 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() 函數(shù)，但只加載具有#show_link 的第一頁和具有這些 ID 的 #shop_link 元素當(dāng)然只有這兩個.

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.

設(shè)置通過 JS 而不是 <a href>

推薦答案

免責(zé)聲明:這些是我認(rèn)為的最佳實(shí)踐"中的一些.其他人可能不同意；YMMV.這也是假設(shè)您不想使用像 Vue.js 或 React.js 這樣的庫或框架，它們通常會以完全不同的方式做事.根據(jù)具體情況，這些庫既有優(yōu)點(diǎn)也有缺點(diǎn).

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.

但在這些限制內(nèi)，總體思路是這樣的:

But within those limits, the general idea is this:

• 保持事件處理程序的通用性，以便一個函數(shù)可以執(zhí)行多項(xiàng)操作.
• 將鏈接之間不同的內(nèi)容作為屬性傳遞.這會將與活動相關(guān)的內(nèi)容放在鏈接中.
• 我喜歡將事件偵聽器附加到 DOM 中更高的位置，然后在事件冒泡時處理它們.在這種情況下，我們將事件附加到 ul 標(biāo)簽，并捕獲從 a 標(biāo)簽冒出的任何 click 事件.恕我直言，這有幾個優(yōu)點(diǎn):
  • 如果您改變列表，新鏈接將自動使用當(dāng)前事件處理程序.
  • 您只有一個附加到 DOM 的事件處理程序，而不是 3 個(無論您有多少 a 標(biāo)簽)
  • 如果您想在默認(rèn)操作之前(或代替)執(zhí)行一些特殊操作，這也使您有機(jī)會直接將其他事件偵聽器添加到特定的 a 標(biāo)記.因?yàn)橹苯痈郊拥氖录紫劝l(fā)生，然后事件冒泡.如果您希望它發(fā)生而不是，您只需調(diào)用 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.

    此外，我過去有時會做一個帶有標(biāo)題和導(dǎo)航欄的通用頁面，然后通過 ajax 加載主要內(nèi)容 div.這具有非常視覺上令人愉悅的效果，當(dāng)您轉(zhuǎn)到不同的頁面時，導(dǎo)航欄保持不變，并且不會重新加載.如果 changePage 正在執(zhí)行 XHR/fetch，然后將內(nèi)容加載到主內(nèi)容 div 中，您可以在下面的示例代碼中輕松地做到這一點(diǎn).

    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 屬性根據(jù)點(diǎn)擊的鏈接執(zhí)行不同的操作.當(dāng)然，您可以在這方面做盡可能多(或盡可能少)的工作.

    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>

    這篇關(guān)于如何使用 OnClick 事件設(shè)置 Jquery Mobile 導(dǎo)航的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！

    【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請聯(lián)系我們刪除處理，感謝您的支持！