Question

目前我正在开发Phonegap，我找到了一个示例代码，我想让它适用于Phonegap，但我无法做到。还有一件事我想提一下，在这里使用Jquery MObile 1.2.0但我想使用Jquery mobile 1.3.2和JQuery 2.1.1，cordova-3.4.0

任何帮助都会被贬低。谢谢。

    <!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <style>
            #content {
                padding: 0;
                position : absolute !important;
                top : 40px !important; 
                right : 0;
                bottom : 40px !important; 
                left : 0 !important;    
            }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>   
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
        <script>
        $(document).on('pageinit', '#index',function(e,data){   
           var minZoomLevel = 12;

           var map = new google.maps.Map(document.getElementById('map_canvas'), {
              zoom: minZoomLevel,
              center: new google.maps.LatLng(38.50, -90.50),
              mapTypeId: google.maps.MapTypeId.ROADMAP
           });
                });
        </script>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
            </div>

            <div data-role="content" id="content">
                <div id="map_canvas" style="height:100%"></div>
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">
                <h3>
                    First Page
                </h3>
            </div>
        </div>
    </body>
</html>

Answer 1

这意味着您的HTML无法检测到移动设备的 PLATFORM

要检测客户端计算机上的操作系统，您的脚本可以分析navigator.appVersion或navigator.userAgent的值。下面是一个脚本的简单示例，它设置变量OSName以反映实际的客户端操作系统。

// This script sets OSName variable as follows:
// "Windows"    for all versions of Windows
// "MacOS"      for all versions of Macintosh OS
// "Linux"      for all versions of Linux
// "UNIX"       for all other UNIX flavors 
// "Unknown OS" indicates failure to detect the OS

var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";

document.write('Your OS: '+OSName);

Answer 2

此代码无效的原因是您缺少jQuery库。没有jQuery，jQuery Mobile就无法运行。

这就是您收到此错误的原因：

“未捕获的TypeError：无法读取未定义的属性'mobile'”，来源：code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js(2）在Android设备屏幕上我两次获得“第一页” 垂直顺序，但没有地图。

Answer 3

<script language="JavaScript">

var platform = navigator.platform.substr(0,3);

</script>

详情请见：http://ultimatewebdevelopmenttutorial.blogspot.in/2013/06/how-to-detect-browser-platform-and-operating-system.html#sthash.etnEw1AP.dpuf

Answer 4

现在，Phonegap Application的工作代码是::

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
         <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

        <script type="text/javascript" src="file:///android_asset/www/js/jquerymobile/jquery-1.8.3.js"> </script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

         <style>
            #content {
                padding: 0;
                position : absolute !important;
                top : 40px !important; 
                right : 0;
                bottom : 40px !important; 
                left : 0 !important;    
            }
        </style>

        <script>        
        $(document).on('pageinit', '#index',function(e,data){   
           var minZoomLevel = 12;

           var map = new google.maps.Map(document.getElementById('map_canvas'), {
              zoom: minZoomLevel,
              center: new google.maps.LatLng(38.50, -90.50),
              mapTypeId: google.maps.MapTypeId.ROADMAP
           });
                });
        </script>

    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
            </div>

            <div data-role="content" id="content">
                <div id="map_canvas" style="height:100%"></div>
            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">
                <h3>
                    First Page
                </h3>
            </div>

        </div>    

    </body>
</htm

L＆GT;

代码不适用于Phonegap应用程序

4 个答案: