如何在按钮上单击jQuery Mobile中加载另一个HTML文件

Question

我正在使用jQuery移动框架在phonegap中创建一个应用程序。

在我的index.html文件中，我有两个文本框来接受用户名和密码。

当我单击“提交”按钮时，它将调用一个函数submitBtn() ，该函数检查用户名和密码是否正确，如果正确，则应加载我创建的“ selectOption.html”新的html文件。

这是我的代码

<script type="text/javascript">
    $(document).ready(function() {
        var userName;
        var userPassword;

        $("#submitBtn").click(function() {
            //alert("HI");       
            userName = $("#UserName").val();
            userPassword = $("#Password").val();

            if ((!UserName)|| (!userPassword)) {
                alert("Enter the Details");
            }
            else {
                if ((userName !="alpha") ||(userPassword !="beta")) {
                    alert('Enter correct username and password');
                }
                else {
                    //here i want to load my selectOption.html file ?
                }              
            }                                   
        });                           
    });
</script>

我在<body>下的代码是

<body>
    <div data-role="page" id="home">         
        <div data-role="header">             
            <h1>Enter Credential</h1>                       
        </div>

        <div data-role="content">
            <label for="UserName">User Name</label>
            <input type="text" name="UserName" id="UserName" value="" style="width:220px;"  />

            <label for="Password">Password</label>
            <input type="password" name="Password" id="Password" value="" style="width:220px;"  />

            <div id="submitBtn" data-role="button">Submit</div>
        </div>  
    </div>
</body>

正在调用该函数，但是如何加载selectOption.html文件？

Answer 1

您是否尝试过使用jQuery Mobile方法执行导航？

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

http://jquerymobile.com/demos/1.0/docs/api/methods.html

Answer 2

我找到了答案

加载任何您可以轻松完成的页面

$.mobile.changePage("yourHTML.html","slideup");

如何在按钮上单击jQuery Mobile中加载另一个HTML文件

问题描述

2 个解决方案

解决方案1
6 已采纳 2012-01-04 14:01:18

解决方案2
0 2012-01-04 14:02:09

如何在按钮上单击jQuery Mobile中加载另一个HTML文件

问题描述

2 个解决方案

解决方案1 6 已采纳 2012-01-04 14:01:18

解决方案2 0 2012-01-04 14:02:09

解决方案1
6 已采纳 2012-01-04 14:01:18

解决方案2
0 2012-01-04 14:02:09