آموزش سوایپ کردن در برنامه نویسی انگولار

4 سال پیش

امتیاز دهید post

آموزش سوایپ کردن در برنامه نویسی انگولار

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش سوایپ کردن در برنامه نویسی انگولار خواهیم پرداخت.

عملکردهایی مانند لمس، سوایپ کردن، کشیدن موارد توسط ماژول حرکات در رابط کاربر Angular Mobile انجام می شود. ماژول حرکات دارای یک دستورالعمل و خدمات برای مراقبت از عملکرد مورد نیاز در لمس ، کش رفتن و کشیدن است.

برای کار با ویژگیهای اشاره در Mobile Angular UI ، باید ماژول حرکات را اضافه کنید.

همانطور که در زیر نشان داده شده است ابتدا فایل JavaScript را درون index.html اضافه کنید –

&lt;script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"&gt;&lt;/script&gt;

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

بعداً ماژول حرکات را به صورت وابستگی در app.js اضافه کنید همانطور که در زیر نشان داده شده است –

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

var app=angular.module('myFirstApp', [

'ngRoute',

'mobile-angular-ui',

'mobile-angular-ui.gestures'

]);

ما قبلاً در مورد چگونگی عملکرد درگ با استفاده از ماژول ژست بحث کردیم. نگاهی به همان در Drag and Drop Chapter.

در اینجا نگاهی به عملکرد سوایپ کردن می اندازیم.

دستورالعمل uiSwipeLeft و uiSwipeRight موجود کمک می کند تا جهتی که کاربر در آن کشیده است را تشخیص دهد.

در اینجا یک مثال مفید برای سوایپ کردن وجود دارد –

index.html

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

         &lt;!-- App body --&gt;
         &lt;div class='app-body'&gt;
            &lt;div class='app-content'&gt;
               &lt;ng-view&gt;&lt;/ng-view&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;&lt;!-- ~ .app --&gt;

      &lt;!-- Modals and Overlays --&gt;
      &lt;div ui-yield-to="modals"&gt;&lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Mobile Angular UI Demo</title>

</head>

<h1 class="scrollable-header app-name">Tutorials</h1>

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

<h1 class="scrollable-header app-name">eBooks</h1>

<a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>

</div>

TutorialsPoint

</div>

<i class="fa fa-th-large "></i> Tutorials

</div>

<i class="fal fa-search"></i> eBooks

</div>

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

<ng-view></ng-view>

</div>

</div>

</body>

</html>

/js/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('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);
   };
});

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

&lt;div class="scrollable"&gt;
      &lt;div class="scrollable-content section"
         ui-swipe-left="testSwipe('left side')"
         ui-swipe-right="testSwipe('right side')"&gt;
      &lt;h2&gt;Testing of Swipe gesture&lt;/h2&gt;
      &lt;div&gt;
         Swipe left and right to activate the uiSwipeLeft and uiSwipeRight Directive.
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;

<div class="scrollable-content section"

ui-swipe-left="testSwipe('left side')"

ui-swipe-right="testSwipe('right side')">

<h2>Testing of Swipe gesture</h2>

<div>

Swipe left and right to activate the uiSwipeLeft and uiSwipeRight Directive.

</div>

در زیر نمایشگر در مرورگر است –

Swipe Gestures
دستورالعمل کش رفتن در داخل home.html اضافه می شود.

&lt;div class="scrollable-content section"
   ui-swipe-left="testSwipe('left side')"
   ui-swipe-right="testSwipe('right side')"&gt;

<div class="scrollable-content section"

ui-swipe-left="testSwipe('left side')"

ui-swipe-right="testSwipe('right side')">

این یک متد ()testSwipe است ، در app.js تعریف شده است.

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

$scope.testSwipe=function(direction) {

alert('You swiped ' + direction);

};

منبع.

لیست جلسات قبل آموزش برنامه نویسی انگولار

امتیاز دهید post

برچسب ها : آموزش انگولار آموزش برنامه نویسی موبایل

نویسنده مطلب saber

آموزش سوایپ کردن در برنامه نویسی انگولار

آموزش سوایپ کردن در برنامه نویسی انگولار

index.html

لیست جلسات قبل آموزش برنامه نویسی انگولار

دیدگاه شما

بدون دیدگاه

آموزش سوایپ کردن در برنامه نویسی انگولار

index.html

لیست جلسات قبل آموزش برنامه نویسی انگولار

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه