This repository has been archived by the owner on May 10, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathmenu.html
81 lines (71 loc) · 3.75 KB
/
menu.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Swipe to Delete</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="src/jquery.swipeButton.css" />
<style>
.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
#chat .ui-icon { background: url('http://jquerymobile.com/demos/1.2.0-rc.1/docs/toolbars/glyphish-icons/09-chat2.png') 50% 50% no-repeat; background-size: 24px 22px; }
#email .ui-icon { background: url('http://jquerymobile.com/demos/1.2.0-rc.1/docs/toolbars/glyphish-icons/18-envelope.png') 50% 50% no-repeat; background-size: 24px 16px; }
#login .ui-icon { background: url('http://jquerymobile.com/demos/1.2.0-rc.1/docs/toolbars/glyphish-icons/30-key.png') 50% 50% no-repeat; background-size: 12px 26px; }
#beer .ui-icon { background: url('http://jquerymobile.com/demos/1.2.0-rc.1/docs/toolbars/glyphish-icons/88-beermug.png') 50% 50% no-repeat; background-size: 22px 27px; }
#coffee .ui-icon { background: url('http://jquerymobile.com/demos/1.2.0-rc.1/docs/toolbars/glyphish-icons/100-coffee.png') 50% 50% no-repeat; background-size: 20px 24px; }
#skull .ui-icon { background: url('http://jquerymobile.com/demos/1.2.0-rc.1/docs/toolbars/glyphish-icons/21-skull.png') 50% 50% no-repeat; background-size: 22px 24px; }
</style>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="src/jquery.swipeButton.js"></script>
<script>
$(document).ready(function() {
// attach the plugin to an element
$('#swipeMe li').swipeDelete({
btnTheme: 'e',
click: function(e){
e.preventDefault();
var url = $(e.target).attr('href');
$(this).parents('li').slideUp();
$.post(url, function(data) {
console.log(data);
});
}
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>swipeButton</h1>
</div>
<div data-role="content">
<ul id="swipeMe" data-role="listview">
<li data-swipeurl="swiped.html?1"><a href="row-click.html">List Item One</a></li>
<li data-swipeurl="swiped.html?2"><a href="row-click.html">List Item Two</a></li>
<li data-swipeurl="swiped.html?3"><a href="row-click.html">List Item Three</a></li>
<li data-role="list-divider">Divider One</li>
<li data-swipeurl="swiped.html?4"><a href="row-click.html">List Item Four</a></li>
</ul><br />
<!-- uncomment this button to easily trigger the swipe event from a desktop browser
<br /><br />
<a href="javascript: $('#swipeMe li:nth-child(3)').trigger('swiperight')" data-role="button">trigger swipe right</a> -->
<p align="center">Swipe to the right on any list item to display the button</p>
<a href="https://github.com/commadelimited/jquery.swipeButton.js" data-role="button">Get the code</a>
</div>
<div data-role="footer" class="nav-glyphish-example">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
<ul>
<li><a href="#" id="chat" data-icon="custom">Chat</a></li>
<li><a href="#" id="email" data-icon="custom">Email</a></li>
<li><a href="#" id="skull" data-icon="custom">Danger</a></li>
<li><a href="#" id="beer" data-icon="custom">Beer</a></li>
<li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>