-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
65 lines (57 loc) · 1.86 KB
/
example.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Index</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="James Pierce">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" media="(device-height: 568px)">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- Date: 2013-03-27 -->
<style type="text/css" media="screen">
body {
width: 320px;
margin: 0;
font-family: Arial;
}
header {
background: pink;
text-align: center;
color: #fff;
font-size: 30px;
height: 60px;
line-height: 60px;
}
.nav {
background: #ccc;
text-align: center;
padding: 10px;
}
.nav a {
color: #333;
}
.content {
background: green;
color: white;
padding: 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="hijack.js"></script>
</head>
<body>
<header>
My SPA App
</header>
<div class="nav">
<a href="example.html"><strong>Page 1</strong></a> | <a href="example-page2.html">Page 2</a>
</div>
<div class="content">
<p>This is a standard html page with links to a other html pages using standard GET requests. However, with javascript enabled, highjack.js will intercept all anchor tags, request the page via ajax and the replace the entire body content. This is a simple way to create quick SPA prototypes for use as mobile-web-app-capable applications.</p>
<p>Note: Everything in the head of the other pages will ignored. Only the content within the body tag will be loaded.</p>
</div>
</body>
</html>