mobile-app-frame/index.html at master · tafkanator/mobile-app-frame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Mobile app</title>
	<meta name="description" content="Play is older than man">
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="viewport" content="width=device-width, initial-scale=1 minimum-scale=1, maximum-scale=1, user-scalable=no">
	<meta http-equiv="cleartype" content="on">

	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/touch/apple-touch-icon-144x144-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/touch/apple-touch-icon-114x114-precomposed.png">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/touch/apple-touch-icon-72x72-precomposed.png">
	<link rel="apple-touch-icon-precomposed" href="images/touch/apple-touch-icon-57x57-precomposed.png">
	<link rel="shortcut icon" href="images/touch/apple-touch-icon.png">

	<!-- Tile icon for Win8 (144x144 + tile color) -->
	<meta name="msapplication-TileImage" content="images/touch/apple-touch-icon-144x144-precomposed.png">
	<meta name="msapplication-TileColor" content="#222222">

	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-title" content="UR">

	<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
	<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

	<link rel="stylesheet" href="style/normalize.css">
	<link rel="stylesheet" href="style/main.css">

	<script src="js/jquery-2.0.0b2.js"></script>
	<!--<script src="js/jquery-1.9.1.min.js"></script>-->

	<!--system code. delete it in your system-->
	<link rel="stylesheet" href="system/system.css">
	<script src="system/system.js"></script>
	<script>
		var maf;
		$(document).ready(function() {
			maf = new MAF({
				activeClass: 'app5-page-active',
				preActiveClass: 'app5-page-pre-active',
				navActiveClass: 'active',
				pageWrap: '#pages',
				pageClass: 'app5-page',
				navId: '#sitenav',
				inlineNavLinks: '.app5-nav'
			});

			maf.wrap.on('maf.pageChange', function() {
				console.log('page change');
			});

			maf.pages['page-2'].on('maf.beforeFocus', function() {
				console.log('page 2 before focus');
				pause(500);
			});

			maf.pages['page-2'].on('maf.focus', function() {
				console.log('page 2 on focus')
			});

			maf.pages['page-2'].on('maf.blur', function() {
				console.log('page 2 on blur')
			});
		});

		function pause(milliseconds) {
			var dt = new Date();
			while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
		}
	</script>

</head>

<body>
	<div id="header">
		<nav id="sitenav">
			<ul>
				<li><a href="#page-1">page 1</a></li>
				<li class="active"><a href="#page-2">page 2</a></li>
				<li><a href="#page-3">page 3</a></li>
			</ul>
		</nav>
	</div>
	<div id="pages">
		<div id="page-1" class="app5-page">
			<p class="intro">The first page</p>
		</div>
		<div id="page-2" class="app5-page app5-page-active">
			<p class="intro">Second page</p>
		</div>
		<div id="page-3" class="app5-page">
			<p class="intro">It's the third one</p>
		</div>
	</div>
</body>
</html>