모바일 Angular UI-터치 이벤트

Touch 및 이벤트를 사용하려면 다음 모듈을 추가해야합니다.

mobile-angular-ui.gestures

터치 모듈에만 관심이있는 경우 mobile-angular-ui.gestures.touch 만 추가 할 수 있습니다 .

$ 터치는 터치 모듈로 이용 가능한 서비스입니다. 작업하려는 모든 입력 장치에서 작동합니다. 움직임, 지속 시간, 속도, 방향 등과 같은 세부 정보를 제공합니다.

$ touch의 메서드

다음은 $ touch에서 사용 가능한 방법입니다-

묶다

bind 메소드를 살펴 보겠습니다 .

Syntax

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

Parameters

element − 터치 세부 사항을 처리하려는 html 요소.

eventHandlers− 특정 터치 이벤트에 대한 핸들러가있는 개체. 사용 가능한 eventHandlers는-

  • start − touchstart 이벤트에 대한 콜백입니다.

  • end − touchend를위한 콜백 이벤트입니다.

  • move − touchmove 이벤트에 대한 콜백입니다.

  • cancel − touchcancel 이벤트에 대한 콜백입니다.

options − 다음과 같은 세부 사항을 가질 수있는 객체입니다 −

  • movementThreshold− 정수 값. touchmove 핸들러를 트리거하기 시작하기 전 이동 픽셀 수입니다.

  • valid − 터치를 처리할지 무시할지를 결정하는 부울 값을 반환하는 함수입니다.

  • sensitiveArea− 함수, 요소 또는 BoundingClientRect 일 수 있습니다. 민감한 영역은 움직임이 외부에있을 때 터치를 해제하는 경계를 정의합니다.

  • pointerTypes − 기본 포인터 이벤트 맵의 하위 집합 인 키가있는 포인터 배열입니다.

$ touch 에서 사용 가능한 유형

다음은 $ touch에서 사용할 수있는 유형입니다-

특성 유형 기술
유형 끈 이벤트 유형을 알려줍니다. 예 : touchmove, touchstart, touchend, touchcancel
타임 스탬프 데이트 터치가 발생한 타임 스탬프
지속 int 현재 터치 이벤트와 터치 시작의 차이점
startX 흙손 터치 스타트의 X 좌표
startY 흙손 터치 스타트의 Y 좌표
prevX 흙손 이전에 발생한 touchstart 또는 touchmove의 X 좌표
이전 흙손 이전에 발생한 touchstart 또는 touchmove의 Y 좌표
엑스 흙손 터치 이벤트의 X 좌표
와이 흙손 터치 이벤트의 Y 좌표
단계 흙손 prevX, prevY 및 x, y 포인트 사이의 거리
stepX 흙손 prevX와 x 포인트 사이의 거리
스텝 Y 흙손 이전과 y 지점 사이의 거리
속도 흙손 초당 터치 이벤트의 속도 (픽셀)
평균 속도 흙손 초당 터치 스타트 이벤트의 평균 속도
거리 흙손 startX, startY 및 x, y 포인트 사이의 거리
distanceX 흙손 startX와 x 포인트 사이의 거리
거리 Y 흙손 startY 지점과 y 지점 사이의 거리
합계 흙손 전체 이동, 즉 장치에서 수행되는 수평 및 수직 이동
totalX 흙손 전체 이동, 즉 수평 방향. 회전 및 방향 변경도 포함됩니다.
totalY 흙손 전체 이동, 즉 수직 방향. 회전 및 방향 변경도 포함됩니다.
방향 흙손 터치의 좌, 상, 하, 우 방향 위치
각도 흙손 x 및 y 축으로부터의 각도

다음은 터치 유형을 보여주는 작업 예입니다.

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>

있다 touchtest $ touch.bind 메서드를 사용하는 app.js에 추가 된 지시문.

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 내부의 전체 코드는 다음과 같습니다.

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

지시문 touchtest는 아래와 같이 html 내부에서 사용됩니다.

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

이제 브라우저에서 디스플레이를 테스트 해 보겠습니다. 결과 화면은 다음과 같습니다.

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