Skip to content

Commit aeedcbe

Browse files
patrickashpatrickash
committed
Touch Event Updates
Corrected a typo in the tap event long description; added instruction to the tap example. Created the taphold doc and example.
1 parent db80fa3 commit aeedcbe

File tree

4 files changed

+120
-1
lines changed

4 files changed

+120
-1
lines changed

‎entries/tap.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<title>tap</title>
44
<desc>Triggered after a quick, complete touch event.</desc>
55
<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>
6+
<p>The jQuery Mobile <code>tap</code> event triggers after a quick, complete touch event that occurs on 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>
77

88
<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
99
<pre>

‎entries/taphold.xml

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<?xml version="1.0"?>
2+
<entry name="tap" type="event" return="jQuery">
3+
<title>taphold</title>
4+
<desc>Triggered after a sustained complete touch event.</desc>
5+
<longdesc>
6+
<p>The jQuery Mobile <code>taphold</code> event triggers after a sustained, complete touch event (also known as a long press).</p>
7+
8+
<p><code>$.event.special.tap.tapholdThreshold (default: 750) - </code> The tapholdThreshold property is how long (in milliseconds) the user must hold their tap before the taphold event fires on the target element.</p>
9+
10+
<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
11+
<pre>
12+
<code><![CDATA[
13+
<style type="text/css">
14+
div.box {
15+
background-color: #f00;
16+
height: 3em;
17+
width: 3em;
18+
}
19+
div.box.taphold {
20+
background-color: #fc0;
21+
}
22+
</style>
23+
24+
...
25+
26+
<h3>Long-press the red square to change it's color:</h3>
27+
<div class="box"></div>
28+
29+
...
30+
31+
$(function(){
32+
// Bind the tapholdHandler callback function to the taphold event on div.box
33+
$('div.box').bind( 'taphold', tapholdHandler );
34+
35+
// Callback function references the event target and adds the 'tap' class to it
36+
function tapholdHandler( event ){
37+
$(event.target).addClass( 'taphold' );
38+
}
39+
});
40+
]]></code>
41+
</pre>
42+
<p>Long press the square for 750 milliseconds to see the above code applied.
43+
<iframe id="tapholdIframe" src="/resources/taphold/example1.html" style="width:100%;height:90px;border:0px"></iframe></p>
44+
</longdesc>
45+
<added>1.0</added>
46+
<signature>
47+
<argument name="callback" type="Function" optional="true">
48+
<desc>A function to invoke after the the taphold event fires.</desc>
49+
</argument>
50+
</signature>
51+
<category slug="events"/>
52+
</entry>

‎resources/tap/example1.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
</style>
5252
</head>
5353
<body>
54+
<h3>Tap the red square to change it's color:</h3>
5455
<div class="box"></div>
5556
<script>
5657
$(function(){

‎resources/taphold/example1.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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>Taphold 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.taphold {
49+
background-color: #fc0;
50+
}
51+
</style>
52+
</head>
53+
<body>
54+
<h3>Long-press the red square to change it's color:</h3>
55+
<div class="box"></div>
56+
<script>
57+
$(function(){
58+
$('div.box').bind( 'taphold', tapholdHandler );
59+
60+
function tapholdHandler( event ){
61+
$(event.target).addClass( 'taphold' );
62+
}
63+
});
64+
</script>
65+
</body>
66+
</html>

0 commit comments

Comments
 (0)