如何通过PhoneGap正确使用jQuery Mobile

Question

我最近设置了PhoneGap来开始学习应用程序开发，听说jQuery Mobile是框架发展的最佳途径，因此我希望使用它。 我已经找到了jQuery的CDN，但目前看来它与PhoneGap样式表和javascript冲突，我应该优先考虑其中之一吗？ 还是有一种方法可以同时使用两者？

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

Answer 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中构建了一个应用程序，我说它运行得很好。

Answer 2

以下是带有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>

注意：

在此示例中，我使用了JQuery Mobile 1.4.0
我使用了自定义主题mytheme.min.css

您的页面应该这样排列，您可以继续进行

如何通过PhoneGap正确使用jQuery Mobile

问题描述

2 个解决方案

解决方案1
0 2014-03-30 17:07:14

解决方案2
0 2014-03-30 17:39:14

如何通过PhoneGap正确使用jQuery Mobile

问题描述

2 个解决方案

解决方案1 0 2014-03-30 17:07:14

解决方案2 0 2014-03-30 17:39:14

解决方案1
0 2014-03-30 17:07:14

解决方案2
0 2014-03-30 17:39:14