第一頁上的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