changePage標籤無法正常工作

我是jquery mobile的新手。我有兩頁是page1.html和page2.html。 page1將導航到page2，page2裏面有一個導航欄。changePage標籤無法正常工作

這裏是我的代碼 page1.html導航到第2頁

$.mobile.pageContainer.pagecontainer("change", "page2.html", { 
    allowSamePageTransition: true, 
    transition: 'none', 
    showLoadMsg: false, 
    reloadPage: false, 
    changeHash: true 

})

page2.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <title>collapsible demo</title> 
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
</head> 
<body> 

    <div data-role="page" id="page1"> 
     <div data-role="header"> 
      <h1>jQuery Mobile Example</h1> 
     </div> 
     <div data-role="content" class="ui-content"> 
      <div data-role="tabs"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#fragment-1">One</a></li> 
         <li><a href="#fragment-2">Two</a></li> 
         <li><a href="#fragment-3">Three</a></li> 
        </ul> 
       </div> 
       <div id="fragment-1"> 
        <p>This is the content of the tab 'One', with the id fragment-1.</p> 
       </div> 
       <div id="fragment-2"> 
        <p>This is the content of the tab 'Two', with the id fragment-2.</p> 
       </div> 
       <div id="fragment-3"> 
        <p>This is the content of the tab 'Three', with the id fragment-3.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

它可以工作，如果我跑第2頁獨立。但是一旦我將頁面從頁面1更改爲頁面2，問題就來了。請不要回復我補充rel="external"它可以一次使用我的rel =「外部」

來源

2014-05-14 user998405

這是一個已知jQuery Mobile的1.4的bug，這將是固定在jQuery Mobile的版本1.4.3導致白屏的問題。

瞭解更多關於在這裏：https://github.com/jquery/jquery-mobile/issues/7169

在那裏，你還可以找到一個解決辦法。

還有另一個解決方案，它需要你動態地創建標籤控件，這樣的事情：

$(document).on("pagecreate", "#p2", function() { 
    var tabs = '<div data-role="tabs" id="tbPaymentMethod"><div data-role="navbar"><ul><li><a href="#tabCash">Tab 1</a></li><li><a href="#tabCcard">Tab 2</a></li><li><a href="#tabCheck">Tab 3</a></li></ul></div><div id="tabCash"><p>This is the content of the tabwith the id fragment-1.</p></div><div id="tabCcard"><p>This is the content of the tabwith the id fragment-2.</p></div><div id="tabCheck"><p>This is the content of the tabwith the id fragment-3.</p></div></div>'; 
    $("#p2 .ui-content").append(tabs).enhanceWithin(); 
});

工作例如：http://jsfiddle.net/Gajotres/JAuwV/

來源

2014-05-14 17:56:48 Gajotres

感謝。你真的幫助我很多 – user998405

changePage標籤無法正常工作

回答

相關問題