I’ve developed a phoneGap app for iOS and it works.
Now I’m trying to switch it on JqueryMobile in order to improve graphic.
This is the code of index.html page.
What must I change to make it works with JQueryMobile?
I tried to use css styles and library of jQueryMobile and modify header and footer but I can’t understand where I must place <div data-role="page"> in my file.
I haven’t also understood if I must leave id=header and class=header or not.
<head>
<title>x Directory</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-WebInspector.js"></script>
</head>
<body>
<div id="header" class="header">
<a href="index.html" class="nav" id="nav" style="display:none;">Home</a>
<img src="img/mob.png" class="logo" id="logo"/>
<h1>xAsk</h1>
</div>
<div id="wrapper">
<ul id="xList" class="icon-list"></ul>
</div>
<div id="wrapper_hidden">
<div>
<div id="employeeDetails">
<img id="xPic"/>
<h3 id="xName"></h3>
<p id="xEmail"></p>
<p id="city"></p>
</div>
<ul id="actionList"></ul>
</div>
</div>
<div id="footer" class="footer">
<ul id="azioni">
</ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/xlist.js"></script>
</body>
Start with one of the examples first. Jquery mobile changes the way your application is structured. You’re not including
jquery-mobile.js, so your example does not work.The should be around your header, data and footer, but in order to have multiple (inline) pages, you need more of them.