---
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Mobile Apps</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="lib/jquery-mobile/css/jquery.mobile-1.4.0.min.css" />
<script type="text/javascript" src="lib/jquery-mobile/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jquery-mobile/js/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Mobile Apps</h1><a href="#settings" data-icon="gear" data-transition="slideup" class="ui-btn-right">Settings</a>
</div>
<div role="main" class="ui-content" id="home-content">
<h2>Main page</h2>
<p><a href="#next" data-transition="slide">Next Page</a></p>
</div>
</div>
<div data-role="page" id="next">
<div data-role="header" data-position="fixed">
<h1>Next</h1><a href="#home" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Home</a>
</div>
<div role="main" class="ui-content">
<h2>Next Page</h2>
<p>content</p>
</div>
</div>
<div data-role="page" id="settings">
<div data-role="header" data-position="fixed">
<h1>Settings</h1><a href="#home" data-transition="slideup" data-direction="reverse" data-icon="check" class="ui-btn-right">Done</a>
</div>
<div role="main" class="ui-content">
<h2>Settings</h2>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript"> app.initialize();</script>
</body>
</html>
|
app.js
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
}
};
|
note: avoid anonymous functions, read http://toddmotto.com/avoiding-anonymous-javascript-functions/
app.css
/* Make the webviews act less like a browser, and more like an app*/
body {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
}
|
DOWNLOAD:
No comments:
Post a Comment