Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Gestures and Events in ionic framework

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.99k
    Comment on it

    Hello Readers,
    Today’s post is about gestures and events in ionic framework. Ionic framework provides gestures and events to make application more effective.

    These are the following gestures and events with Example:

    • on-hold :  This event works when we touch and stay on a location for 500ms( milliseconds ).

    Example :

    <button on-hold="onHold()" class="button">Test</button>
    $scope.onHold = function()
    {
        alert("On hold");
    }
    • on-tap :  It works on quick touch or tap on a location. So the tap is not more than 250ms otherwise it is not a tap gesture.

    Example :

    <button on-tap="onTap()" class="button">Test</button>
    $scope.onTap = function()
    {
       alert("on Tap");
    }
    • on-double-tap : On double tap works when double tap on the same location.

    Example :

    <button on-double-tap="onDoubleTap()" class="button">Test</button>
    
    $scope.onDoubleTap = function()
    {
       alert(" Double tap ");
    }
    • on-touch : When user starts to touch on a location on-touch event called immediately.

    Example :

    <button on-touch="onTouch()" class="button">Test</button>
    $scope.onTouch = function()
    {
       alert("On touch");
    }
    • on-release : This event works when user stop to touch a location.

    Example :

    <button on-release="onRelease()" class="button">Test</button>
    $scope.onRelease = function()
    {
       alert(" on release ");
    }
    • on-swipe : Works when user swipes in any direction( i.e up, down, right, left). We have four swipe gesture an follows:

    on-swipe-up :  Event works when a moving touch on  a location with high acceleration to up direction.

    on-swipe-left :  Event works when a moving touch on  a location with high acceleration to left direction.

    on-swipe-right :  Event works when a moving touch on  a location with high acceleration to right direction.

    on-swipe-down : Event works when a moving touch on  a location with high acceleration to down direction.

     Here is the full example of all swipe events :

    <ion-view view-title="on Swipe">
        <ion-content class="padding" id="eventPlaceholder" has-bouncing="false">
            <div class="row">
                <div class="col col-50" style="margin: 0 auto;" 
                 on-swipe-up="onSwipeUp()">
                  <p> Swipe up ..</p>
                </div>
            </div>
            <div class="row">
                <div class="col col-50" on-swipe-left="onSwipeLeft()">
                  <p> Swipe Left ..</p>
                </div>
                <div class="col col-50" on-swipe-right="onSwipeRight()">
                  <p> swipe right ..</p>
                </div>
            </div>
            <div class="row">
                <div class="col col-50" style="margin: 0 auto;" 
                 on-swipe-down="onSwipeDown()">
                  <p> Swipe down ..</p>
                </div>
            </div>
        </ion-content>
    </ion-view>
    angular.module('starter.controllers', [])
    .controller('DashCtrl', function($scope) {
        $scope.onSwipeUp = function()
        {
            alert("Swiping in up direction.");
        }
        $scope.onSwipeLeft = function()
        {
            alert("Swiping in left direction.");
        }
        $scope.onSwipeRight = function()
        {
            alert("Swiping in right direction.");
        }
        $scope.onSwipeDown = function()
        {
            alert("Swiping in down direction.");
        }
    })

    These are the gestures and events introduced by ionic framework. Hope this will help you :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: