第一个phoneGap和JqueryMobile的应用实例
今天用phonegap和jquerymobile结合做了一个小的应用，这个应用很简单，就是几个按钮调用设备操作而已，以前单纯用PhoneGap做应用很丑。后来明白了，PhoneGap是一种工具，而jquerymobile则是用来美化，看截图
首页上有两个按钮，开始和退出，点击按钮时，页面跳转到下一个页面。
这个页面上可以回到上一页，跳转到下一页，并且通过调用phoneGap，可以获取设备在x，y，z上的加速度
在第三页上，通过调用phoneGap实现对照相机的调用，以及从设备的图库中获取图像
在最后一页上，实现检查设备网络连接状态的检查工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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>
jopen 
pxchen