jQuery移动面板只在第一页上不能第一次工作 [英] jquery mobile panel ONLY on the first page doesn't work after first time

问题描述

我在JQM的面板元素上看到了很多主题，但我没有看到类似的东西，所以这里的问题。

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

 <！ -  MAIN MENU  - > 
< div id =mainmenudata-role =panel> 
< ul> 
< li class =home>< a href =index.htmlclass =active>首页< / 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 ：+ $ .mobile.activePage.attr（id））; 
 $ .mobile.activePage.find（'＃mainmenu'）。panel（open）; 
}，
  

现在，对于所有其他页面，导航是确定的，没有问题。
我唯一的问题是当我回到index.html（加载的第一页，id mainpage ）。
奇怪，因为我看到代码执行正确： showmenu活动页是：mainpage ，但面板不显示。

任何提示？

更新：为了测试，我创建了一个新的条目页面，不再是第一页加载。这样，index.html中的面板工作正常。它只是为了完全排除与页面相关的一些意外行为。所以问题正是它的第一页加载。

感谢您，
Lorenzo

解决方案

更新

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

 < div data-role =pageid =example_page_onedata-theme =bdata-content-theme =b> 
< div id =example_page_one_menudata-role =panel> 
< ul> 
< li class =home>< a href =index.htmclass =active>首页< / a>< / li& 
< li>< a href =index.htm>链接2< / a>< / li& 
< / ul> 
< / div> 
< div data-role =header>标题内容< / div> 
< div data-role =content> 
< p>这是第一页的内容！< / p> 
< p>< a href =javascript：showMenu（）;>打开菜单面板< / a>< / p& 
< p>指向< a href =sandbox_m2.php>示例页面2的链接< / a>< / p> 
< p>指向< a href =sandbox_m3.php>示例页面3的链接< / a>< / p& 
< / div> 
< div data-role =footer>页脚内容< / div> 
< / div> 
  

请注意，面板ID值与页面ID值相同，但 _menu 追加。这个命名方案被重做的 showMenu 函数（如下所示）所预期。

第二页和第三页是除了页面和面板ID更改为替换两个和三。 （内容区域中的链接也被调整为指向其他两个示例页面。）

我在< ; 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代码都将执行。

我不再在页面< div> 中添加JavaScript代码，而是使用 pageshow 或 pageinit 事件。

下面显示的示例代码，放置在每个页面的< head> ...< / head> 部分（在加载jQuery库之后，加载jquery-移动库之前） ：

 < script> 
 $（document）.on（pageshow，#specific_page_id，function（）{
 // ..每次都做的东西*'#specific_page_id'加载/显示
}）; 
 $（document）.on（pageshow，function（）{
 // .. Do stuff *每次*任何页面加载/显示
} 
 $（document）.on（pageinit，#specific_page_id，function（）{
 // ..只有当'＃specific_page_id'最初加载时才执行
 //也会触发，如果特定页面以前加载，但它不再在JQM缓存）
}）; 
 $（document）.on（pageinit，function（）{
 // ..当任何页面最初加载时做任何操作
 //仍然在JQM缓存中）
}）; 
< / script> 
  

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.

I have different pages (with different ids), each with its own panel element:

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

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). It's strange because I see the code executed correctly: showmenu active page is: mainpage, but the panel is not shown.

Any hints?

UPDATE: Just to test, I've created a new entry page, so index.html is not anymore the first page loaded. In this way the panel in index.html works correctly. 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

解决方案

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. This naming scheme is expected by the reworked showMenu function (shown further below).

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. (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:

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. I also found a post that suggested the use of [0].id as being more efficient than .attr['id'].

I just use a simple link in the content area of each page to call the showMenu function. You can bind your swipe event to call the showMenu function, I just did it this way to keep things simple.

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. I do want to point out that I am using different id values for each panel.

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.

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. However, any JavaScript code in the page <div> section for any other page EXCEPT the first one loaded will execute every time.

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.

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

<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移动面板只在第一页上不能第一次工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！