Mobile Angular UI - Berührungsereignisse

Um mit Touch und seinen Ereignissen zu arbeiten, müssen Sie das folgende Modul hinzufügen:

mobile-angular-ui.gestures

Wenn Sie nur an dem Touch-Modul interessiert sind, können Sie nur mobile-angle-ui.gestures.touch hinzufügen .

$ touch ist ein Dienst, der mit dem Touch-Modul verfügbar ist. Es funktioniert auf allen Eingabegeräten, mit denen Sie arbeiten möchten. Es gibt Details wie Bewegung, Dauer, Geschwindigkeit, Richtung usw.

Methoden in $ touch

Das Folgende sind die verfügbaren Methoden in $ touch -

binden

Werfen wir einen Blick auf die Bindemethode .

Syntax

$touch.bind(element, eventHandlers, [options])

Parameters

element - HTML-Element, mit dem Sie sich mit Berührungsdetails befassen möchten.

eventHandlers- Ein Objekt mit Handlern für bestimmte Berührungsereignisse. Die verfügbaren eventHandler sind -

  • start - Es ist ein Rückruf für ein Touchstart-Ereignis.

  • end - Es ist ein Rückrufereignis für Touchend.

  • move - Es ist ein Rückruf für ein Touchmove-Ereignis.

  • cancel - Es ist ein Rückruf für ein Touchcancel-Ereignis.

options - Es ist ein Objekt, das folgende Details haben kann: -

  • movementThreshold- Ein ganzzahliger Wert. Die Anzahl der Bewegungspixel vor dem Start, um Touchmove-Handler auszulösen.

  • valid - Diese Funktion gibt einen booleschen Wert zurück, der entscheidet, ob eine Berührung behandelt oder ignoriert werden soll.

  • sensitiveArea- Es kann sich um eine Funktion, ein Element oder BoundingClientRect handeln. Der empfindliche Bereich definiert Grenzen, um Berührungen freizugeben, wenn sich die Bewegung außerhalb befindet.

  • pointerTypes - Es handelt sich um ein Zeigerarray mit Schlüsseln, die eine Teilmenge der Standardzeiger für Zeigerereignisse darstellen.

Typen verfügbar in $ touch

Die folgenden Typen sind in $ touch verfügbar -

Eigentum Art Beschreibung
Art Zeichenfolge Hier erfahren Sie, welche Art von Ereignis vorliegt. Zum Beispiel - touchmove, touchstart, touchend, touchcancel
Zeitstempel Datum Der Zeitstempel, zu dem die Berührung stattgefunden hat
Dauer int Unterschied zwischen aktuellem Berührungsereignis und Berührungsstart
startX schweben X-Koordinate des Touchstarts
StartY schweben Y-Koordinate des Touchstarts
prevX schweben X-Koordinate des zuvor aufgetretenen Touchstarts oder Touchmoves
vorher schweben Y-Koordinate des zuvor aufgetretenen Touchstarts oder Touchmoves
x schweben X-Koordinate des Berührungsereignisses
y schweben Y-Koordinate des Berührungsereignisses
Schritt schweben Der Abstand zwischen prevX, prevY und x, y Punkten
stepX schweben Der Abstand zwischen prevX und x Punkten
stepY schweben Der Abstand zwischen prevY und y Punkten
Geschwindigkeit schweben Geschwindigkeit in Pixel eines Berührungsereignisses pro Sekunde
Durchschnittsgeschwindigkeit schweben Durchschnittliche Geschwindigkeit des Touchstart-Ereignisses pro Sekunde
Entfernung schweben Der Abstand zwischen startX, startY und x, y Punkten
distanceX schweben Der Abstand zwischen startX und x Punkten
EntfernungY schweben Der Abstand zwischen startY und y Punkten
gesamt schweben Die Gesamtbewegung, dh die horizontale und vertikale Bewegung, die über das Gerät ausgeführt wird
totalX schweben Die Gesamtbewegung, dh die horizontale Richtung. Sie umfasst auch Umkehrungen und Richtungsänderungen
totalY schweben Die Gesamtbewegung, dh die vertikale Richtung. Sie umfasst auch Umkehrungen und Richtungsänderungen
Richtung schweben Die Berührungsposition in der linken, oberen, unteren und rechten Richtung
Winkel schweben Der Winkel in Grad von der x- und y-Achse

