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

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（加载的第一页，页面ID 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函数预期（如下所示）。

第2页和第3页是相同的，除了页面和面板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可用时有一个错误，可能与你的问题有关，也可能没有。

原始答案

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

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

下面显示的示例代码在使用时会放在每个页面的<head>...</head>部分中（在加载jQuery库之后和加载jquery-mobile库之前）：

<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移动面板仅在第一页上不起作用

问题描述

1 个解决方案

解决方案1
1 2013-08-27 18:49:41

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

问题描述

1 个解决方案

解决方案1 1 2013-08-27 18:49:41

解决方案1
1 2013-08-27 18:49:41