jquery移動面板在多頁面模板中的頁面之間導航後停止工作

在通過面板導航離開第一頁後，jQuery移動應用程序中的多頁面模板設置。當通過另一種導航方式返回到第一頁時，面板看起來「掛起」。jquery移動面板在多頁面模板中的頁面之間導航後停止工作

仔細觀察，您可以看到隱藏面板左側的一個小陰影。顯示面板的按鈕不再有效。

下面是一個複製問題的演示。

<!DOCTYPE html><html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 

    <title>Panel Issue Demo</title> 


    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"> 

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> 
</head> 
<body> 

    <div data-role="page" id="one"> 
     <div data-role="header" data-position="fixed"> 
      <h1>One</h1> 
      <a href="#one-menu" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a> 
     </div> 

     <div role="main" class="ui-content"> 
     </div> 

     <div data-role="panel" data-position="left" data-display="overlay" data-theme="a" id="one-menu"> 
      <ul class="ui-listview ui-alt-icon ui-nodisc-icon" data-role="listview"> 
       <li><a href="#two" data-ajax="false">Two</a></li> 
      </ul> 
     </div> 
    </div> 

    <div data-role="page" id="two"> 
     <div data-role="header" data-position="fixed"> 
      <h1>Two</h1> 
     </div> 

     <div role="main" class="ui-content"> 
      <a href="#one" data-ajax="false">One</a> 
     </div> 
    </div> 
</body>

複製的步驟很簡單：

打開面板，然後單擊「兩課」
點擊「一」
面板現在打破。

有誰知道可能是什麼原因造成的？

小提琴：http://jsfiddle.net/jVzNk/

來源

2014-01-22 maz

刪除'數據阿賈克斯= 「假」'從鏈接，如果你想JQM在頁面之間進行導航正常工作。 http://jsfiddle.net/Palestinian/jVzNk/1/show/ – Omar

爲div＃單一菜單添加data-animate =「false」。這將禁用菜單上的動畫並且您的bug消失。這似乎是由於在顯示面板二時由於某種原因沒有調用關閉動畫的完整回調引起的。這可能應該作爲GitHub上的問題提交。 – Matt

@Matt他導航到禁用ajax的頁面，使得Ajax能夠解決問題，就像我在第一條評論中的演示一樣。 JQM基於Ajax導航。 – Omar

jQuery Mobile的基於Ajax的導航在頁面之間切換和加載新的頁面。當您將頁面鏈接到data-ajax="false"時，您將禁用Ajax導航並在該頁面內跳轉/跳轉到該div，作爲內部 div。

要在jQuery Mobile中的頁面之間進行鏈接，Ajax導航應爲已啓用。

<div data-role="page"> 
    <a href="#step3" data-ajax="false">Step 3</a> 

    <div id="step1"> 
    <!-- content --> 
    </div> 

    <div id="step2"> 
    <!-- content --> 
    </div> 

    <div id="step3"> 
    <!-- You jump to this div --> 
    </div> 
</div>

它可以使用這JQM但不改變多頁模型頁。另外，當你想通過HTTP正常加載頁面而不是Ajax，並且當你想提交表格時，使用data-ajax="false"。

Demo

來源

2014-01-23 09:30:55 Omar

jquery移動面板在多頁面模板中的頁面之間導航後停止工作

回答

相關問題