mirror of
https://github.com/apache/cordova-android.git
synced 2025-02-26 20:33:07 +08:00
Adding the tutorial to the project
This commit is contained in:
Brock Whitten
parent
f93c2badcc
commit
c3c5d522a3
232
tutorial/accelerometer.html
Executable file
232
tutorial/accelerometer.html
Executable file
@ -0,0 +1,232 @@
|
|||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||||
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=320; user-scalable=no" />
|
||||||
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||||
|
<title>PhoneGap</title>
|
||||||
|
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||||
|
<style>
|
||||||
|
|
||||||
|
#playField
|
||||||
|
{
|
||||||
|
width: 295px;
|
||||||
|
height:295px;
|
||||||
|
background:rgba(64,64,64,0.5);
|
||||||
|
border: 1px solid rgba(128,128,128,0.5);
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
clear:both;
|
||||||
|
margin:15px 6px 0;
|
||||||
|
padding:4px 0px 2px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ball
|
||||||
|
{
|
||||||
|
-webkit-border-radius: 26px;
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
background:rgba(128,128,128,0.5);
|
||||||
|
border: 1px solid rgba(32,32,32,0.5);
|
||||||
|
position:absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn
|
||||||
|
{
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 8px 24px;
|
||||||
|
background:#fff;
|
||||||
|
color: #aaa;
|
||||||
|
font-weight: bold;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover
|
||||||
|
{
|
||||||
|
background: #6fd9f4;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
|
||||||
|
|
||||||
|
function preventBehavior(e) { e.preventDefault(); };
|
||||||
|
|
||||||
|
var ballSize = 52;
|
||||||
|
|
||||||
|
var fieldSize = 295;
|
||||||
|
|
||||||
|
var top = 150;
|
||||||
|
var bottom = 445;
|
||||||
|
|
||||||
|
var x = fieldSize / 2;
|
||||||
|
var y = fieldSize / 2;
|
||||||
|
|
||||||
|
var accelInputX = 0.01;
|
||||||
|
var accelInputY = 0.01;
|
||||||
|
|
||||||
|
var vx = 0;
|
||||||
|
var vy = 0;
|
||||||
|
|
||||||
|
var vLimit = 200;
|
||||||
|
|
||||||
|
var xMin = 6;
|
||||||
|
var xMax = xMin + fieldSize - ballSize;
|
||||||
|
|
||||||
|
var yMin = 32;
|
||||||
|
var yMax = yMin + fieldSize - ballSize;
|
||||||
|
|
||||||
|
var multiplier = 1.5;
|
||||||
|
|
||||||
|
var ball;
|
||||||
|
|
||||||
|
var timer = null;
|
||||||
|
|
||||||
|
var frameTimer = null;
|
||||||
|
|
||||||
|
var lastFrameTime = 0;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function watchAccel()
|
||||||
|
{
|
||||||
|
if(timer == null)
|
||||||
|
{
|
||||||
|
timer = navigator.accelerometer.watchAcceleration(onAccellUpdate,onAccelError,{frequency:50});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onAccelError(e)
|
||||||
|
{
|
||||||
|
alert("fail: " + e );
|
||||||
|
}
|
||||||
|
|
||||||
|
function onAccellUpdate(accel)
|
||||||
|
{
|
||||||
|
accelInputX = accel.x;
|
||||||
|
accelInputY = accel.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onFrameUpdate()
|
||||||
|
{
|
||||||
|
vx += accelInputX;
|
||||||
|
vy -= accelInputY;
|
||||||
|
|
||||||
|
if (vx > vLimit)
|
||||||
|
vx = vLimit;
|
||||||
|
|
||||||
|
if (vy > vLimit)
|
||||||
|
vy = vLimit;
|
||||||
|
|
||||||
|
//var now = new Date().getTime();
|
||||||
|
//var elapsed = now - lastFrameTime;
|
||||||
|
//lastFrameTime = now;
|
||||||
|
|
||||||
|
x += vx;
|
||||||
|
y += vy;
|
||||||
|
|
||||||
|
if (y > yMax)
|
||||||
|
{
|
||||||
|
y = yMax;
|
||||||
|
vy = -vy / 2;
|
||||||
|
}
|
||||||
|
else if (y < yMin)
|
||||||
|
{
|
||||||
|
y = yMin;
|
||||||
|
vy = -vy / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (x > xMax)
|
||||||
|
{
|
||||||
|
x = xMax;
|
||||||
|
vx = -vx / 2;
|
||||||
|
}
|
||||||
|
else if (x < xMin)
|
||||||
|
{
|
||||||
|
x = xMin;
|
||||||
|
vx = -vx / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateBallCordinates();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateBallCordinates()
|
||||||
|
{
|
||||||
|
ball.style.left = ( xMin + x ).toString() + 'px';
|
||||||
|
ball.style.top = ( yMin + y ).toString() + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWinLoad()
|
||||||
|
{
|
||||||
|
document.addEventListener("touchmove", preventBehavior, false);
|
||||||
|
document.addEventListener("deviceready",onDeviceReady,false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onStartButton()
|
||||||
|
{
|
||||||
|
if(frameTimer != null)
|
||||||
|
{
|
||||||
|
navigator.accelerometer.clearWatch(timer);
|
||||||
|
timer = null;
|
||||||
|
|
||||||
|
clearInterval(frameTimer);
|
||||||
|
frameTimer = null;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
watchAccel();
|
||||||
|
frameTimer = setInterval(onFrameUpdate,20);
|
||||||
|
//lastFrameTime = new Date().getTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("btnText").innerHTML = ( frameTimer != null ) ? "Pause" : "Start";
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDeviceReady()
|
||||||
|
{
|
||||||
|
ball = document.getElementById("ball");
|
||||||
|
updateBallCordinates();
|
||||||
|
updateBallCordinates(); // hack for the shadow
|
||||||
|
ball.style.display = "block";
|
||||||
|
|
||||||
|
document.getElementById("startBtn").addEventListener("touchstart",onStartButton,false);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="stage" class="theme" onload="onWinLoad()">
|
||||||
|
|
||||||
|
<div class="topBar">
|
||||||
|
<a href="index.html">
|
||||||
|
<span class="back_button">Back</span>
|
||||||
|
</a>
|
||||||
|
<span class="pageTitle">Accelerometer</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="playField" style="width:295px">
|
||||||
|
<div id="ball" style="display:none"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#" id="startBtn">
|
||||||
|
<div class="item">
|
||||||
|
<h2 id="btnText">Start</h2>
|
||||||
|
</div></a>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
BIN
tutorial/beep.wav
Executable file
BIN
tutorial/beep.wav
Executable file
Binary file not shown.
176
tutorial/contacts.html
Normal file
176
tutorial/contacts.html
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||||
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=320; user-scalable=no" />
|
||||||
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||||
|
<title>PhoneGap</title>
|
||||||
|
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||||
|
<style>
|
||||||
|
.contact
|
||||||
|
{
|
||||||
|
padding: 8px;
|
||||||
|
background:rgba(64,64,64,0.5);
|
||||||
|
border: 1px solid rgba(128,128,128,0.5);
|
||||||
|
opacity: 0.8;
|
||||||
|
-moz-border-radius: 8px;
|
||||||
|
-webkit-border-radius: 8px;
|
||||||
|
margin-bottom: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
|
||||||
|
var defaultContactTemplate = "<div class='item' onclick='onContactClick(CONTACTID);'><div>First Name : <strong>FNAME</strong></div><div>Last Name : <strong>LNAME</strong></div><div>Email : EMAIL</div><div>Tel : TELNO</div></div>";
|
||||||
|
|
||||||
|
var _anomFunkMap = {};
|
||||||
|
var _anomFunkMapNextId = 0;
|
||||||
|
|
||||||
|
function anomToNameFunk(fun)
|
||||||
|
{
|
||||||
|
var funkId = "f" + _anomFunkMapNextId++;
|
||||||
|
var funk = function()
|
||||||
|
{
|
||||||
|
fun.apply(this,arguments);
|
||||||
|
_anomFunkMap[funkId] = null;
|
||||||
|
};
|
||||||
|
_anomFunkMap[funkId] = funk;
|
||||||
|
|
||||||
|
return "_anomFunkMap." + funkId;
|
||||||
|
}
|
||||||
|
|
||||||
|
function GetFunctionName(fn)
|
||||||
|
{
|
||||||
|
if (fn)
|
||||||
|
{
|
||||||
|
var m = fn.toString().match(/^\s*function\s+([^\s\(]+)/);
|
||||||
|
return m ? m[1] : anomToNameFunk(fn);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onGetTenBtn()
|
||||||
|
{
|
||||||
|
|
||||||
|
navigator.contacts.getAllContacts(onGetAllContacts,null,{pageSize:10});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onGetAllContacts(res)
|
||||||
|
{
|
||||||
|
var child = document.getElementById('contactList');
|
||||||
|
var listMarkup = "";
|
||||||
|
for(var n = 0; n < res.length; n++)
|
||||||
|
{
|
||||||
|
listMarkup += getContactMarkup(res[n]);
|
||||||
|
}
|
||||||
|
child.innerHTML = listMarkup;
|
||||||
|
child.style.display = "block";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function onPickBtn()
|
||||||
|
{
|
||||||
|
navigator.contacts.chooseContact(onPickContactCallback);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPickContactCallback(contactObj)
|
||||||
|
{
|
||||||
|
var child = document.getElementById('contactPicked');
|
||||||
|
|
||||||
|
child.innerHTML = getContactMarkup(contactObj);
|
||||||
|
child.style.display = "block";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function getContactMarkup(contact)
|
||||||
|
{
|
||||||
|
var contactTemplate = defaultContactTemplate;
|
||||||
|
contactTemplate = contactTemplate.replace(/FNAME/g,contact.firstName);
|
||||||
|
contactTemplate = contactTemplate.replace(/LNAME/g,contact.lastName);
|
||||||
|
contactTemplate = contactTemplate.replace(/CONTACTID/g,contact.recordID);
|
||||||
|
|
||||||
|
if(contact.emails[0].value != null)
|
||||||
|
{
|
||||||
|
contactTemplate = contactTemplate.replace(/EMAIL/g,contact.emails[0].value);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
contactTemplate = contactTemplate.replace(/EMAIL/g,"");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(contact.phoneNumbers[0].value != null)
|
||||||
|
{
|
||||||
|
contactTemplate = contactTemplate.replace(/TELNO/g,contact.phoneNumbers[0].value);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
contactTemplate = contactTemplate.replace(/TELNO/g,"");
|
||||||
|
}
|
||||||
|
|
||||||
|
return contactTemplate;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onContactClick(id)
|
||||||
|
{
|
||||||
|
navigator.contacts.displayContact(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onGotContactCount(num)
|
||||||
|
{
|
||||||
|
document.getElementById("contactCountDiv").innerHTML = "Contact Count : " + num;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onGotContactCountError(err)
|
||||||
|
{
|
||||||
|
alert("error getting contacts :: " + err);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function onWinLoad()
|
||||||
|
{
|
||||||
|
document.addEventListener("deviceready",onDeviceReady,false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDeviceReady()
|
||||||
|
{
|
||||||
|
navigator.contacts.contactsCount(onGotContactCount,onGotContactCountError);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="stage" class="theme" onload="onWinLoad()">
|
||||||
|
|
||||||
|
<div class="topBar">
|
||||||
|
<a href="index.html">
|
||||||
|
<span class="back_button">Back</span>
|
||||||
|
</a>
|
||||||
|
<span class="pageTitle">Contacts</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="contactCountDiv">Getting contact count ...</h2>
|
||||||
|
|
||||||
|
<a href="#" onclick="onPickBtn();">
|
||||||
|
<div class="item">
|
||||||
|
<h2>Pick a Contact</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div id="contactPicked" style="display:none"></div>
|
||||||
|
|
||||||
|
<a href="#" onclick="onGetTenBtn();">
|
||||||
|
<div class="item">
|
||||||
|
<h2>Get first 10 contacts</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div id="contactList" style="display:none"></div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
176
tutorial/geolocation.html
Executable file
176
tutorial/geolocation.html
Executable file
@ -0,0 +1,176 @@
|
|||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||||
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=320; user-scalable=no" />
|
||||||
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||||
|
<title>PhoneGap</title>
|
||||||
|
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||||
|
<style>
|
||||||
|
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
#container {
|
||||||
|
|
||||||
|
}
|
||||||
|
#tweetList {
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
#tweetList .tweet {
|
||||||
|
padding: 8px;
|
||||||
|
background:rgba(64,64,64,0.5);
|
||||||
|
border: 1px solid rgba(128,128,128,0.5);
|
||||||
|
opacity: 0.8;
|
||||||
|
-moz-border-radius: 8px;
|
||||||
|
-webkit-border-radius: 8px;
|
||||||
|
margin-bottom: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tweetList a {
|
||||||
|
color: #f30;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
#tweetList .avatar {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
#tweetList .content {
|
||||||
|
padding-left: 55px;
|
||||||
|
}
|
||||||
|
#tweetList .extra {
|
||||||
|
color: #666;
|
||||||
|
font-size: 85%
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var url = "http://search.twitter.com/search.json?callback=getTweets";
|
||||||
|
|
||||||
|
var intervalID;
|
||||||
|
|
||||||
|
|
||||||
|
function preventBehavior(e) { e.preventDefault(); };
|
||||||
|
|
||||||
|
|
||||||
|
function onWinLoad()
|
||||||
|
{
|
||||||
|
document.addEventListener("deviceready",onDeviceReady,false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDeviceReady()
|
||||||
|
{
|
||||||
|
|
||||||
|
var funk = function(position)
|
||||||
|
{
|
||||||
|
callback(position.coords.latitude, position.coords.longitude);
|
||||||
|
};
|
||||||
|
|
||||||
|
var fail = function(error)
|
||||||
|
{
|
||||||
|
alert("error :: " + error);
|
||||||
|
}
|
||||||
|
|
||||||
|
intervalID = navigator.geolocation.watchPosition(funk,fail);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener("unload",onWindowUnload,false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onBackBtn()
|
||||||
|
{
|
||||||
|
navigator.geolocation.clearWatch(intervalID);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function onWindowUnload()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentLocation()
|
||||||
|
{
|
||||||
|
document.getElementById("location2").innerHTML = "Getting current location ...";
|
||||||
|
var funk = function(position)
|
||||||
|
{
|
||||||
|
document.getElementById("location2").innerHTML = "Lat: "+position.coords.latitude+ " Lon: " +position.coords.longitude;
|
||||||
|
};
|
||||||
|
|
||||||
|
var fail = function(error)
|
||||||
|
{
|
||||||
|
alert("error :: " + error);
|
||||||
|
}
|
||||||
|
navigator.geolocation.getCurrentPosition(funk,fail);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function callback(lat, lon)
|
||||||
|
{
|
||||||
|
//navigator.geolocation.stop();
|
||||||
|
//alert("Callback :: " + lat + "," + lon);
|
||||||
|
print(lat,lon);
|
||||||
|
|
||||||
|
var geocode = "&geocode=" + lat + "%2C" + lon + "%2C1mi";
|
||||||
|
var fullUrl = url + geocode;
|
||||||
|
var head = document.getElementsByTagName('head');
|
||||||
|
var script = document.createElement('script');
|
||||||
|
script.src = fullUrl;
|
||||||
|
head[0].appendChild(script);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTweets(json) {
|
||||||
|
var q;
|
||||||
|
var parent = document.getElementById('tweetList');
|
||||||
|
parent.innerHTML = '';
|
||||||
|
var child;
|
||||||
|
|
||||||
|
for (var i = 0; i < json.results.length; i++) {
|
||||||
|
q = json.results[i];
|
||||||
|
child = document.createElement("div");
|
||||||
|
child.setAttribute("class","tweet");
|
||||||
|
child.innerHTML = '<div class="avatar"><img src="'+q.profile_image_url+'" alt="avatar" width="48" height="48" /></div>';
|
||||||
|
child.innerHTML += '<div class="content"><a href="http://m.twitter.com/'+q.from_user+'">'+q.from_user+'</a> '+q.text+'<div class="extra">'+q.location+' ('+q.created_at+')</div></div>';
|
||||||
|
parent.appendChild(child);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function print(lat,lon)
|
||||||
|
{
|
||||||
|
document.getElementById("location1").innerHTML = "Lat: "+lat+ " Lon: " +lon;// + " TS: " + (new Date().getTime());
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="stage" class="theme" onload="onWinLoad()">
|
||||||
|
<div class="topBar">
|
||||||
|
<a href="index.html" onclick="onBackBtn()">
|
||||||
|
<span class="back_button">Back</span>
|
||||||
|
</a>
|
||||||
|
<span class="pageTitle">GeoLocation</span>
|
||||||
|
</div>
|
||||||
|
<div id="container">
|
||||||
|
|
||||||
|
<div class="item" style="text-align:center;" id="location1">Getting your current location ...</div>
|
||||||
|
|
||||||
|
<p>Find who are tweeting within 1 mile radius of where you are!</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div id="tweetList">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
tutorial/images/FoggyRocks.png
Normal file
BIN
tutorial/images/FoggyRocks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
BIN
tutorial/images/TutBG.png
Normal file
BIN
tutorial/images/TutBG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
BIN
tutorial/images/back_button.png
Normal file
BIN
tutorial/images/back_button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
tutorial/images/back_button_clicked.png
Normal file
BIN
tutorial/images/back_button_clicked.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
tutorial/images/backgroundStripes.png
Executable file
BIN
tutorial/images/backgroundStripes.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 164 B |
BIN
tutorial/images/bar_large.png
Normal file
BIN
tutorial/images/bar_large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 B |
BIN
tutorial/images/bar_media.png
Normal file
BIN
tutorial/images/bar_media.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
tutorial/images/header.png
Normal file
BIN
tutorial/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
tutorial/images/header2.png
Normal file
BIN
tutorial/images/header2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 644 B |
BIN
tutorial/images/header3.png
Normal file
BIN
tutorial/images/header3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 698 B |
BIN
tutorial/images/list_arrow.png
Normal file
BIN
tutorial/images/list_arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 341 B |
BIN
tutorial/images/list_item_selected_bg.png
Normal file
BIN
tutorial/images/list_item_selected_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 B |
BIN
tutorial/images/on_off_bg.png
Normal file
BIN
tutorial/images/on_off_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
tutorial/images/selection.png
Normal file
BIN
tutorial/images/selection.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 159 B |
72
tutorial/index.html
Executable file
72
tutorial/index.html
Executable file
@ -0,0 +1,72 @@
|
|||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||||
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=320; user-scalable=no" />
|
||||||
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||||
|
<title>PhoneGap</title>
|
||||||
|
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||||
|
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
|
||||||
|
|
||||||
|
function onWinLoad()
|
||||||
|
{
|
||||||
|
document.addEventListener("deviceready",onDeviceReady,false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDeviceReady()
|
||||||
|
{
|
||||||
|
|
||||||
|
// do your thing!
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="stage" class="theme" onload="onWinLoad()">
|
||||||
|
<div class="topBar">
|
||||||
|
<span class="pageTitle">PhoneGap Tutorial</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<a href="accelerometer.html">
|
||||||
|
<div class="item">
|
||||||
|
<h2>Accelerometer</h2>
|
||||||
|
</div></a>
|
||||||
|
|
||||||
|
<a href="notification.html">
|
||||||
|
<div class="item">
|
||||||
|
<h2>Notification</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="contacts.html">
|
||||||
|
<div class="item">
|
||||||
|
<h2>Contacts</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="geolocation.html">
|
||||||
|
<div class="item">
|
||||||
|
<h2>GeoLocation</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="inputs.html">
|
||||||
|
<div class="item"
|
||||||
|
<h2>Form Inputs</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="media.html">
|
||||||
|
<div class="item">
|
||||||
|
<h2>Media</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
98
tutorial/inputs.html
Executable file
98
tutorial/inputs.html
Executable file
@ -0,0 +1,98 @@
|
|||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||||
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=320; user-scalable=no" />
|
||||||
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||||
|
<title>PhoneGap</title>
|
||||||
|
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
input
|
||||||
|
{
|
||||||
|
width: 180px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
margin-top: 4px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
left:100px;
|
||||||
|
position:absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.disabled
|
||||||
|
{
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
label
|
||||||
|
{
|
||||||
|
margin-bottom: 18px;
|
||||||
|
line-height:36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function onWinLoad()
|
||||||
|
{
|
||||||
|
document.addEventListener("deviceready",onDeviceReady,false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDeviceReady()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="stage" class="theme" onload="onWinLoad()">
|
||||||
|
<div class="topBar">
|
||||||
|
<a href="index.html">
|
||||||
|
<span class="back_button">Back</span>
|
||||||
|
</a>
|
||||||
|
<span class="pageTitle">Form Inputs</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="/">
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<!-- display a standard keyboard -->
|
||||||
|
<label for="tiText">Text:</label>
|
||||||
|
<input type="text" id="tiText"/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<!-- display a telephone keypad -->
|
||||||
|
<label for="tiTel">Telephone:</label>
|
||||||
|
<input type="tel" id="tiTel"/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<!-- display a URL keyboard -->
|
||||||
|
<label for="tiUrl">URL:</label>
|
||||||
|
<input type="url" id="tiUrl"/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<!-- display an email keyboard -->
|
||||||
|
<label for="tiEmail">Email:</label>
|
||||||
|
<input type="email" id="tiEmail"/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<!-- display a numeric keyboard -->
|
||||||
|
<label for="tiZip">Zip Code:</label>
|
||||||
|
<input type="text" pattern="[0-9]*" id="tiZip"/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<label for="tiSearch">Search:</label>
|
||||||
|
<input type="search" id="tiSearch" style="width:192px;"/>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
304
tutorial/master.css
Executable file
304
tutorial/master.css
Executable file
@ -0,0 +1,304 @@
|
|||||||
|
|
||||||
|
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6
|
||||||
|
{
|
||||||
|
margin: 0pt;
|
||||||
|
padding: 0pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body
|
||||||
|
{
|
||||||
|
background:#000 url(images/TutBG.png) repeat-y fixed 0 0;
|
||||||
|
color:#666;
|
||||||
|
font-family:Helvetica,'Lucida Grande',sans-serif;
|
||||||
|
line-height:1.5em;
|
||||||
|
margin:0px;
|
||||||
|
margin-bottom:20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#header{
|
||||||
|
position: relative;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
height: 44px;
|
||||||
|
font-size: 16pt;
|
||||||
|
border-top-width: 0px;
|
||||||
|
border-right-width: 1px;
|
||||||
|
border-bottom-width: 0px;
|
||||||
|
border-left-width: 1px;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 0px;
|
||||||
|
margin-left: 0px;
|
||||||
|
background: url( header.png );
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_title{
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view{
|
||||||
|
background: url( images/backgroundStripes.png );
|
||||||
|
background-repeat: repeat;
|
||||||
|
min-height: 406px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topBar
|
||||||
|
{
|
||||||
|
color:#eee;
|
||||||
|
font-size:1.2em;
|
||||||
|
text-align:center;
|
||||||
|
margin:0;
|
||||||
|
margin-top:0px;
|
||||||
|
padding:0;
|
||||||
|
background-image: url( 'images/header.png' );
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
height:44px;
|
||||||
|
text-height:44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pageTitle
|
||||||
|
{
|
||||||
|
text-align: center;
|
||||||
|
color:#FFF;
|
||||||
|
line-height:44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back_button
|
||||||
|
{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0px;
|
||||||
|
text-align: center;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 22px;
|
||||||
|
padding-top: 4px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
width: 60px;
|
||||||
|
line-height:22px;
|
||||||
|
right: auto;
|
||||||
|
bottom: auto;
|
||||||
|
margin-top: 0px;
|
||||||
|
position:absolute;
|
||||||
|
left:4px;
|
||||||
|
top:11px;
|
||||||
|
-webkit-border-image: url(images/back_button.png) 0 5 0 16 / 1px 5px 1px 16px stretch stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list
|
||||||
|
{
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list li{
|
||||||
|
width: 290px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #FFF;
|
||||||
|
border-left: 1px solid #AAA;
|
||||||
|
border-right: 1px solid #AAA;
|
||||||
|
border-bottom: 1px solid #AAA;
|
||||||
|
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 12px 5px 10px 5px;
|
||||||
|
margin-left: -36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list li.active{
|
||||||
|
background-image: url( 'selection.png' );
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
background-color: #194fdb !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list li:first-of-type{
|
||||||
|
border-top: 1px solid #AAA;
|
||||||
|
-webkit-border-top-right-radius: 8px 8px;
|
||||||
|
-webkit-border-top-left-radius: 8px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list li:last-of-type{
|
||||||
|
border-top: none;
|
||||||
|
border-bottom: 1px solid #AAA;
|
||||||
|
|
||||||
|
-webkit-border-bottom-left-radius: 8px 8px;
|
||||||
|
-webkit-border-bottom-right-radius: 8px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list li:only-of-type{
|
||||||
|
border-top: 1px solid #AAA;
|
||||||
|
border-bottom: 1px solid #AAA;
|
||||||
|
|
||||||
|
-webkit-border-top-right-radius: 8px 8px;
|
||||||
|
-webkit-border-top-left-radius: 8px 8px;
|
||||||
|
-webkit-border-bottom-left-radius: 8px 8px;
|
||||||
|
-webkit-border-bottom-right-radius: 8px 8px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.list .list_label{
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000;
|
||||||
|
text-align: left;
|
||||||
|
width: 145px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list .list_value{
|
||||||
|
color: #6e82a8;
|
||||||
|
text-align: right;
|
||||||
|
width: 140px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list .selected_item{
|
||||||
|
color: #4c566c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_section_label{
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 15px;
|
||||||
|
text-shadow: rgba(255, 255, 255, 1) 0px 1px 0px;
|
||||||
|
color: #4c566c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_section_note{
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 15px;
|
||||||
|
text-shadow: rgba(255, 255, 255, 1) 0px 1px 0px;
|
||||||
|
color: #4c566c;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
margin-top: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.item
|
||||||
|
{
|
||||||
|
background:rgba(64,64,64,0.5);
|
||||||
|
border: 1px solid rgba(128,128,128,0.5);
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
clear:both;
|
||||||
|
margin:15px 6px 0;
|
||||||
|
width:295px;
|
||||||
|
padding:4px 0px 2px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a
|
||||||
|
{
|
||||||
|
color:#FFF;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#info{
|
||||||
|
background:#ffa;
|
||||||
|
border: 1px solid #ffd324;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
clear:both;
|
||||||
|
margin:15px 6px 0;
|
||||||
|
width:295px;
|
||||||
|
padding:4px 0px 2px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info h4{
|
||||||
|
font-size:.95em;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stage.theme{
|
||||||
|
padding-top:3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Definition List */
|
||||||
|
#Page1 > dl{
|
||||||
|
padding-top:10px;
|
||||||
|
clear:both;
|
||||||
|
margin:0;
|
||||||
|
list-style-type:none;
|
||||||
|
padding-left:10px;
|
||||||
|
overflow:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Page1 > dl > dt{
|
||||||
|
font-weight:bold;
|
||||||
|
float:left;
|
||||||
|
margin-left:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Page1 > dl > dd{
|
||||||
|
width:45px;
|
||||||
|
float:left;
|
||||||
|
color:#a87;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content Styling */
|
||||||
|
h1, h2, p{
|
||||||
|
margin:1em 0 .5em 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
color:#eee;
|
||||||
|
font-size:1.6em;
|
||||||
|
text-align:center;
|
||||||
|
margin:0;
|
||||||
|
margin-top:15px;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
clear:both;
|
||||||
|
margin:0;
|
||||||
|
padding:3px;
|
||||||
|
font-size:1em;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Stage Buttons */
|
||||||
|
#stage.theme a.btn
|
||||||
|
{
|
||||||
|
border: 1px solid #555;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align:center;
|
||||||
|
display:block;
|
||||||
|
float:left;
|
||||||
|
background:#444;
|
||||||
|
width:150px;
|
||||||
|
color:#9ab;
|
||||||
|
font-size:1.1em;
|
||||||
|
text-decoration:none;
|
||||||
|
padding:1.2em 0;
|
||||||
|
margin:3px 0px 3px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.btn.large
|
||||||
|
{
|
||||||
|
width:64px;
|
||||||
|
height:32px;
|
||||||
|
padding:1.2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
111
tutorial/media.html
Executable file
111
tutorial/media.html
Executable file
@ -0,0 +1,111 @@
|
|||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||||
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=320; user-scalable=no" />
|
||||||
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||||
|
<title>PhoneGap</title>
|
||||||
|
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.mediaBtn
|
||||||
|
{
|
||||||
|
clear:none;
|
||||||
|
float:left;
|
||||||
|
background:rgba(64,64,64,0.5);
|
||||||
|
border: 1px solid rgba(128,128,128,0.5);
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin:20px;
|
||||||
|
width:64px;
|
||||||
|
padding:4px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
|
||||||
|
var PS_STOPPED = 0;
|
||||||
|
var PS_PLAYING = 1;
|
||||||
|
var PS_PAUSED = 2;
|
||||||
|
var PS_RECORDING = 3;
|
||||||
|
|
||||||
|
var currentState;
|
||||||
|
|
||||||
|
var mediaFile = null;
|
||||||
|
|
||||||
|
function onPlayStopBtn()
|
||||||
|
{
|
||||||
|
if(currentState != PS_PLAYING)
|
||||||
|
{
|
||||||
|
mediaFile.play({numberOfLoops:0});
|
||||||
|
currentState = PS_PLAYING;
|
||||||
|
document.getElementById("playText").innerHTML = "Stop";
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
mediaFile.stop();
|
||||||
|
currentState = PS_STOPPED;
|
||||||
|
document.getElementById("playText").innerHTML = "Play";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function onMediaCreatedSuccess(obj)
|
||||||
|
{
|
||||||
|
alert("successfully created media");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMediaCreatedError(err)
|
||||||
|
{
|
||||||
|
alert("error creating media");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function onWinLoad()
|
||||||
|
{
|
||||||
|
document.addEventListener("deviceready",onDeviceReady,false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDeviceReady()
|
||||||
|
{
|
||||||
|
mediaFile = new Media('percBass.wav',onMediaCreatedSuccess,onMediaCreatedError);
|
||||||
|
updateButtonStates();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="stage" class="theme" onload="onWinLoad()">
|
||||||
|
<div class="topBar">
|
||||||
|
<a href="index.html">
|
||||||
|
<span class="back_button">Back</span>
|
||||||
|
</a>
|
||||||
|
<span class="pageTitle">Media</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>percBass.wav</h2>
|
||||||
|
<a href="#" onclick="onPlayStopBtn();">
|
||||||
|
<div class="mediaBtn">
|
||||||
|
<h2 id="playText">Play</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<a href="#" onclick="onRecordBtn();">
|
||||||
|
<div class="mediaBtn">
|
||||||
|
<h2>Record</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
105
tutorial/notification.html
Executable file
105
tutorial/notification.html
Executable file
@ -0,0 +1,105 @@
|
|||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||||
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="viewport" content="width=320; user-scalable=no" />
|
||||||
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||||
|
<title>PhoneGap</title>
|
||||||
|
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||||
|
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
|
||||||
|
<script type="text/javascript" charset="utf-8">
|
||||||
|
|
||||||
|
|
||||||
|
var isActivityShowing = false;
|
||||||
|
|
||||||
|
function onAlertBtn()
|
||||||
|
{
|
||||||
|
navigator.notification.alert("Custom Message","Custom Title", "Custom Label");
|
||||||
|
}
|
||||||
|
|
||||||
|
function onActivityBtn()
|
||||||
|
{
|
||||||
|
|
||||||
|
if(isActivityShowing)
|
||||||
|
{
|
||||||
|
navigator.notification.activityStop();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
navigator.notification.activityStart();
|
||||||
|
}
|
||||||
|
|
||||||
|
isActivityShowing = !isActivityShowing;
|
||||||
|
|
||||||
|
document.getElementById("activityText").innerHTML = isActivityShowing ? "Hide Activity Indicator" : "Show Activity Indicator";
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function onLoadingBtn()
|
||||||
|
{
|
||||||
|
navigator.notification.loadingStart({duration:2});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onVibrateBtn()
|
||||||
|
{
|
||||||
|
navigator.notification.vibrate(100); // note, iPhone ignores the ms param
|
||||||
|
}
|
||||||
|
|
||||||
|
function onBeepBtn()
|
||||||
|
{
|
||||||
|
navigator.notification.beep();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWinLoad()
|
||||||
|
{
|
||||||
|
|
||||||
|
document.addEventListener("deviceready",onDeviceReady,false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDeviceReady()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="stage" class="theme" onload="onWinLoad()">
|
||||||
|
<div class="topBar">
|
||||||
|
<a href="index.html">
|
||||||
|
<span class="back_button">Back</span>
|
||||||
|
</a>
|
||||||
|
<span class="pageTitle">Notification</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="#" onclick="onAlertBtn();">
|
||||||
|
<div class="item">
|
||||||
|
<h2>Show Custom Alert</h2>
|
||||||
|
</div></a>
|
||||||
|
|
||||||
|
<a href="#" onclick="onActivityBtn();">
|
||||||
|
<div class="item">
|
||||||
|
<h2 id="activityText">Show Activity Indicator</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" onclick="onVibrateBtn();">
|
||||||
|
<div class="item">
|
||||||
|
<h2>Vibrate</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" onclick="onLoadingBtn();">
|
||||||
|
<div class="item">
|
||||||
|
<h2>Show Loading ( 2 Seconds )</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="#" onclick="onBeepBtn();">
|
||||||
|
<div class="item">
|
||||||
|
<h2>Beep</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
tutorial/percBass.wav
Executable file
BIN
tutorial/percBass.wav
Executable file
Binary file not shown.
1272
tutorial/phonegap.js
Normal file
1272
tutorial/phonegap.js
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user