jQWidgets jqxTouch tapHoldDelay Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTouch is used for identifying and triggering touch events such as âswipeâ, âswipe leftâ, âswipe rightâ, âtapâ, and âorientationchangeâ on touch-enabled devices.
The tapHoldDelay property is used for setting or getting the taphold delay for the specified jqxTouch widget. The taphold event will be fired when this delay is passed.
Syntax:
-
For setting the tapHoldDelay property:
$('#jqxTouch').jqxTouch({tapHoldDelay: 999});
-
For getting the tapHoldDelay property:
var swipeMin = $('#jqxTouch').jqxTouch('tapHoldDelay');
Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=âstylesheetâ href=âjqwidgets/styles/jqx.base.cssâ type=âtext/cssâ />
<script type=âtext/javascriptâ src=âscripts/jquery.jsâ></script>
<script type=âtext/javascriptâ src=âjqwidgets/jqxcore.jsâ></script>
<script type=âtext/javascriptâ src=âjqwidgets/jqxtouch.jsâ></script>
<script type=âtext/javascriptâ src=âscripts/jqx-all.jsâ></script>
Example: The below example illustrates the jQWidgets jqxTouch tapHoldDelay property. In the below example, the value for the tapHoldDelay property has been set to 2500.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "jqwidgets/styles/jqx.base.css" type = "text/css" /> < script type = "text/javascript" src = "scripts/jquery.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxcore.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxtouch.js" > </ script > < script type = "text/javascript" src = "scripts/jqx-all.js" > </ script > </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < h3 > jQWidgets jqxTouch tapHoldDelay Property </ h3 > < div id = "jqx_Touch" > < div style="height: 100px; width: 350px; color: black; border-radius: 10px; background: green;"> < b >Swipe, Swipe Left, Swipe Right and Tap</ b > </ div > </ div > < input type = "button" style = "margin: 28px;" id = "button_for_tapHoldDelay" value = "Value of the tapHoldDelay property" /> < div id = "log" ></ div > < script type = "text/javascript" > $(document).ready(function () { $('#jqx_Touch').jqxTouch({ tapHoldDelay: 2500 }); $('#jqx_Touch').on('swipeleft', function () { $("#log").html("Swiped left"); }); $('#jqx_Touch').on('swiperight', function () { $("#log").html("Swiped right"); }); $('#jqx_Touch').on('tap', function () { $("#log").html("Tapped"); }); $('#jqx_Touch').on('swipe', function () { $("#log").html("Swiped"); }); $("#button_for_tapHoldDelay"). jqxButton({ width: 300 }); $("#button_for_tapHoldDelay").click( function () { var tapHoldDelay_Value = $('#jqx_Touch'). jqxTouch('tapHoldDelay'); $("#log").html(tapHoldDelay_Value); }); }); </ script > </ center > </ body > </ html > |
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtouch/jquery-touch-api.htm
Contact Us