javascript - 页脚中的导航栏项目

Question

我有一个问题需要帮助。

我的 jquery 移动页面，如果我将 Navbar 内容静态放入页面:

<div data-role="footer">        
    <div id='footerButton' data-role="navbar">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

导航栏按钮很好地显示水平按钮并自动等于每个按钮的宽度。

但是如果我将 Navbar DIV 留空并动态插入 UL 和 LI:

$('#userMainPage').on('pagebeforecreate', function() {
    $('#footerButton').html('<ul><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li></ul>');
});

使用上面的代码，Item 将不会列为 Horizo​​ntal。如果没有按钮样式，它将变成 Vertical li。

我可以知道动态插入内容的代码有什么问题吗？请指教，谢谢。

Answer 1

pagebeforecreate 事件不会在页面 上触发，它会在文档 上触发。因此，您无法将其绑定(bind)到特定页面。

 /* has no effect on #pageID */
$("#pageID").on("pagebeforecreate", function (event)
$(document).on("pagebeforecreate", "#pageID", function (event)

/* to know which page is going to be created */
$(document).on("pagebeforecreate", function (event) {
  console.log(event.target);
});

/* this works, but you'll need to enhance dynamically added elements manually */
$(document).on("pagecreate", "#pageID", function (event) {
  /* do something */
  $("footer").append( $("<div data-role='navbar'></div>").navbar() );
});

鉴于上述情况，如果您想根据正在创建的页面在pagebeforecreate 事件上执行某些操作:

$(document).on("pagebeforecreate", function (event) {
  var page = event.target.id;
  if(page == "pageID") {
    /* do something */
  }
});

Demo

---

但是，由于 pagecreate 和 pagebeforecreate 每页触发一次，如果您想每次更改Navbar 特定 页面显示时，您需要利用 pageContainer 事件，例如页面容器显示。这些事件也不会在特定 页面上发出，因此您需要检索ActivePage 的 ID。

请注意，您还需要注入(inject)“新鲜/新”导航栏，因为此小部件没有刷新方法。

$(document).on('pagecontainershow', function (event) {
  /* retrieve ID of active page */
  var page = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
  if (page == "page1") {
    $('[data-role=footer]').html($("<div id='footerButton' data-role='navbar'><ul><li><a href='#'>One</a></li><li><a href='#'>Two</a></li><li><a href='#'>Three</a></li></ul></div>").navbar());
  } else {
    $('[data-role=footer]').html($("<div id='footerButton' data-role='navbar'><ul><li><a href='#'>Four</a></li><li><a href='#'>Five</a></li><li><a href='#'>Six</a></li></ul></div>").navbar());
  }
});

Demo

---

Widget的增强/手动初始化:

.navbar() 是动态注入(inject)时 data-role="navbar" 的增强方法。静态元素，例如Navbar 在 jQM 框架首次初始化时或通过 Ajax 检索时自动初始化。但是，当元素被动态注入(inject)时，它们需要手动初始化，.navbar() 用于Navbar 小部件。