如何通过PhoneGap正确使用jQuery Mobile

Question

I've recently set up PhoneGap to start learning app development, I heard jQuery Mobile was the best way to go as far as a framework goes so I'm looking to use that. 我最近设置了PhoneGap来开始学习应用程序开发，听说jQuery Mobile是框架发展的最佳途径，因此我希望使用它。 I've found the CDN for jQuery but it seems at the moment it's conflicting with the PhoneGap stylesheet and javascript, should I prioritise one of these over the other? 我已经找到了jQuery的CDN，但目前看来它与PhoneGap样式表和javascript冲突，我应该优先考虑其中之一吗？ Or is there aa way to do it so both are used? 还是有一种方法可以同时使用两者？

I know this sounds like a stupid question but I'm still learning. 我知道这听起来像是一个愚蠢的问题，但我仍在学习。 Thanks for any help. 谢谢你的帮助。

Answer 1

What I chose to do with jquery is call it locally from my phonegap app and not use the cdn.... one big thing to note in phonegap is that you call resources without the leading "/" 我选择对jquery进行的操作是从我的phonegap应用程序本地调用它，而不使用CDN。...phonegap中要注意的一件事是，您在调用资源时不使用前导“ /”

IE. IE浏览器

Also, what I did was this: 另外，我所做的是：

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

Then in your onDeviceReady function, call this: 然后在onDeviceReady函数中，调用以下命令：

$.mobile.initializePage();

Especially if your jquery page handlers are calling specific phonegap plugins for things like location or such then deferring the page initialization until the ondeviceready fires can be good. 尤其是如果您的jquery页面处理程序正在调用特定的phonegap插件来获取诸如位置之类的信息，则将页面初始化推迟到ondeviceready触发时再好不过了。

So in short: 1) I'd rccommend calling your resources locally from your app since its a mobile app 2) Make sure you are calling your resources in the way cordova / phonegap would like 3) You might try deferring your jquery mobile intialization until after your ondeviceready has fired. 简而言之：1）我建议从应用程序移动应用程序开始从本地调用资源2）确保您以cordova / phonegap希望的方式调用资源3）您可以尝试将jquery移动初始化推迟到在ondeviceready触发之后。

I just recently built an app in jquery mobile / cordova and i'd say it went pretty well. 我最近刚刚在jquery mobile / cordova中构建了一个应用程序，我说它运行得很好。

Answer 2

A typical JQuery Mobile Page with PhoneGap page is the one below 以下是带有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>

Note: 注意：

I used JQuery Mobile 1.4.0 in this example 在此示例中，我使用了JQuery Mobile 1.4.0
I used a custom theme mytheme.min.css 我使用了自定义主题mytheme.min.css

Your page should be arrange like this and you are good to go 您的页面应该这样排列，您可以继续进行

如何通过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