<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<style>
.app {
background:none !important;
position: relative !important;
left: 1% !important;
top: 1% !important;
height: auto !important;
width: auto !important;
text-align: center !important;
padding:0 !important;
margin:0 !important;
}
img.contact{background: url('img/user-default.png') no-repeat scroll 0 0 transparent; backgorund-size:45px 45px; height:auto!important; width:auto!important; }
</style>
</head>
<body>
<div class="app">
<h1>PhoneGap.. ..</h1>
<div id="contacts"><div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
// find all contacts
var options = new ContactFindOptions();
options.filter = ""; // empty search string returns all contacts
options.multiple = true; // return multiple results
var filter = ["displayName", "name", "phoneNumbers", "photos"];
navigator.contacts.find(filter, onSuccess, onError, options);
}
// onSuccess: Get a snapshot of the current contacts
//
function onSuccess(contacts) {
document.getElementById("contacts").innerHTML += "CONTACTS (" + contacts.length + ")<br/>";
// display the address information for all contacts
for (var i = 0; i < contacts.length; i++) {
if(contacts[i].phoneNumbers != null && contacts[i].phoneNumbers.length > 0 && contacts[i].phoneNumbers[0].value != null && contacts[i].phoneNumbers[0].value != undefined ) {
for (var j = 0; j < contacts[i].phoneNumbers.length; j++) {
if(contacts[i].photos[j] != null && contacts[i].photos[j] != undefined){
var phone = contacts[i].phoneNumbers[j].value;
var displayName = contacts[i].displayName;
var name = contacts[i].name;
var z = imageHandle(phone, name, displayName, contacts[i].photos[0].value);
function imageHandle(phone, name, displayName, img){
window.resolveLocalFileSystemURI(img, function(fileEntry){
document.getElementById("contacts").innerHTML += "<img class='contact' src='" + img + "'/> " + name.formatted + " (" + displayName + ") " + phone + "<br/>";
}, function(e){
document.getElementById("contacts").innerHTML += "<img class='contact' src='img/user-default.png'/> " + name.formatted + " (" + displayName + ") " + phone + "<br/>";
});
}
}
}
}
}
};
// onError: Failed to get the contacts
//
function onError(contactError) {
alert('onError!');
}
</script>
</body>
</html>
Showing posts with label contacts. Show all posts
Showing posts with label contacts. Show all posts
Monday, April 28, 2014
Simple Phonegap index.html file to show contacts' images, names and phone numbers
This is a simple Phonegap index.html file to show contacts' images, names and phone numbers
Subscribe to:
Posts (Atom)