entries/tap.xml

<?xml version="1.0"?>
<entry name="tap" type="event" return="jQuery">
	<title>tap</title>
	<desc>Triggered after a quick, complete touch event.</desc>
	<longdesc>
		<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>

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

		<div class="warning"><h4>Warning: Use tap with caution</h4>
			<p>Tap makes use of vclick and therefore should be used with caution on touch devices. See the <a href="../vclick/">vclick API documentation</a> for more details.</p>
		</div>
	</longdesc>
	<added>1.0</added>
	<signature>
		<argument name="callback" type="Function" optional="true">
			<desc>A function to invoke after the the tap event fires.</desc>
		</argument>
	</signature>
	<example>
		<height>120</height>
		<desc>A simple example of the capturing and acting upon a tap event</desc>
<code><![CDATA[
$(function(){
	$( "div.box" ).bind( "tap", tapHandler );

	function tapHandler( event ){
		$( event.target ).addClass( "tap" );
	}
});
]]></code>
<css><![CDATA[
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
		height: 85px;
	}
	.ui-mobile, .ui-mobile .ui-page {
		min-height: 85px;
	}
	#nav {
		font-size: 200%;
		width:17.1875em;
		margin:17px auto 0 auto;
	}
	#nav a {
		color: #777;
		border: 2px solid #777;
		background-color: #ccc;
		padding: 0.2em 0.6em;
		text-decoration: none;
		float: left;
		margin-right: 0.3em;
	}
	#nav a:hover {
		color: #999;
		border-color: #999;
		background: #eee;
	}
	#nav a.selected,
	#nav a.selected:hover {
		color: #0a0;
		border-color: #0a0;
		background: #afa;
	}
	div.box {
		width: 3em;
		height: 3em;
		background-color: #108040;
	}
	div.box.tap {
		background-color: #7ACEF4;
	}
]]></css>
<html><![CDATA[
<h3>Tap the green square to see the above code applied:</h3>
<div class="box"></div>
]]></html>
	</example>
	<category slug="events"/>
</entry>