-
Notifications
You must be signed in to change notification settings - Fork 1
/
index_notwebkit.html
71 lines (59 loc) · 5.23 KB
/
index_notwebkit.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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>swpnav</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div id="content">
<header>
<nav>
<ul>
<li><a href="#open" id="open">Open</a></li>
</ul>
</nav>
</header>
<div class="main">
<p><a href="#destory" id="destory">destory Swpnav</a></p>
<p><a href="http://ja.wikipedia.org/wiki/Lorem_ipsum">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Fusce augue nulla, rhoncus sed faucibus sit amet, sagittis at metus. Mauris tristique dui eget turpis interdum ultricies. Donec volutpat, velit a congue convallis, nisi est ultricies tortor, sed pretium eros enim nec lorem. Pellentesque iaculis, felis ac interdum tincidunt, tortor lacus ultrices nisl, ut porta magna enim eu nunc. Cras nec vehicula arcu. Nunc bibendum, quam eu dignissim posuere, orci est sodales ante, non rhoncus tortor lorem nec ante. Donec tellus urna, porta eget tincidunt id, elementum quis sapien. Curabitur cursus, libero in mollis feugiat, augue ante laoreet massa, a consequat orci orci a diam. Pellentesque condimentum, libero a mattis suscipit, ipsum ante feugiat neque, sed pellentesque tellus mi vel nisi. Fusce sit amet adipiscing tellus.</p>
<p>Fusce tellus purus, porttitor eu porta ac, suscipit ac nunc. Morbi sed eros ac diam egestas consectetur sit amet eget purus. Phasellus mattis diam ut mi eleifend varius. Suspendisse potenti. Mauris nec venenatis ligula. Suspendisse nisi sem, ultrices eu euismod quis, tempus in est. Sed ac turpis quam, et facilisis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras aliquet, felis ac gravida cursus, arcu nisl tempus lacus, eget suscipit diam lacus in ante. Sed dui elit, pulvinar sed vehicula non, tristique in velit. Duis nec sem nec risus venenatis commodo in a felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis lacinia purus ac dolor viverra vitae scelerisque urna luctus. Vivamus ornare quam id ante consequat eu egestas justo egestas. Cras lacinia nibh at quam venenatis mollis. Quisque facilisis, leo vitae rutrum lobortis, nibh elit volutpat nisl, scelerisque viverra velit ipsum facilisis lectus.</p>
<p>Sed vitae orci et orci venenatis condimentum ac in erat. Pellentesque vel porta neque. In hac habitasse platea dictumst. Nunc in varius velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum a nulla lacus, quis blandit nunc. Suspendisse in sollicitudin diam. Morbi posuere mi non nunc semper volutpat. In id massa vitae sapien eleifend pellentesque eget id tellus. Ut ultricies risus sed dui fermentum elementum. Suspendisse bibendum turpis et metus lobortis elementum. Morbi eu enim non neque cursus dignissim a non lacus.</p>
<p>Quisque malesuada dui non sem malesuada condimentum. Curabitur odio libero, egestas sed tristique at, cursus et sapien. Pellentesque et enim non mauris elementum aliquam. Sed volutpat eleifend orci sed vehicula. Curabitur ac ligula risus, nec gravida risus. Cras augue diam, condimentum at eleifend at, eleifend ac tellus. Donec sollicitudin quam eu lectus luctus cursus. Curabitur lobortis, orci nec accumsan varius, ipsum lacus aliquet lectus, in viverra neque leo ac dui. Sed fringilla dictum lectus id mattis. Duis eget ipsum est. Donec sed nunc vel massa vehicula condimentum non a est. Aliquam tincidunt, elit in sodales consectetur, justo erat faucibus nibh, eget pretium nibh metus eget enim. Duis suscipit magna sed eros mollis sagittis. Phasellus condimentum ipsum vel tortor eleifend volutpat. Suspendisse bibendum, augue non aliquet imperdiet, quam justo rhoncus nunc, sed tempus massa dolor vel arcu. Nullam pellentesque eleifend tellus.</p>
<p>Phasellus sed pretium metus. Nam aliquet nunc in eros faucibus placerat at ac mi. Aenean molestie, purus sed dignissim consectetur, purus massa pharetra quam, quis vehicula lacus turpis non sem. Fusce ac aliquam nulla. Morbi feugiat risus nec odio lobortis mollis. Quisque ultrices, purus ut tincidunt iaculis, justo metus volutpat sem, non vulputate felis massa faucibus tellus. Vivamus dui lacus, congue sit amet congue non, placerat non urna. Etiam mi tellus, pellentesque in volutpat a, tempus ac ligula. Duis feugiat diam et felis gravida venenatis. Nullam magna neque, porttitor quis congue vitae, vehicula aliquam orci. Quisque commodo ligula sit amet dolor lobortis porttitor.</p>
</div>
</div>
<nav id="nav">
<ul>
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
<li><a href="#">menu 5</a></li>
</ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="swpnav.js"></script>
<script>
(function($) {
var open = $('#open'),
swp = $('#content').swpnav('#nav'),
destory = $('#destory');
open.on('click', function(ev) {
ev.preventDefault();
if ( swp.swpnavGetState() ) {
swp.swpnavClose();
} else {
swp.swpnavOpen();
}
});
destory.on('click', function(ev) {
ev.preventDefault();
swp.swpnavDestroy();
alert('destoryed');
});
}(jQuery));
</script>
</body>
</html>