使用PhoneGap和JQuery Mobile转到下一页

Question

我不知道我错过了什么，但是问题是我想对我的“添加”按钮进行操作，以便可以转到下一页“第2页”。

使用“显示”和“取消”按钮也一样，以转到上一页和下一页。 在我的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";
}

Answer 1

希望这个JSFiddle可以帮助您JSFiDDLE

为了更好地理解，您也可以在此处阅读jQuery Mobile的导航还是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" });
      });   
    });

Answer 2

在您的body标签中添加以下代码。

<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>

Answer 3

我建议将事件侦听器添加到调用changepage事件的元素。 因为它比href锚点的启动速度更快，所以这有助于我提高用户体验。

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

Answer 4

尝试

window.location.href = "page2.html"

但是如果没有page2.html，您如何期望转到page2？

使用PhoneGap和JQuery Mobile转到下一页

问题描述

4 个解决方案

解决方案1
2 2014-01-09 14:13:15

解决方案2
1 已采纳 2014-01-09 14:19:11

解决方案3
1 2014-01-10 00:33:05

解决方案4
-1 2014-01-09 13:40:29

使用PhoneGap和JQuery Mobile转到下一页

问题描述

4 个解决方案

解决方案1 2 2014-01-09 14:13:15

解决方案2 1 已采纳 2014-01-09 14:19:11

解决方案3 1 2014-01-10 00:33:05

解决方案4 -1 2014-01-09 13:40:29

解决方案1
2 2014-01-09 14:13:15

解决方案2
1 已采纳 2014-01-09 14:19:11

解决方案3
1 2014-01-10 00:33:05

解决方案4
-1 2014-01-09 13:40:29