JQMobile負載頁面JS

我有一個簡單的index.html有兩頁......JQMobile負載頁面JS

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> 
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 

<div data-role="page" id="page1"> 
    <div></div> 
</div> 

<div data-role="page" id="page2"> 
    <div></div> 
</div> 
</body> 
</html>

第1頁上有一個按鈕。而當用戶點擊，我調用JS功能。

function openPage2() { 
}

該函數應該加載page2。怎麼做？

我試圖

$.mobile.changePage("page2.html");

，但它不工作，我確實錯了呢？

來源

2013-06-04 Jim

'$ .mobile.changePage（「＃第2頁」）;' – Omar

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

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>  
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
</head> 
<body> 
    <div data-role="page" id="page1"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
       First Page 
      </h3> 
     </div> 

     <div data-role="content"> 
      <a href="" data-role="button" id="next-page">Next</a> 
     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div> 
    <div data-role="page" id="page2"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
       Second Page 
      </h3> 
      <a href="#index" class="ui-btn-left">Back</a> 
     </div> 

     <div data-role="content"> 

     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div>  
</body> 
</html>

的Javascript：

$(document).on('pagebeforeshow', '#page1', function(){  
    $(document).on('click', '#next-page', function(){  
     $.mobile.changePage("#page2"); 
    });   
});

來源

2013-06-04 14:27:11 Gajotres

JQMobile負載頁面JS

回答

相關問題