Programming and Technology: 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
 <!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>
Programming and Technology

Welcome

how would you rate The Holy Qura'an - Arabic ver?

Monday, April 28, 2014

Simple Phonegap index.html file to show contacts' images, names and phone numbers

1 comment:
