Question

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

与“显示”和“取消”按钮相同，即可进入上一页和下一页。在我的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 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" });
      });   
    });

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，您希望如何转到第2页？

转到下一页的PhoneGap＆amp; JQuery Mobile

4 个答案: