-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
75 lines (65 loc) · 2.24 KB
/
index.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
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My tiny app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/app.css" media="screen" title="no title">
</head>
<body>
<header>
<ul class="topnav" id="menu">
<li><a href="#home">Home</a></li>
<li><a href="#page1">Page1</a></li>
<li><a href="#page2">Page2</a></li>
<li><a href="#page3">Page3</a></li>
<li class="icon">
<a href="javascript:void(0);">☰</a>
</li>
</ul>
</header>
<section id="home" default>
<p>Hello, this is a sample spa application built with <a href="https://github.com/c-smile/spapp">spapp.js</a> </p>
<p> It allow us to build simple, fast and efficient MVC webapps. Source code <a href="https://github.com/lduboeuf/sample-spapp-app">here</a></p>
</section>
<section id="page1">
<h2>Page1</h2>
<form>
<input type="text" name="name"/>
<button id="ok">ok</button>
</form>
<a href="#page2:hello">call to page2 template with a param</a>
</section>
<section id="page2">
<h2>Page2</h2>
<h3>Result from page1:</h3>
<p id="result"></p>
</section>
<section id="page3" src="templates/page3.html"></section>
<script type="text/javascript">
var $menu = document.getElementById("menu");
var $menu_icon = $menu.querySelector('.icon > a');
//menu for mobile click handler
function cleanUI(evt) {
//toggle menu when a menu item is clicked
if (evt.target.parentNode.className!=='icon'){
document.getElementById("menu").className = "topnav";
window.removeEventListener('click', cleanUI);
}
}
function toggleMenu() {
if ($menu.className === "topnav") {
$menu.className += " responsive";
//handle click outside menu to toggle it
window.addEventListener('click', cleanUI);
} else {
$menu.className = "topnav";
}
}
$menu_icon.onclick = toggleMenu;
</script>
<script src="js/spapp.js"></script>
<script src="js/page1.js"></script>
<script src="js/page2.js"></script>
</body>
</html>