如何正确使用 jQuery Mobile 和 PhoneGap答案

【问题标题】：How to properly use jQuery Mobile with PhoneGap如何正确使用 jQuery Mobile 和 PhoneGap
【发布时间】：2014-03-31 01:39:14
【问题描述】：

我最近设置了 PhoneGap 来开始学习应用程序开发，我听说 jQuery Mobile 是就框架而言最好的方法，所以我希望使用它。我找到了 jQuery 的 CDN，但目前它似乎与 PhoneGap 样式表和 javascript 冲突，我应该优先考虑其中一个吗？或者有没有办法让两者都使用？

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

【问题讨论】：

你是说JQuery Mobile的CDN？
是的，对不起。应该说清楚。

标签： javascript jquery mobile cordova

【解决方案1】：

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

IE。

另外，我做的是这样的：

<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>

然后在你的 onDeviceReady 函数中，调用这个：

$.mobile.initializePage();

特别是如果您的 jquery 页面处理程序正在调用特定的 phonegap 插件以获取位置等内容，那么将页面初始化推迟到 ondeviceready 触发可能会很好。

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

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

【讨论】：

【解决方案2】：

带有PhoneGap页面的典型JQuery Mobile页面如下

<!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>

注意：

我在这个例子中使用了 JQuery Mobile 1.4.0
我使用了自定义主题mytheme.min.css

你的页面应该是这样安排的，你很高兴

【讨论】：