Hier ist ein Arbeitsbeispiel, das die Berührungstypen zeigt.

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" />
      <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <link 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>
      <link rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
      <style>
         a.active {
            color: blue;
         }
      </style>
   </head>

   <body ng-app="myFirstApp" ng-controller="MainController" class="listening">
      
      <!-- Sidebars -->
      <div class="sidebar sidebar-left ">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">Tutorials</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-turn-off='uiSidebarLeft'>
                  <a class="list-group-item" href="/">Home Page </a>
                  <a class="list-group-item" href="#/academic"><i class ="fa fa-caret-right"></i>Academic Tutorials </a>
                  <a class="list-group-item" href="#/bigdata"><i class ="fa fa-caret-right"></i>Big Data & Analytics </a>
                  <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
                  <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
                  <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
                  <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
               </div>
            </div>
         </div>
      </div>
      <div class="sidebar sidebar-right">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">eBooks</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-toggle="uiSidebarRight">
                  <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
                  <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
               </div>
            </div>
         </div>
      </div>
      <div class="app">
         <div class="navbar navbar-app navbar-absolute-top">
            <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
               TutorialsPoint
            </div>
            <div class="btn-group pull-left">
               <div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
                  <i class="fa fa-th-large "></i> Tutorials
               </div>
            </div>
            <div class="btn-group pull-right" ui-yield-to="navbarAction">
               <div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
                  <i class="fal fa-search"></i> eBooks
               </div>
            </div>
         </div>
         <div class="navbar navbar-app navbar-absolute-bottom">
            <div 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>
            </div>
         </div>

         <!-- App body -->
         <div class='app-body'>
            <div class='app-content'>
               <ng-view></ng-view>
            </div>
         </div>
      </div><!-- ~ .app -->
      
      <!-- Modals and Overlays -->
      <div ui-yield-to="modals"></div>
   </body>
</html>

Es gibt touchtest In app.js hinzugefügte Direktive, die die Methode $ touch.bind verwendet.

directive('touchtest', ['$touch', function($touch) {
   return {
      restrict: 'C',
      link: function($scope, elem) {
         $scope.touch=null;
         $touch.bind(elem, {
            start: function(touch) {
               $scope.containerRect=elem[0].getBoundingClientRect();
               $scope.touch=touch;
               $scope.$apply();
            },
            cancel: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            move: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            end: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            }
         });
      }
   };
}]);

Der vollständige Code in app.js lautet wie folgt:

/* eslint 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('touchtest', ['$touch', function($touch) {
   return {
      restrict: 'C',
      link: function($scope, elem) {
         $scope.touch=null;
         $touch.bind(elem, {
            start: function(touch) {
               $scope.containerRect=elem[0].getBoundingClientRect();
               $scope.touch=touch;
               $scope.$apply();
            },
            cancel: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            move: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            },
            end: function(touch) {
               $scope.touch=touch;
               $scope.$apply();
            }
         });
      }
   };
}]);
app.controller('MainController', function($rootScope, $scope, $routeParams) {
   $scope.msg="Welcome to TutorialsPoint!";
});

src/home/home.html

Die Direktive touchtest wird im HTML wie unten gezeigt verwendet -

<div class="section touchtest">
   <h4>Touch Around on the screen to see the values changing</h4>
   <div>
      <p>type: {{touch.type}}</p>
      <p>direction: {{touch.direction == null ? '-' : touch.direction}}</p>
      <p>point: [{{touch.x}}, {{touch.y}}]</p>
      <p>step: {{touch.step}} [{{touch.stepX}}, {{touch.stepY}}]</p>
      <p>distance: {{touch.distance}} [{{touch.distanceX}}, {{touch.distanceY}}]</p>
      <p>total: {{touch.total}} [{{touch.totalX}}, {{touch.totalY}}]</p>
      <p>velocity: {{touch.velocity}} px/sec</p>
      <p>averageVelocity: {{touch.averageVelocity}} px/sec</p>
      <p>angle: {{touch.angle == null ? '-' : touch.angle}} deg</p>
   </div>
</div>

Lassen Sie uns nun die Anzeige im Browser testen. Der resultierende Bildschirm ist wie folgt:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved