1.12. Retrieving Contacts in the Address Book
Problem
You want to retrieve and display the list of contacts that the user has saved on the device.
Solution
The PhoneGap API exposes a function called contacts.find that accepts four parameters,
including the ability to search for a specific contact. By using this
function in conjunction with the jQuery mobile library, you can display
a list of contacts in a table view that, once a contact is selected,
will display the contact’s full information.
Discussion
Several new files must be created to accomplish this. To begin, you must create the main contact listing page. Inside of your assets/www directory, create a new file called contacts.html. This file will simply hold the skeleton HTML that will be populated via JavaScript.
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
</head>
<body>
<div data-role="page" id="contacts-page">
<div data-role="header" data-position="inline">
<h1>Contacts</h1>
</div>
<ul id="contactList" data-role="listview">
</ul>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="map.html">Map</a></li>
<li><a href="compass.html">Compass</a></li>
<li><a href="list.html">List</a></li>
<li><a href="contacts.html"
class="ui-btn-active">Contacts</a></li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8"
src="scripts/contacts.js"></script>
</div>
</body>
</html>Some key design elements have been added in the preceding HTML. Firstly, ...