无法在jquerymobile和手机间隙的页面中使用changePage功能显示页面?

时间:2013-10-30 08:49:53

标签: javascript android html jquery-mobile cordova

我正在使用Phonegap 2.9.0,jQuery移动Android应用。该应用程序以默认的index.html页面开始,其中我使用$ .mobile.changePage在日志显示空白页面后使用外部登录文件登录后加载#pagen页面。但代码在chrome中完美运行。我被困了请帮助别人?

<!DOCTYPE html>
<html>
<head>
<title>mAgIDS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="mAgIDS.min.css" />
<link rel="stylesheet" href="jquery.mobile.structure-1.3.1.min.css" />
<style type="text/css">
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 50%;
height: 50%;
z-index: 9999;
}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js" data-prefetch></script>
<script type="text/javascript" src="jquery.mobile-1.3.1.min.js" data-prefetch></script>
<script type="text/javascript" src="cordova.js" data-prefetch></script>
<script type="text/javascript">
$( document ).bind( "mobileinit", function() {
 $.support.cors = true;
 $.mobile.allowCrossDomainPages = true;
 $.mobile.phonegapNavigationEnabled = true ;
});
$(document).ready(function(){
var myWebHost="http://192.168.49.64:8080/mAgIDS/mobile/";
if(window.localStorage["u"] != undefined && window.localStorage["p"] != undefined){  
        u = window.localStorage["u"];  
        p = window.localStorage["p"];
        myLogin(u,p);
}
else{
            //$.mobile.changePage($('#geoLocation'), "slidup");         
            $.mobile.changePage($('#loginpage'), "slidup");  
}
function myLogin(nu,np){
    var opt="username="+nu+"&password="+np;
    $.get(myWebHost+'jsp/logon.jsp?'+opt,function(data){
        var L,s;
        for (var i=0;i<data.length;i++)
            {
            if(data.substring(i,i+1)=="L")
                {
                L=data.substring(i,i+7);
                s=data.substring(i+7,data.length)
                break;
                }
            }
        if(L == "LoginOK") 
        {
            window.localStorage["u"] = nu;
            window.localStorage["p"] = np;        
            window.sessionStorage["ses"] = s;
            ses=s;
            u=nu;
            alert(s);
            $.mobile.changePage('#pagen');
            alert("My test phase]");
            return false;
        } 
        else 
        {
            alert("Your login failed");
            $('#myLoginFail').html("Login failed. Please Login again");
            $('#myLoginFail').trigger('create');
            myInit();
            $.mobile.changePage($("#loginpage"), "slidup");
            return false;
        }
    });
}
});

</script>
</head>
<body>
<div data-role="page" id="loginpage" data-theme="f">
    <div data-role="header" data-theme="f" data-icon="gear">
        <h1>mAgIDS</h1>
    </div>
    <div id="mylogin" data-role="content" data-theme="f">
        <div id="myLoginFail"></div>
        <div id="myLoginDiv" data-role="fieldcontain">
            <form id="loginform" name="loginform" action="#"      method="post">
                <div id="loginDiv" data-role="fieldcontain">
                    <label for="username">Mobile No. </label>         <input type="text"
                        size="11" maxlength="11" name="username" id="username"> <label
                        for="password">Password</label>     <input type="password" size="11"
                        maxlength="11" name="password" id="password">
                </div>
                <div id="submitDiv" data-role="fieldcontain">
                    <a data-role="button" id="login">Login</a>
                </div>
            </form>
        </div>
    </div>
    <div data-role="footer" data-position="fixed" align="right"
        data-theme="f"></div>
</div>

<div data-role="page" id="pagen" data-theme="f">
    <div data-role="header" data-theme="f" data-icon="gear">
        <h1>mAgIDS</h1>
    </div>
    <div id="page1content" data-role="content" data-theme="f">
        <div id="langu">
<a id="EN" data-role="button" href="#geolocation1">Select English Language</a>
  <a id="HN" data-role="button" href="#geolocation1">हिंदी भाषा का चयन करें</a> 
  <a id="PB" data-role="button" href="#geolocation1">ਪੰਜਾਬੀ ਭਾਸ਼ਾ ਚੁਣੋ</a>
        </div>
    </div>
    <div data-role="footer" data-position="fixed" align="right"
        data-theme="f"></div>
</div>
</body>
</html>

0 个答案:

没有答案