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

Question

I've seen a lot of topics on the panel element of JQM, but I don't see anything similar so here's the question. 我在JQM的面板元素上看到了很多主题，但是我没有看到类似的东西，所以这就是问题所在。

I have different pages (with different ids), each with its own panel element: 我有不同的页面（具有不同的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>

And the swiperight event bound to call the a function with the following code: 并且swiperight事件绑定使用以下代码调用函数：

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

Now, for all the other pages the navigation is OK and the panel works without problems. 现在，对于所有其他页面，导航正常，面板可以正常工作。 The only problem I have is when I go back to index.html (the first page loaded, page with id mainpage ). 我唯一的问题是，当我回去的index.html（加载的第一页，页面ID mainpage ）。 It's strange because I see the code executed correctly: showmenu active page is: mainpage , but the panel is not shown. 这很奇怪，因为我看到代码执行正确： showmenu active page is: mainpage ，但面板没有显示。

Any hints? 任何提示？

UPDATE: Just to test, I've created a new entry page, so index.html is not anymore the first page loaded. 更新：为了测试，我创建了一个新的入口页面，因此index.html不再是第一个加载的页面。 In this way the panel in index.html works correctly. 通过这种方式，index.html中的面板可以正常工作。 It was just to completely exclude some unexpected behaviors related to the page. 它只是完全排除了与页面相关的一些意外行为。 So the problem is exactly that it's the first page loaded. 所以问题恰恰在于它是第一个加载的页面。

Thanks, Lorenzo 谢谢，洛伦佐

Answer 1

Update 更新

I created three basic pages to test with. 我创建了三个基本页面来测试。 This is the structure of the pages: 这是页面的结构：

<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>

Notice that the panel id value is the same as the page id value but has _menu appended. 请注意，面板ID值与页面ID值相同，但附加了_menu 。 This naming scheme is expected by the reworked showMenu function (shown further below). 这种命名方案由重新设计的showMenu函数预期（如下所示）。

Pages two and three are the same except the page and panel id's are changed replacing one for two and three respectively for each page. 第2页和第3页是相同的，除了页面和面板ID被更改，分别替换每页的one ， two和three 。 (The links in the content area are adjusted to point to the other two example pages as well.) （内容区域中的链接也会调整为指向其他两个示例页面。）

I have the following function in the <head>...</head> section of all pages: 我在所有页面的<head>...</head>部分都有以下功能：

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

You'll notice in the code above that .find('#mainmenu') is not necessary, because we are able to target the panel by it's unique id. 您将在上面的代码中注意到.find('#mainmenu')不是必需的，因为我们能够通过它的唯一ID来定位面板。 I also found a post that suggested the use of [0].id as being more efficient than .attr['id'] . 我还发现一篇帖子建议使用[0].id比.attr['id']更有效。

I just use a simple link in the content area of each page to call the showMenu function. 我只是在每个页面的内容区域使用一个简单的链接来调用showMenu函数。 You can bind your swipe event to call the showMenu function, I just did it this way to keep things simple. 你可以绑定你的滑动事件来调用showMenu函数，我只是这样做以保持简单。

Anyway, the panel works fine on the first page loaded and subsequent pages. 无论如何，面板在加载的第一页和后续页面上工作正常。 Your question doesn't clarify if you are using the same panel id value for all panels in each page or not. 如果您对每个页面中的所有面板使用相同的面板ID值，则您的问题不会澄清。 I do want to point out that I am using different id values for each panel. 我想指出我为每个面板使用不同的id值。

The other thing I noticed while playing around is that there is a bug as to when activePage is available which may or may not be related to your issue. 我在玩游戏时注意到的另一件事是，当activePage可用时有一个错误，可能与你的问题有关，也可能没有。

Original Answer 原始答案

I have noticed that JavaScript code placed in a page <div> section is only loaded/executed ONCE EVER for the first page that is loaded in a JQM site and never again within the same session. 我注意到，放置在页面<div>部分中的JavaScript代码仅在第一页上加载/执行，对于在JQM站点中加载的第一页，并且永远不再在同一会话中。 However, any JavaScript code in the page <div> section for any other page EXCEPT the first one loaded will execute every time. 但是，除了加载的第一个页面之外，任何其他页面的页面<div>部分中的任何JavaScript代码都将每次执行。

I don't put JavaScript code in the page <div> anymore and instead use the pageshow or pageinit events depending on what I am doing. 我不再将JavaScript代码放在页面<div> ，而是根据我正在做的事情使用pageshow或pageinit事件。

The following shows example code that, when used, would be placed in the <head>...</head> section of every page (AFTER the jQuery library is loaded and BEFORE the jquery-mobile library is loaded): 下面显示的示例代码在使用时会放在每个页面的<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