How to properly use jQuery Mobile with PhoneGap
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. 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? 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.
2 answers
solution1
0 2014-03-30 17:07:14
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 "/"
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:
$.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.
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.
I just recently built an app in jquery mobile / cordova and i'd say it went pretty well.
solution2
0 2014-03-30 17:39:14
A typical JQuery Mobile Page with PhoneGap page is the one below
<!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
- I used a custom theme
mytheme.min.css
Your page should be arrange like this and you are good to go
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.