Skip to content

Commit c1e5b13

Browse files
committed
moved tap example from iframe to within description
1 parent f7fc90c commit c1e5b13

File tree

2 files changed

+59
-97
lines changed

2 files changed

+59
-97
lines changed

entries/tap.xml

Lines changed: 59 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,44 +6,72 @@
66
<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"/>
9-
<pre>
10-
<code><![CDATA[
11-
<style type="text/css">
12-
div.box {
13-
background-color: #598611;
14-
height: 3em;
15-
width: 3em;
16-
}
17-
div.box.tap {
18-
background-color: #BB6F04;
19-
}
20-
</style>
21-
22-
...
239

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" ).on( '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 green 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>
4110
</longdesc>
4211
<added>1.0</added>
4312
<signature>
4413
<argument name="callback" type="Function" optional="true">
4514
<desc>A function to invoke after the the tap event fires.</desc>
4615
</argument>
4716
</signature>
17+
<example>
18+
<height>120</height>
19+
<desc>A simple example of the capturing and acting upon a tap event</desc>
20+
<code><![CDATA[
21+
$(function(){
22+
$( "div.box" ).bind( "tap", tapHandler );
23+
24+
function tapHandler( event ){
25+
$( event.target ).addClass( "tap" );
26+
}
27+
});
28+
]]></code>
29+
<css><![CDATA[
30+
html, body { padding: 0; margin: 0; }
31+
html, .ui-mobile, .ui-mobile body {
32+
height: 85px;
33+
}
34+
.ui-mobile, .ui-mobile .ui-page {
35+
min-height: 85px;
36+
}
37+
#nav {
38+
font-size: 200%;
39+
width:17.1875em;
40+
margin:17px auto 0 auto;
41+
}
42+
#nav a {
43+
color: #777;
44+
border: 2px solid #777;
45+
background-color: #ccc;
46+
padding: 0.2em 0.6em;
47+
text-decoration: none;
48+
float: left;
49+
margin-right: 0.3em;
50+
}
51+
#nav a:hover {
52+
color: #999;
53+
border-color: #999;
54+
background: #eee;
55+
}
56+
#nav a.selected,
57+
#nav a.selected:hover {
58+
color: #0a0;
59+
border-color: #0a0;
60+
background: #afa;
61+
}
62+
div.box {
63+
width: 3em;
64+
height: 3em;
65+
background-color: #108040;
66+
}
67+
div.box.tap {
68+
background-color: #7ACEF4;
69+
}
70+
]]></css>
71+
<html><![CDATA[
72+
<h3>Tap the green square to see the above code applied:</h3>
73+
<div class="box"></div>
74+
]]></html>
75+
</example>
4876
<category slug="events"/>
4977
</entry>

resources/tap/example1.html

Lines changed: 0 additions & 66 deletions
This file was deleted.

0 commit comments

Comments
 (0)