jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
406 lines (402 loc) • 20.5 kB
HTML
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="jQuery, Tooltip, jqxTooltip, tool tip, tip, title, popup" />
<meta name="description" content="This page represents the help documentation of the jqxTooltip widget." />
<title>jqxTouch API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">Properties</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>orientationChangeEnabled</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Indicates whether the orientationchange event is enabled.
</p>
<h4>Code examples</h4>
<p>
Set the <code>orientationChangeEnabled</code> property.
</p>
<pre><code>$('#jqxTouch').jqxTouch({orientationChangeEnabled: false});</code></pre>
<p>
Get the <code>orientationChangeEnabled</code> property.
</p>
<pre><code>var orientationChangeEnabled = $('#jqxTouch').jqxTouch('orientationChangeEnabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nRCqg/">orientationChangeEnabled is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='property-name-disabled'>swipeMin</span>
</td>
<td>
<span>Number</span>
</td>
<td>50
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Defines the minimum swipe distance required by the plugin.
</p>
<h4>Code examples</h4>
<p>
Set the <code>swipeMin</code> property.
</p>
<pre><code>$('#jqxTouch').jqxTouch({swipeMin: 20});</code></pre>
<p>
Get the <code>swipeMin</code> property.
</p>
<pre><code>var swipeMin = $('#jqxTouch').jqxTouch('swipeMin');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QxH7c/">swipeMin is set to 20</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>swipeMax</span>
</td>
<td>
<span>Number</span>
</td>
<td>500
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Defines the maximum swipe distance. After it is passed the propagation of the touch event will be restored, therefore the scrolling will be available.
</p>
<h4>Code examples</h4>
<p>
Set the <code>swipeMax</code> property.
</p>
<pre><code>$('#jqxTouch').jqxTouch({swipeMax: 200});</code></pre>
<p>
Get the <code>swipeMax</code> property.
</p>
<pre><code>var swipeMax = $('#jqxTouch').jqxTouch('swipeMax');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7X9Le/">swipeMax is set to 200</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>swipeDelay</span>
</td>
<td>
<span>Number</span>
</td>
<td>1000
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
The swipe delay. After it is passed swipe event won't be fired.
</p>
<h4>Code examples</h4>
<p>
ISet the <code>swipeDelay</code> property.
</p>
<pre><code>$('#jqxTouch').jqxTouch({swipeDelay: 800});</code></pre>
<p>
Get the <code>swipeDelay</code> property.
</p>
<pre><code>var swipeDelay = $('#jqxTouch').jqxTouch('swipeDelay');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/u4NBb/">swipeDelay is set to 2000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>tapHoldDelay</span>
</td>
<td>
<span>Number</span>
</td>
<td>750
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
The taphold delay. If this delay is passed then taphold event will be fired.
</p>
<h4>Code examples</h4>
<p>
Set the <code>tapHoldDelay</code> property.
</p>
<pre><code>$('#jqxTouch').jqxTouch({tapHoldDelay: 600});</code></pre>
<p>
Get the <code>tapHoldDelay</code> property.
</p>
<pre><code>var tapHoldDelay = $('#jqxTouch').jqxTouch('tapHoldDelay');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZEFkC/">tapHoldDelay is set to 1000</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Events</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>orientationchange</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the device's orientation is changed.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>orientationchange</code> event by type: jqxTouch.
</p>
<pre><code>$('#jqxTouch').on('orientationchange', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n2rjw/">Bind to the orientationchange event by type: jqxTouch.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>swipe</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user swipes left, right, up or down.
</p>
<h4>Code examples</h4>
<p>
Bind to the swipe event by type: jqxTouch.
</p>
<pre><code>$('#jqxTouch').on('swipe', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bw4wf/">Bind to the swipe event by type: jqxTouch.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>swipeleft</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user swipes left.
</p>
<h4>Code examples</h4>
<p>
Bind to the swipe<code>swipeleft</code> event by type: jqxTouch.
</p>
<pre><code>$('#jqxTouch').on('swipeleft', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/t5Ujt/">Bind to the swipeleft event by type: jqxTouch.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>swiperight</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user swipes right.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>swiperight</code> event by type: jqxTouch.
</p>
<pre><code>$('#jqxTouch').on('swiperight', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pB5zd/">Bind to the swiperight event by type: jqxTouch.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>swipetop</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user swipes top.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>swipetop</code> event by type: jqxTouch.
</p>
<pre><code>$('#jqxTouch').on('swipetop', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bpBsK/">Bind to the swipetop event by type: jqxTouch.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>swipebottom</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user swipes bottom.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>swipebottom</code> event by type: jqxTouch.
</p>
<pre><code>$('#jqxTouch').on('swipebottom', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4ncVE/">Bind to the swipebottom event by type: jqxTouch.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>tap</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user taps an element.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>tap</code> event by type: jqxTouch.
</p>
<pre><code>$('#jqxTouch').on('tap', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TCURd/">Bind to the tap event by type: jqxTouch.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>taphold</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the user taps an element and holds a specific amount of time specified by the 'tapHoldDelay' property.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>taphold</code> event by type: jqxTouch.
</p>
<pre><code>$('#jqxTouch').on('taphold', function () { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9krFZ/">Bind to the taphold event by type: jqxTouch.</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>