Open In App

jQWidgets jqxTouch swipeMax Property

Improve
Improve
Like Article
Like
Save
Share
Report

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 swipeMax property is used for setting or getting the maximum swipe distance for the specified jqxTouch widget. After passing the propagation of the touch event will be restored, therefore the scrolling will be available.

Syntax:

  • For setting the swipeMax property:

    $('#jqxTouch').jqxTouch({swipeMax: 300});
  •  

  • For getting the swipeMax property:

    var swipeMin = $('#jqxTouch').jqxTouch('swipeMax');

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 swipeMax property. In the below example, the value for the swipeMax property has been set to 300.

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;">
            GeeksforGeeks
        </h1>
        <h3>
            jQWidgets jqxTouch swipeMax 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_swipeMax"
         value="Value of the swipeMax property"/>
        <div id="log"></div>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#jqx_Touch').jqxTouch({
                    swipeMax: 300
                });
                $('#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_swipeMax").
                    jqxButton({
                        width: 300
                    });
                $("#button_for_swipeMax").click(
                    function () {
                        var swipeMax_Value =
                          $('#jqx_Touch').
                             jqxTouch('swipeMax');
                     $("#log").html(swipeMax_Value);
                    });
            });
        </script>
    </center>
</body>
  
</html>


Output:

Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtouch/jquery-touch-api.htm



Last Updated : 14 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads