Javascript 如何通过PhoneGap正确使用jQuery Mobile_Javascript_Jquery_Mobile_Cordova

Javascript 如何通过PhoneGap正确使用jQuery Mobile

javascript jquery mobile cordova

Javascript 如何通过PhoneGap正确使用jQuery Mobile,javascript,jquery,mobile,cordova,Javascript,Jquery,Mobile,Cordova,我最近建立了PhoneGap来开始学习应用程序开发，我听说jQuery Mobile是实现框架的最佳方式，所以我希望使用它。我已经找到了jQuery的CDN，但目前它似乎与PhoneGap样式表和javascript相冲突，我应该优先考虑其中一个吗？或者有没有一种方法可以同时使用这两种方法我知道这听起来像个愚蠢的问题，但我还在学习。感谢您的帮助。我选择用jquery从我的phonegap应用程序本地调用它，而不是使用cdn。。。。phonegap中需要注意的一件大事是，调用资源时没有前导“/”

我最近建立了PhoneGap来开始学习应用程序开发，我听说jQuery Mobile是实现框架的最佳方式，所以我希望使用它。我已经找到了jQuery的CDN，但目前它似乎与PhoneGap样式表和javascript相冲突，我应该优先考虑其中一个吗？或者有没有一种方法可以同时使用这两种方法

我知道这听起来像个愚蠢的问题，但我还在学习。感谢您的帮助。

我选择用jquery从我的phonegap应用程序本地调用它，而不是使用cdn。。。。phonegap中需要注意的一件大事是，调用资源时没有前导“/”

即

另外，我所做的是：

<link rel="stylesheet" href="jquery/jquery.mobile-1.4.0.css" />
<script src="jquery/jquery-ui-1.10.4.custom.min.js"></script>
<script src="jquery/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript">
    $.mobile.autoInitializePage = false;
    $.mobile.touchOverflowEnabled = true;
</script>

特别是如果jquery页面处理程序正在调用特定的phonegap插件以获取位置之类的信息，那么就将页面初始化推迟到ondeviceready启动正常为止

简言之： 1）我建议从你的应用程序本地调用你的资源，因为它是一个移动应用程序 2）确保您以cordova/phonegap希望的方式呼叫您的资源 3）您可以尝试将jquery mobile初始化推迟到ondeviceready启动之后

我最近刚刚在jquery mobile/cordova中构建了一个应用程序，我想说它运行得很好。

下面是一个典型的带有PhoneGap页面的jquery手机页面

<!DOCTYPE html>
  <html>
  <head>

  <title>My Page</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

  <link rel="stylesheet" href="css/mytheme.min.css"/>

  <link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0.css" /> 

  <script src="js/jquery.js"></script> 
  <script src="js/jquery.mobile-1.4.0.js"></script> 

  </head>

  <body>


        <!--Page-->

  <div data-role="page" data-theme="a" id="searchpage">

<div data-role="header">
     <h4>First Page</h4>
</div><!-- /header -->

<div role="main" class="ui-content">

          Hello World!

</div><!-- /content -->
  </div><!-- /page -->

  <script type="text/javascript" src="js/cordova.js"></script>

  <script type="text/javascript">

    document.addEventListener("deviceready", onDeviceReady, true);

    function onDeviceReady() {}

 </script>


</body>
</html>


我的页面
首页
你好，世界！
文件。添加的监听器（“deviceready”，onDeviceReady，true）；
函数ondevicerady（）{}

注:

在本例中，我使用了jquerymobile1.4.0
我使用了一个自定义主题
```
myteme.min.css
```

你的页面应该是这样排列的，你可以去JQuery Mobile的CDN吗？是的，对不起。应该说清楚的。

<!DOCTYPE html>
  <html>
  <head>

  <title>My Page</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

  <link rel="stylesheet" href="css/mytheme.min.css"/>

  <link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
  <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.0.css" /> 

  <script src="js/jquery.js"></script> 
  <script src="js/jquery.mobile-1.4.0.js"></script> 

  </head>

  <body>


        <!--Page-->

  <div data-role="page" data-theme="a" id="searchpage">

<div data-role="header">
     <h4>First Page</h4>
</div><!-- /header -->

<div role="main" class="ui-content">

          Hello World!

</div><!-- /content -->
  </div><!-- /page -->

  <script type="text/javascript" src="js/cordova.js"></script>

  <script type="text/javascript">

    document.addEventListener("deviceready", onDeviceReady, true);

    function onDeviceReady() {}

 </script>


</body>
</html>