页脚中的导航栏项目

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>');
});

使用上面的代码，项目不会被列为水平。它会变成没有按钮样式的 Vertical li。

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

Answer 1

pagebeforecreate 事件不会在 page 上发出，它会在 document 上发出。因此，您无法将其绑定到特定页面。

 /* 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 事件，例如pagecontainershow。这些事件也不会在 特定 页面上发出，因此您需要检索 ActivePage 的 id。

请注意，您还需要注入“fresh/new”Navbar，因为此小部件没有 refresh 方法。

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