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不会列为Horizontal。它将成为没有按钮样式的Vertical li。

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

Answer 1

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

 /* 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每页触发一次ONCE，如果您想在每次显示特定页面时更改 Navbar ，你需要利用 pageContainer 事件，例如pagecontainershow。这些事件也不会在特定的页面上发出，因此您需要检索 ActivePage 的ID。

请注意，您还需要注入＆＃34; fresh / new＆＃34; Navbar ，因为此小部件没有刷新方法。

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

页脚中的NavBar项目

1 个答案:

Widget的增强/手动初始化：