第一個phoneGap和JqueryMobile的應用實例
今天用phonegap和jquerymobile結合做了一個小的應用，這個應用很簡單，就是幾個按鈕調用設備操作而已，以前單純用PhoneGap做應用很丑。后來明白了，PhoneGap是一種工具，而jquerymobile則是用來美化，看截圖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html xmlns="; <head> <meta charset="utf-8"> <title>Capture Photo</title> <script src="jquery-1.7.2.min.js"></script> <script src="jquery.mobile-1.1.0.min.js"> </script> <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"> <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script> <script type="text/javascript" charset="utf-8">var pictureSource; // picture source var destinationType; // sets the format of returned value // Wait for Cordova to connect with the device // document.addEventListener("deviceready",onDeviceReady,false); // Cordova is ready to be used! // function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } function checkConnection() { var networkState = navigator.network.connection.type; var states = {}; states[Connection.UNKNOWN] = 'Unknown connection'; states[Connection.ETHERNET] = 'Ethernet connection'; states[Connection.WIFI] = 'WiFi connection'; states[Connection.CELL_2G] = 'Cell 2G connection'; states[Connection.CELL_3G] = 'Cell 3G connection'; states[Connection.CELL_4G] = 'Cell 4G connection'; states[Connection.NONE] = 'No network connection'; alert('Connection type: ' + states[networkState]);} function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n'); }
// onError: Failed to get the acceleration // function onError() { alert('onError!'); } // Called when a photo is successfully retrieved // function onPhotoDataSuccess(imageData) { // Uncomment to view the base64 encoded image data // console.log(imageData); // Get image handle // var smallImage = document.getElementById('smallImage'); // Unhide image elements // smallImage.style.display = 'block'; // Show the captured photo // The inline CSS rules are used to resize the image // smallImage.src = "data:image/jpeg;base64," + imageData; } // Called when a photo is successfully retrieved // function onPhotoURISuccess(imageURI) { // Uncomment to view the image file URI // console.log(imageURI); // Get image handle // var largeImage = document.getElementById('largeImage'); // Unhide image elements // largeImage.style.display = 'block'; // Show the captured photo // The inline CSS rules are used to resize the image // largeImage.src = imageURI; } // A button will call this function // function capturePhoto() { // Take picture using device camera and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } // A button will call this function // function GetAcceleration() { navigator.accelerometer.getCurrentAcceleration(onSuccess, onError); } function capturePhotoEdit() { // Take picture using device camera, allow edit, and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } // A button will call this function // function getPhoto(source) { // Retrieve image file location from specified source navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } // Called if something bad happens. // function onFail(message) { alert('Failed because: ' + message); } function Exit() { navigator.app.exitApp(); } </script></head> <body> <section id="homepage" data-role="page"> <header data-role="header"> <h1>Homepage</h1> </header> <div class="content" data-role="content"> <p>This is a JqueryMoblie with PhoneGap example, click the button below operating</p></br> <a href="#secondpage" data-role="button">Start</a> <button data-role="button" onclick="Exit();">Exit</button> </div> </section> <section id="secondpage" data-role="page"> <header data-role="header"> <h1>SecondPage</h1> </header> <div class="content" data-role="content"> <p>On this page, you can obtain the acceleration of the mobile phone in the x, y, and z directions, click the button below to try it</p></br> <a href="#homepage" data-role="button">PreviosPage</a> <button data-role="button" onclick = "GetAcceleration()">GetAcceleration</button> <a href="#thirdpage" data-role="button">NextPage</a> <button data-role="button" onclick="Exit();">Exit</button> </div> </section> <section id="thirdpage" data-role="page"> <header data-role="header"> <h1>ThirdPage</h1> </header> <div class="content" data-role="content"> <p>On this page, you can take a picture or you can get on the phone photos, </br>the photos will be displayed on this page, click the button below to try it</p></br> <a href="#secondpage" data-role="button">PreviousPage</a> <button data-role="button" onclick="capturePhoto();">Capture Photo</button> <button data-role="button" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button> <img style="display:none;width:260px;height:260px;" id="smallImage" src="" /> <img style="display:none;" id="largeImage" src="" /> <a href="#forthpage" data-role="button">NextPage</a> <button data-role="button" onclick="Exit();">Exit</button> </div> </section> <section id="forthpage" data-role="page"> <header data-role="header"> <h1>Forthpage</h1> </header> <div class="content" data-role="content"> <p>On this page, you can check the network status, click the button below to try it</p></br> <a href="#thirdpage" data-role="button">PreviousPage</a> <button data-role="button" onclick="checkConnection();">CheckConnection</button> <a href="#homepage" data-role="button">BacktoHomepage</a> <button data-role="button" onclick="Exit();">Exit</button> </div> </section> </body> </html></pre>
</div>
jopen 
pxchen