Question

我在JQM的面板元素上看到了很多主题，但是我没有看到任何相似之处，所以这就是问题。

我有不同的页面（具有不同的ID），每个页面都有自己的面板元素：

<!-- MAIN MENU -->
<div id="mainmenu" data-role="panel">
  <ul>
    <li class="home"><a href="index.html" class="active">Home</a></li>
    <li><a href="list.html">Happiness Diary</a></li>
    [...]
  </ul>
</div>
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>

swiperight事件绑定使用以下代码调用函数：

showMenu: function() {
  console.log("showmenu active page is: " + $.mobile.activePage.attr("id"));
  $.mobile.activePage.find('#mainmenu').panel("open");
},

现在，对于所有其他页面，导航正常，面板正常工作。我遇到的唯一问题是当我回到index.html（加载的第一个页面，标识为mainpage的页面）时。这很奇怪，因为我看到代码执行正确：showmenu active page is: mainpage，但面板未显示。

任何提示？

更新：为了测试，我创建了一个新的输入页面，因此index.html不再是第一个加载的页面。通过这种方式，index.html中的面板可以正常工作。它只是完全排除了与页面相关的一些意外行为。所以问题恰恰在于它是第一个加载的页面。

谢谢，洛伦佐

Answer 1

<强>更新

我创建了三个要测试的基本页面。这是页面的结构：

<div data-role="page" id="example_page_one" data-theme="b" data-content-theme="b">
    <div id="example_page_one_menu" data-role="panel">
        <ul>
            <li class="home"><a href="index.htm" class="active">Home</a></li>
            <li><a href="index.htm">Link 2</a></li>
        </ul>
    </div>
    <div data-role="header">Header Content</div>
    <div data-role="content">
        <p>This is the content for example page one!</p>
        <p><a href="javascript: showMenu();">Open the menu panel</a></p>
        <p>A link to <a href="sandbox_m2.php">example page two</a></p>
        <p>A link to <a href="sandbox_m3.php">example page three</a></p>
    </div>
    <div data-role="footer">Footer Content</div>
</div>

请注意，面板ID值与页面ID值相同，但附加了_menu。此命名方案由重新设计的showMenu函数预期（如下所示）。

第二页和第三页是相同的，除了页面和面板ID已更改，分别替换one two和three每页。（内容区域中的链接也会调整为指向其他两个示例页面。）

我在所有页面的<head>...</head>部分都有以下功能：

function showMenu(){
    console.log("showMenu active page is: " + $.mobile.activePage[0].id );
    $('#'+$.mobile.activePage[0].id+'_menu').panel("open");
}

您会在上面的代码中注意到.find('#mainmenu')不是必需的，因为我们可以通过它的唯一ID来定位面板。我还发现了一篇帖子，建议使用[0].id比.attr['id']更有效。

我只是在每个页面的内容区域中使用一个简单的链接来调用showMenu函数。你可以绑定你的滑动事件来调用showMenu函数，我只是这样做以保持简单。

无论如何，该面板在加载的第一页和后续页面上工作正常。如果您对每个页面中的所有面板使用相同的面板ID值，则您的问题不会澄清。我想指出我为每个面板使用不同的id值。

我在玩游戏时注意到的另一件事是，activePage有bug可用的时间<div>可能与您的问题有关，也可能没有。

原始答案

我注意到，放置在页面<div>部分中的JavaScript代码仅在第一页上加载/执行，以便在JQM站点中加载，而不会再次在同一会话中。但是，除了加载的第一个页面之外，任何其他页面的页面<div>部分中的任何JavaScript代码都将在每次执行时执行。

我不再将JavaScript代码放在页面pageshow中，而是根据我正在做的事情使用pageinit或<head>...</head>事件。

下面显示的示例代码在使用时会放在每个页面的<script> $(document).on("pageshow", "#specific_page_id", function() { // .. Do stuff *every time* the '#specific_page_id' is loaded/displayed }); $(document).on("pageshow", function() { // .. Do stuff *every time* ANY page is loaded/displayed }); $(document).on("pageinit", "#specific_page_id", function() { // .. Do stuff only when'#specific_page_id' is initially loaded // (will also fire if the specific page was previously loaded but it is no longer in the JQM cache) }); $(document).on("pageinit", function() { // .. Do stuff when any page is initially loaded // (Will not fire for previously loaded pages that are still in the JQM cache) }); </script>部分中（加载jQuery库之后和加载jquery-mobile库之前）：

{{1}}

第一页上的jquery移动面板仅在第一页上不起作用

1 个答案: