-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·82 lines (58 loc) · 3 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
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Popr</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400|Merriweather:300,300italic" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="inc/normalize.css">
<link rel="stylesheet" href="inc/standard.css">
<link rel="stylesheet" type="text/css" href="popr/popr2.css">
<script type="text/javascript" src="popr/popr2.js"></script>
</head><body>
<!-- head -->
<div id="head"><div class="head_icon"><a href="http://www.tipue.com"><img src="img/head.png" alt="Tipue"></a></div></div>
<!-- body -->
<div class="center" style="padding-top: 100px;"><a href="http://www.tipue.com/popr/"><img src="img/front.jpg" alt="Popr"></a></div>
<div class="center"><div class="inner" style="padding-top: 27px;"><h2>Popr</h2></div></div>
<div class="center"><div class="inner norm" style="padding-top: 17px;">
<a href="http://www.tipue.com/popr/">Popr</a> is a small and simple popup menu jQuery plugin. It works on almost any element, and it's free and open source.
</div></div>
<div class="center"><div class="inner" style="padding-top: 51px;"><h2>Demo</h2></div></div>
<div class="center"><div class="inner ital" style="padding-top: 17px;">Click on something below.</div></div>
<div class="center"><div class="inner norm" style="padding-top: 17px;"><div class="popr" data-popr="popr_1">Feugait nostrud</div></div></div>
<div class="center"><div class="inner" style="padding-top: 15px;"><div class="popr" data-popr="popr_2"><img src="img/popr_options.png"></div></div></div>
<div class="center"><div class="inner norm" style="padding-top: 13px;"><div class="popr" data-popr="popr_3" data-popr-mode="top">Dolore</div></div></div>
<div class="popr-box" id="popr_1">
<a href="#">Feugait delenit</a>
<a href="#" class="active">Vero dolor et</a>
<a href="#">Exerci ipsum</a>
</div>
<div class="popr-box" id="popr_2">
<a href="#">Vero dolor et</a>
<a href="#" id="feugait">Feugait</a>
<a href="#">Commodo quis</a>
</div>
<div class="popr-box" id="popr_3">
<a href="#">Malorum</a>
<a href="#">Vero dolor et</a>
<a href="#">Exerci ipsum</a>
</div>
<div class="center"><div class="inner" style="padding-top: 39px;"><h2>Fully documented</h2></div></div>
<div class="center"><div class="inner norm" style="padding-top: 17px;">
There's full and comprehensive <a href="http://www.tipue.com/popr/">documentation</a>.
</div></div>
<div class="center ital" style="padding: 39px 0 30px 0;">© 2015, <a href="http://www.tipue.com">Tipue</a>. Made in London.</div>
<script>
jQuery(document).ready(function($){
$('body').popr2({
'selector':'.popr'
});
$(document).on('click', '#feugait', function () {
alert('Feugait');
});
});
</script>
</body>
</html>