First you have to design app template accordingly  that index.html page as below.

index.html

<!DOCTYPE html>

<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
<title>freejobalert</title>
<style type=”text/css”>
img{ min-width:100%; width:100%; height:auto;}
.bordercls{
border-radius: 25px;
border: 2px solid #CCCCCC;
padding: 20px;
width:auto;
height: auto;
}
</style>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”http://code.jquery.com/jquery-1.11.2.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

<script>
$(document).on(“pagecreate”,”#pageone”,function(){
$(document).on(“scrollstart”,function(){
//alert(“Started scrolling!”);
});
});
var iabRef = null;
// device APIs are available
$(‘.link’).live(‘tap’, function() {
url = $(this).attr(“rel”);
loadURL(url);
});

function loadURL(purl){
alert(“hiiiii”+purl);
navigator.app.loadUrl(purl, { openExternal:true });
return false;
}
</script>
</head>
<body>
<div data-role=”page” id=”pageone”>
<div data-role=”header” data-theme=”b”>
<h1>FreeJobAlert</h1>
<a href=”#pageone” data-role=”button” data-icon=”refresh”>&nbsp;</a>
</div>

<div data-role=”main” class=”ui-content”>

</div>
</div>
<!– When in Phonegap folder uncomment this
<script type=”text/javascript” src=”phonegap.js”></script>–>

<script type=”text/javascript” src=”cordova.js”></script>
<script type=”text/javascript” src=”js/app.js”></script>
<script type=”text/javascript”>app.init();</script>
</body>
</html>

 

app.js

var app = {

init: function() {
app.getPosts();
},

getPosts: function() {

var rootURL = ‘http://openjobsinfo.com/wp-json';

$.ajax({
type: ‘GET’,
url: rootURL + ‘/posts’,
dataType: ‘json’,
data: {
filter: {
‘posts_per_page':50
}
},
success: function(data){

$.each(data, function(index, value) {
var ii=1;
//console.log(value.featured_image);
$(‘div.ui-content’).append(‘<div class=”bordercls”><h2>’+value.title+'</h2>’+'<i>Published on ‘+value.date+'</i><hr style=”border:solid 1px #cccccc;”><p>’+value.content+'</p>’+'<p><a href=”‘+value.link+'” class=”ui-btn”>Apply</a></p>’+'</div><br>’);
});
},
error: function(error){
console.log(error);
}

});

}

}

Out Put:

freejobalert phone gap app

1651 Total Views 1 Views Today

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>