您的位置：首页 > Web前端 > JQuery

第一个phoneGap和JqueryMobile的应用实例

2014-01-23 16:43 351 查看

今天用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： phonegap jquerymobile

相关文章推荐

新的分享

章节导航