使用PhoneGap＆JQuery Mobile進入下一頁

我不知道我錯過了什麼，但事情是我想對我的「添加」按鈕有一個操作，以便它可以進入下一頁「page2」。使用PhoneGap＆JQuery Mobile進入下一頁

同樣會用「顯示」和「取消」按鈕去上一頁和下一頁。在我的PhoneGap應用程序中，我有一個index.html和一個index.js文件，沒有page2.html等等。

有人可以幫我&解釋它是如何完成的。

謝謝。

<!DOCTYPE html> 

<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 

    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    <title>Last Time I Did It!</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="lib/jquery-1.6.4.js"></script> 
    <script src="lib/jquery.mobile-1.1.0.js"></script> 
    <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet"> 
    <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet"> 
</head> 
<body> 
    <div data-role="page" id="page1"> 
     <div data-role="content"></div> 
     <div data-role="footer"> 
      <h1>Footer</h1> 
      <div data-role="navbar"> 
       <ul> 
        <li> 
         <a data-role="button" onclick="addEvent" id="add" data-rel="page">ADD</a> 
        </li> 
        <li> 
         <a data-role="button" id="show" data-rel="page">SHOW</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div data-role="page" id="page2"> 
     <div data-role="content"> 
      <textarea></textarea> 
     </div> 
     <div data-role="footer"> 
      <h1>Footer</h1> 
      <div data-role="navbar"> 
       <ul> 
        <li> 
         <a data-role="button" id="save">SAVE</a> 
        </li> 
        <li> 
         <a data-role="button" id="cancel" data-rel="page">CANCEL</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div data-role="page" id="page3"> 
     <div data-role="content"> 
      <ol data-role="listview" id="orderedList" data-inset="true"></ol> 
     </div> 
     <div data-role="footer"> 
      <h1>Footer</h1> 
      <div data-role="navbar"> 
       <ul> 
        <li> 
         <a data-role="button" id="edit">EDIT</a> 
        </li> 
        <li> 
         <a data-role="button" id="delete">DELETE</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript" src="phonegap.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body> 
</html>

這是我index.js文件：

function addEvent() 
{ 
window.location = "page2.html"; 
}

來源

2014-01-09 DMT82

添加以下在你的身體標記代碼。

<div data-role="page" id="page1"> 
    <div data-role="header">    
     <h1>Page 1</h1> 
    </div> 
    <div data-role="content"></div> 
    <div data-role="footer"> 
     <h1>Footer</h1> 
     <div data-role="navbar"> 
      <ul> 
       <li> 
        <a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a> 
       </li> 
       <li> 
        <a data-role="button" href="#page2" data-transition="slide" id="show" data-rel="page">SHOW</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div data-role="page" id="page2"> 
    <div data-role="header">    
     <h1>Page 2</h1> 
    </div> 
    <div data-role="content"> 
     <textarea></textarea> 
    </div> 
    <div data-role="footer"> 
     <h1>Footer</h1> 
     <div data-role="navbar"> 
      <ul> 
       <li> 
        <a data-role="button" href="#page3" data-transition="slide" id="save">SAVE</a> 
       </li> 
       <li> 
        <a data-role="button" href="#page1" id="cancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div data-role="page" id="page3"> 
    <div data-role="header"> 
     <a href="#page2" class="ui-btn-left" data-rel="back" data-transition="slide">Back</a> 
     <h1>Page 3</h1> 
    </div> 
    <div data-role="content"> 
     <ol data-role="listview" id="orderedList" data-inset="true"></ol> 
    </div> 
    <div data-role="footer"> 
     <h1>Footer</h1> 
     <div data-role="navbar"> 
      <ul> 
       <li> 
        <a data-role="button" id="edit">EDIT</a> 
       </li> 
       <li> 
        <a data-role="button" id="delete">DELETE</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div>

來源

2014-01-09 14:19:11 Ved

謝謝你，Ved，現在可以將此代碼添加到我的身上。 :) – DMT82

-1

嘗試

window.location.href = "page2.html"

，但你怎麼能指望進入PAGE2如果沒有page2.html？

來源

2014-01-09 13:40:29 dan

我用JQuery Mobile製作了3頁「https://01.org/rib/online/」，我只用了一個index.html。我應該製作page2.html＆page3.html並將div放在每個html文件中？ – DMT82

希望這的jsfiddle可以幫助你JSFiDDLE

爲了更好地理解你可以在這裏閱讀過jQuery Mobile navigate or changePage?

<div data-role="page" id="index"> 
     <div data-theme="b" data-role="header"> 
      <h1>Index page</h1> 
     </div> 

     <div data-role="content"> 
      <a data-role="button" id="navigateButton">Navigate to the other page</a> 
     </div> 
    </div> 
    <div data-role="page" id="second"> 
     <div data-theme="b" data-role="header"> 
      <h1>Second page</h1> 
     </div> 

     <div data-role="content"> 

     </div> 
    </div> 

    $(document).on('pagebeforeshow', '#index', function(){ 
     $(document).on('click', '#navigateButton', function(){   
     $.mobile.navigate("#second", { transition : "slide", info: "info about the #bar hash" }); 
     }); 
    });

來源

2014-01-09 14:13:15

我建議增加一個事件監聽器到調用changepage事件的元素。這幫助我提升了用戶體驗，因爲它的啓動速度比主播快。

$(document).on('tap', '#add', function(e){ 
    $.mobile.changePage('#page2'); 
});

來源

2014-01-10 00:33:05 FlyingLemon

使用PhoneGap＆JQuery Mobile進入下一頁

回答

相關問題