Giao diện người dùng góc di động - Sự kiện cảm ứng

Để làm việc với Touch và các sự kiện của nó, bạn cần thêm mô-đun sau:

mobile-angular-ui.gestures

Nếu bạn chỉ quan tâm đến mô-đun cảm ứng, thì bạn chỉ có thể thêm mobile-angle-ui.gestures.touch .

$ touch là một dịch vụ có sẵn với mô-đun cảm ứng. Nó sẽ hoạt động trên bất kỳ thiết bị đầu vào nào bạn muốn làm việc. Nó cung cấp các chi tiết như chuyển động, thời lượng, vận tốc, hướng, v.v.

Các phương pháp trong $ touch

Sau đây là các phương pháp khả dụng trong $ touch -

trói buộc

Hãy để chúng tôi xem xét phương thức ràng buộc .

Syntax

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

Parameters

element - phần tử html bạn muốn xử lý các chi tiết liên lạc.

eventHandlers- Một đối tượng có trình xử lý cho các sự kiện chạm cụ thể. Các bộ xử lý sự kiện có sẵn là -

  • start - đó là một cuộc gọi lại cho sự kiện touchstart.

  • end - đó là một sự kiện gọi lại để chạm vào.

  • move - đó là một cuộc gọi lại cho sự kiện touchmove.

  • cancel - đó là một cuộc gọi lại cho sự kiện hủy liên lạc.

options - Nó là một đối tượng có thể có các chi tiết như sau -

  • movementThreshold- Một giá trị nguyên. Số lượng pixel chuyển động trước khi bắt đầu để kích hoạt trình xử lý cảm ứng.

  • valid - Đây là một hàm trả về giá trị boolean quyết định xem có nên xử lý hay bỏ qua một lần chạm hay không.

  • sensitiveArea- Nó có thể là một hàm, hoặc phần tử hoặc BoundClientRect. Vùng nhạy cảm xác định ranh giới để giải phóng cảm ứng khi có chuyển động bên ngoài.

  • pointerTypes - Là một mảng con trỏ có các khóa là một tập con của bản đồ sự kiện con trỏ mặc định.

Các loại có sẵn trong $ touch

Sau đây là các loại có sẵn trong $ touch -

Bất động sản Kiểu Sự miêu tả
kiểu chuỗi Điều này sẽ cho bạn biết loại sự kiện. Ví dụ - touchmove, touchstart, touchhend, touchcancel
dấu thời gian Ngày Dấu thời gian khi chạm xảy ra
thời hạn int Sự khác biệt giữa sự kiện chạm hiện tại và bắt đầu chạm
startX Phao nổi Tọa độ X của touchstart
bắt đầuY Phao nổi Tọa độ Y của touchstart
trước đây Phao nổi Tọa độ X của touchstart hoặc touchmove đã xảy ra trước đó
trướcY Phao nổi Tọa độ Y của touchstart hoặc touchmove đã xảy ra trước đó
x Phao nổi Tọa độ X của sự kiện chạm
y Phao nổi Tọa độ Y của sự kiện chạm
bươc Phao nổi Khoảng cách giữa các điểm trước, trước Y và x, y
stepX Phao nổi Khoảng cách giữa điểm trước và x
bướcY Phao nổi Khoảng cách giữa điểm Y và Y
vận tốc Phao nổi Vận tốc tính bằng pixel của sự kiện chạm trên giây
vận tốc trung bình Phao nổi Tốc độ trung bình của sự kiện bắt đầu cảm ứng mỗi giây
khoảng cách Phao nổi Khoảng cách giữa các điểm startX, startY và x, y
khoảng cáchX Phao nổi Khoảng cách giữa điểm startX và x
khoảng cáchY Phao nổi Khoảng cách giữa điểm startY và y
toàn bộ Phao nổi Tổng chuyển động tức là chuyển động ngang và dọc được thực hiện trên thiết bị
totalX Phao nổi Tổng chuyển động tức là hướng ngang, nó cũng bao gồm quay vòng và thay đổi hướng
tổng sốY Phao nổi Tổng chuyển động tức là hướng thẳng đứng. Nó cũng bao gồm quay vòng và thay đổi hướng
phương hướng Phao nổi Vị trí hướng trái, trên, dưới, phải của cảm ứng
góc Phao nổi Góc tính bằng độ từ trục x và y

Đây là một ví dụ hoạt động hiển thị các loại cảm ứng.

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>

Có touchtest chỉ thị được thêm vào app.js sử dụng phương thức $ touch.bind.

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();
            }
         });
      }
   };
}]);

Mã hoàn chỉnh bên trong app.js như sau:

/* 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 chỉ thị được sử dụng bên trong html như hình dưới đây -

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

Bây giờ chúng ta hãy kiểm tra màn hình hiển thị trong trình duyệt. Màn hình kết quả như sau:

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