Mobile Angular UI - Swipe Gestures-alljchome-开发者的教程家园

Mobile Angular UI Tutorial

Selected Reading

Mobile Angular UI - Swipe Gestures

The functionapty pke touch, swipes, dragging items is handled by the gestures module in Mobile Angular UI. The gestures module has a directive and services to take care of the functionapty required in touch, swipe and drag.

To work with gestures features in Mobile Angular UI, you need to add the gestures module.

First add the JavaScript file inside index.html as shown below −


<script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>

Later add the gestures module as a dependency in app.js as shown below −


var app=angular.module( myFirstApp , [
    ngRoute ,
    mobile-angular-ui ,
    mobile-angular-ui.gestures 
]);

We have already discussed how drag functionapty works using the gesture module. Take a look at the same in Drag and Drop Chapter.

Here will take a look at the swipe functionapty.

The directive uiSwipeLeft and uiSwipeRight present helps to detect the direction in which the user has swiped.

Here is a working example on Swipe −

index.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Mobile Angular UI Demo</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
      <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
      <pnk rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" />
      <script src="node_modules/angular/angular.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script>
      <pnk rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
   </head>
   <body ng-app="myFirstApp" ng-controller="MainController">
   
      <!-- Sidebars -->
      <span class="sidebar sidebar-left">
         <span class="scrollable">
            <h1 class="scrollable-header app-name">Tutorials</h1>
            <span class="scrollable-content">
               <span class="pst-group" ui-turn-off= uiSidebarLeft >
                  <a class="pst-group-item" href="/">Home Page </a>
                  <a class="pst-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
                  <a class="pst-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
                  <a class="pst-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
                  <a class="pst-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
                  <a class="pst-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
                  <a class="pst-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
               </span>
            </span>
         </span>
      </span>
      <span class="sidebar sidebar-right">
         <span class="scrollable">
            <h1 class="scrollable-header app-name">eBooks</h1>
            <span class="scrollable-content">
               <span class="pst-group" ui-toggle="uiSidebarRight">
                  <a class="pst-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
                  <a class="pst-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
               </span>
            </span>
         </span>
      </span>
      <span class="app">
         <span class="navbar navbar-app navbar-absolute-top">
            <span class="navbar-brand navbar-brand-center" ui-yield-to="title">
               TutorialsPoint
            </span>
            <span class="btn-group pull-left">
               <span ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
                  <i class="fa fa-th-large "></i> Tutorials
               </span>
            </span>
            <span class="btn-group pull-right" ui-yield-to="navbarAction">
               <span ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
                  <i class="fal fa-search"></i> eBooks
               </span>
            </span>
         </span>
         <span class="navbar navbar-app navbar-absolute-bottom">
            <span class="btn-group justified">
               <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a>
               <a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a>
            </span>
         </span>

         <!-- App body -->
         <span class= app-body >
            <span class= app-content >
               <ng-view></ng-view>
            </span>
         </span>
      </span><!-- ~ .app -->

      <!-- Modals and Overlays -->
      <span ui-yield-to="modals"></span>
   </body>
</html>

/js/app.js


/* espnt no-alert: 0 */

 use strict ;

//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app=angular.module( myFirstApp , [
    ngRoute ,
    mobile-angular-ui ,
    mobile-angular-ui.gestures 
]);
app.config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when("/", {
      templateUrl : "src/home/home.html"
   });
   $locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive( dragItem , [ $drag , function($drag) {
   return {
      controller: function($scope, $element) {
         $drag.bind($element,
            {
               transform: $drag.TRANSLATE_BOTH,
               end: function(drag) {
                  drag.reset();
               }
            },
            {
               sensitiveArea: $element.parent()
            }
         );
      }
   };
}]);
app.controller( MainController , function($rootScope, $scope, $routeParams) {
   $scope.testSwipe=function(direction) {
      alert( You swiped   + direction);
   };
});

src/home/home.html


<span class="scrollable">
      <span class="scrollable-content section"
         ui-swipe-left="testSwipe( left side )"
         ui-swipe-right="testSwipe( right side )">
      <h2>Testing of Swipe gesture</h2>
      <span>
         Swipe left and right to activate the uiSwipeLeft and uiSwipeRight Directive.
      </span>
   </span>
</span>

Following is the display in the browser −

The directive for swipe are added inside home.html.


<span class="scrollable-content section"
   ui-swipe-left="testSwipe( left side )"
   ui-swipe-right="testSwipe( right side )">

It calls a method testSwipe(), it is defined in app.js.


$scope.testSwipe=function(direction) {
   alert( You swiped   + direction);
};

Mobile Angular UI - Swipe Gestures

友情链接