Mobil Açısal Kullanıcı Arayüzü - Dokunma Olayları

Touch ve olaylarıyla çalışmak için aşağıdaki modülü eklemeniz gerekir -

mobile-angular-ui.gestures

Dokunmatik modülle sadece ilgileniyorsanız, yalnızca mobile-angular-ui.gestures.touch ekleyebilirsiniz .

$ touch, dokunmatik modül ile kullanılabilen bir hizmettir. Çalışmak istediğiniz tüm giriş cihazlarında çalışacaktır. Hareket, süre, hız, yön vb. Ayrıntıları verir.

$ Touch'taki yöntemler

Aşağıdakiler $ touch'ta kullanılabilen yöntemlerdir -

bağlamak

Bağlama yöntemine bir göz atalım .

Syntax

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

Parameters

element - dokunma ayrıntılarıyla uğraşmak istediğiniz html öğesi.

eventHandlers- Belirli dokunma olayları için işleyicilere sahip bir nesne. Mevcut eventHandler'lar şunlardır:

  • start - touchstart olayı için bir geri arama.

  • end - touchend için bir geri arama olayı.

  • move - touchmove olayı için bir geri arama.

  • cancel - dokunmatik iptal olayı için bir geri arama.

options - Aşağıdaki gibi detaylara sahip olabilen bir nesnedir -

  • movementThreshold- Bir tamsayı değeri. Touchmove işleyicilerini tetiklemeye başlamadan önceki hareket piksellerinin sayısı.

  • valid - Bir dokunuşun işlenip işlenmeyeceğine veya yok sayılacağına karar veren bir boole değeri döndüren bir işlevdir.

  • sensitiveArea- Bir işlev veya öğe veya BoundingClientRect olabilir. Hassas alan, hareket dışarıdayken dokunmayı serbest bırakmak için sınırları tanımlar.

  • pointerTypes - Varsayılan işaretçi olayları haritasının bir alt kümesi olan anahtarlara sahip bir işaretçi dizisidir.

Mevcut Türleri $ dokunuş

Aşağıdakiler $ touch'ta bulunan türlerdir -

Emlak Tür Açıklama
tip dizi Bu size olayın türünü söyleyecektir. Örneğin - touchmove, touchstart, touchend, touchcancel
zaman damgası Tarih Dokunmanın gerçekleştiği zaman damgası
süresi int Mevcut dokunma olayı ve dokunma başlangıcı arasındaki fark
startX yüzer Touchstart'ın X koordinatı
startY yüzer Touchstart'ın Y koordinatı
öncekiX yüzer Daha önce gerçekleşen touchstart veya touchmove'un X koordinatı
önceki yüzer Daha önce gerçekleşen touchstart veya touchmove'un Y koordinatı
x yüzer Dokunma olayının X koordinatı
y yüzer Dokunma olayının Y koordinatı
adım yüzer PrevX, prevY ve x, y noktaları arasındaki mesafe
stepX yüzer PrevX ve x noktaları arasındaki mesafe
stepY yüzer Önceki ve y noktaları arasındaki mesafe
hız yüzer Saniyede bir dokunma olayının piksel cinsinden hızı
ortalama hız yüzer Saniye başına touchstart olayının ortalama hızı
mesafe yüzer StartX, startY ve x, y noktaları arasındaki mesafe
mesafeX yüzer StartX ve x noktaları arasındaki mesafe
mesafeY yüzer StartY ve y noktaları arasındaki mesafe
Toplam yüzer Cihaz boyunca yapılan toplam hareket, yani yatay ve dikey hareket
toplamX yüzer Toplam hareket, yani yatay yön.Ayrıca, dönüşleri ve yön değişikliklerini de içerir.
toplamY yüzer Toplam hareket, yani dikey yön.Ayrıca geri dönüşleri ve yön değişikliklerini de içerir.
yön yüzer Dokunmanın sol, üst, alt, sağ yön konumu
açı yüzer X ve y ekseninden derece cinsinden açı

İşte dokunma türlerini gösteren bir çalışma örneği.

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>

Var touchtest $ touch.bind yöntemini kullanan app.js'ye eklenen yönerge.

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.js içindeki kodun tamamı aşağıdaki gibidir -

/* 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

Direktif dokunmatik testi, aşağıda gösterildiği gibi html içinde kullanılır -

<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>

Şimdi tarayıcıda ekranı test edelim. Ortaya çıkan ekran aşağıdaki gibidir -

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