PowenKo > jQuery > Mobile > UI > List > Search List (Web service , XML with PhoneGap)

January 25, 2012   ·   0 Comments

Screen Shot 2012-01-25 at 12.35.35 AM

doc source: http://wiki.phonegap.com/w/page/36868306/UI%20Development%20using%20jQueryMobile

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-0.9.3.js"></script>
<link rel="stylesheet" href="/jquery.mobile-1.0a1.min.css" />
<script src="jquery-1.4.3.min.js"></script>
<script src="jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript">
$( function() {
$('#searchButton').click(function() {
$.getJSON('http://api.alternativeto.net/software/'+$('#searchBox').val()+'/?count=15',
function(data) {
var items=data.Items;
var list = $('#list');
list.html("");
$.each(items, function(key, val) {
list.append($(document.createElement('li')).html(val.Name));
});
list.listview("destroy").listview()
});
});
document.addEventListener("deviceready", onDeviceReady, false);
});
function reachableCallback(reachability) {
// There is no consistency on the format of reachability
var networkState = reachability.code || reachability;
var states = {};
states[NetworkStatus.NOT_REACHABLE]                      = 'No network connection';
states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK]         = 'WiFi connection';
alert('Connection type: ' + states[networkState]);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
function onDeviceReady() {
navigator.network.isReachable('phonegap.com', reachableCallback);
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>AlternativeTo Home</h1>
</div>
<div data-role="content">
<p>Find Alternatives To Your favourite Softwares </p>
<p><a href="#search" data-role="button">Search Alternatives</a></p>
<p><a href="#recent" data-role="button">Recent Alternatives</a></p>
</div>
</div>
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
<h1>Search Alternatives</h1>
<div class="class= ui-body ui-body-b">
<input type="text" name="search" id="searchBox" value="" data-theme="a" />
<button type="submit" data-theme="a" id="searchButton">Search</button>
</div>
</div>
<div data-role="content">
<ul data-role="listview" id="list"></ul>
</div>
</div>
<div data-role="page" id="recent">
<div data-role="header">
<h1> Recent Alternatives</h1>
</div>
<div data-role="content">
<p>This app rocks!</p>
</div>
</div>
</body>
</html>
shareShare on FacebookShare on Google+Share on LinkedInEmail this to someonePrint this pageBuffer this pageDigg thisFlattr the authorShare on RedditPin on PinterestShare on StumbleUponShare on TumblrTweet about this on Twitter

By


Readers Comments (0)


You must be logged in to post a comment.

PowenKo’s Online Store

powenko_arduinoBook
jQuery172

jQuery

Amazon

adsbygoogle

Recent Posts

Categories

Amazon