This repository has been archived by the owner on Nov 11, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
58 lines (47 loc) · 2.02 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
<!DOCTYPE html>
<title>Lightning Touch Demos</title>
<meta name="viewport" content="width=device-width">
<script async src="LightningTouch.js"></script>
<!--
Function for onclick() handling so it can be compared to Lightning Touch.
Don't actually use swap() in your code!
-->
<script>
function swap(show,hide) {
document.getElementById(hide).setAttribute('style','display:none');
document.getElementById(show).setAttribute('style','display:block');
}
</script>
<style>
body {text-align:center}
div {background-color:#d3d3d3; height:180px; font-size:2em; margin: 0.5em 0 0 0}
h1 {margin:0; font-size:1.5em;}
a {background-color:yellow; display:block; width:100%}
strong {display:block;}
#awesome {background-color: #bada55}
#less-awesome {background-color: #ac1d1c}
.inline {display:inline; background-color:inherit}
</style>
<body data-default-target-id="lightning-main">
<h1>Lightning Touch Demo</h1>
<a class="inline" href="http://github.com/trott/LightningTouch">Go to Project home</a>
<div id="lightning-main">
<strong>Lightning Touch</strong>
<strong>Awesomeness!</strong>
<a href="#" data-target-id="awesome">Tap for Lightning Touch!</a>
</div>
<div id="awesome" style="display:none">
<strong>Whoa!</strong>
<strong>That was fast!</strong>
<a href="#" data-target-id="lightning-main">Tap to try Lightning Touch again!</a>
</div>
<div id="onclick-main">
<strong>Onclick listener</strong>
<strong>For comparison!</strong>
<a href="#" onclick="swap('less-awesome','onclick-main'); return false;">Tap to compare with onclick listener.</a>
</div>
<div id="less-awesome" style="display:none">
<strong>Oooof....</strong>
<strong>That was slow.</strong>
<a href="#" onclick="swap('onclick-main','less-awesome'); return false;">Tap to reset onclick listener.</a>
</div>