Skip to content

Commit 50148aa

Browse files
patrickashpatrickash
committed
Tap Event
Documentation and example created
1 parent 48ba889 commit 50148aa

File tree

2 files changed

+114
-0
lines changed

2 files changed

+114
-0
lines changed

‎entries/tap.xml

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<?xml version="1.0"?>
2+
<entry name="tap" type="event" return="jQuery">
3+
<title>tap</title>
4+
<desc>Triggered after a quick, complete touch event.</desc>
5+
<longdesc>
6+
<p>The jQuery Mobile <code>tap</code> event triggers after a quick, complete touch event that occurs of a single target object. It is the gesture equivalent of a standard click event that is triggered on the release state of the touch gesture.</p>
7+
8+
<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
9+
<pre>
10+
<code><![CDATA[
11+
<style type="text/css">
12+
div.box {
13+
width: 3em;
14+
height: 3em;
15+
background-color: #f00;
16+
}
17+
div.box.tap {
18+
background-color: #f0f;
19+
}
20+
</style>
21+
22+
...
23+
24+
<div class="box"></div>
25+
26+
...
27+
28+
$(function(){
29+
// Bind the tapHandler callback function to the tap event on div.box
30+
$('div.box').bind('tap', tapHandler);
31+
32+
// Callback function references the event target and adds the 'tap' class to it
33+
function tapHandler(event){
34+
$(event.target).addClass('tap');
35+
}
36+
});
37+
]]></code>
38+
</pre>
39+
<p>Tap the square to see the above code applied.
40+
<iframe id="tapIframe" src="/resources/tap/example1.html" style="width:100%;height:90px;border:0px"></iframe></p>
41+
</longdesc>
42+
<added>1.0</added>
43+
<signature>
44+
<argument name="callback" type="Function" optional="true">
45+
<desc>A function to invoke after the the throttledresize event fires.</desc>
46+
</argument>
47+
</signature>
48+
<category slug="events"/>
49+
</entry>

‎resources/tap/example1.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Tap event demo</title>
7+
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
8+
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
9+
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
10+
<style>
11+
html, body { padding: 0; margin: 0; }
12+
html, .ui-mobile, .ui-mobile body {
13+
height: 85px;
14+
}
15+
.ui-mobile, .ui-mobile .ui-page {
16+
min-height: 85px;
17+
}
18+
#nav {
19+
font-size: 200%;
20+
width:17.1875em;
21+
margin:17px auto 0 auto;
22+
}
23+
#nav a {
24+
color: #777;
25+
border: 2px solid #777;
26+
background-color: #ccc;
27+
padding: 0.2em 0.6em;
28+
text-decoration: none;
29+
float: left;
30+
margin-right: 0.3em;
31+
}
32+
#nav a:hover {
33+
color: #999;
34+
border-color: #999;
35+
background: #eee;
36+
}
37+
#nav a.selected,
38+
#nav a.selected:hover {
39+
color: #0a0;
40+
border-color: #0a0;
41+
background: #afa;
42+
}
43+
div.box {
44+
width: 3em;
45+
height: 3em;
46+
background-color: #f00;
47+
}
48+
div.box.tap {
49+
background-color: #f0f;
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
<div class="box"></div>
55+
<script>
56+
$(function(){
57+
$('.box').bind('tap', tapHandler);
58+
59+
function tapHandler(event){
60+
$(event.target).addClass('tap');
61+
}
62+
});
63+
</script>
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)