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

4 سال پیش

امتیاز دهید post

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

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

در برخی از دستگاه ها برای عناصر مستقر در موقعیت های ثابت مشکلاتی وجود دارد. برای کار با مناطق قابل پیمایش Mobile Angular UI از سرریز استفاده می کند: خودکار.

الگوی منطقه قابل پیمایش به شرح زیر است –

&lt;div class = "scrollable"&gt;
&lt;div class = "scrollable-content"&gt; ... &lt;/div&gt;
&lt;/div&gt;

</div>

افزودن هدر و فوتر در مناطق قابل پیمایش

با افزودن کلاس های css .scrollable-header / .scrollable-footer ، ما header / footer ثابت را به منطقه قابل اسکرول مورد نظر خود اضافه خواهیم کرد. در مورد ارتفاع و موقعیت شما نیازی به دردسر ندارید ، css از همه چیز مراقبت خواهد کرد.

الگوی هدر / فوتر در زیر نشان داده شده است –

&lt;div class="scrollable"&gt;
   &lt;div class="scrollable-header"&gt;&lt;!-- ... --&gt;&lt;/div&gt;
   &lt;div class="scrollable-content"&gt;&lt;!-- ... --&gt;&lt;/div&gt;
   &lt;div class="scrollable-footer"&gt;&lt;!-- ... --&gt;&lt;/div&gt;
&lt;/div&gt;

</div>

دستورالعمل ها در مناطق قابل پیمایش

در زیر بخشنامه هایی آورده شده است که هنگام کار با مناطق قابل پیمایش بسیار مفید هستند –

uiScrollTop – هنگامی که می خواهید کاری را انجام دهید وقتی پیمایش به بالا می رسد ، از آن استفاده می شود. برای مثال ui-scroll-top = “callyourfunc ()”.

uiScrollBottom – هنگامی که پیمایش به پایین می رسد می توانید از آن استفاده کنید. برای مثال ui-scroll-bottom = “callyourfunc ()”.

uiScrollableHeader – زمانی که پیمایش به هدر می رسد می خواهید کاری انجام دهید. برای مثال ui-scroll-header = “callyourfunc ()”.

uiScrollableFooter – هنگامی که اسکرول به پاورقی می رسید کاری انجام دهید از آن استفاده می شود. برای مثال ui-scroll-footer = “callyourfunc ()”.

نمونه ای از دستورالعمل uiScrollBottom –

&lt;div class="scrollable"&gt;
   &lt;div class="scrollable-content section" ui-scroll-bottom="callyourfunc()"&gt;
      &lt;ul&gt;
         &lt;li ng-repeat="a in lists"&gt;
            {{a.name}}
         &lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
&lt;/div&gt;

<ul>

</li>

</ul>

</div>

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>

src/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.msg="Welcome to Tutorialspoint!"
   $scope.js="JavaScript is a lightweight, interpreted programming language. It is designed 
   for creating network-centric applications. It is 
   complimentary to and integrated with Java. 
   JavaScript is very easy to implement because it 
   is integrated with HTML. It is open and cross-platform.";
   $scope.angularjs="AngularJS is a very powerful JavaScript Framework. It is used in Single Page 
   Application (SPA) projects. It extends HTML DOM 
   with additional attributes and makes it more 
   responsive to user actions. AngularJS is open 
   source, completely free, and used by thousands of 
   developers around the world. It is licensed under the Apache license version 2.0.";
   $scope.reactjs="React is a front-end library developed by Facebook. It is used for handling 
   the view layer for web and mobile apps. ReactJS 
   allows us to create reusable UI components. It is 
   currently one of the most popular JavaScript 
   libraries and has a strong foundation and large community behind it.";
   var storyList=[];

   for (var i=1; i &lt;= 100; i++) {
      storyList.push('My story no ' + i);
   }

   $scope.storylist=storyList;
   $scope.bottom=function() {
      alert('End of the stories');
   };
});

/* 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.msg="Welcome to Tutorialspoint!"

$scope.js="JavaScript is a lightweight, interpreted programming language. It is designed

for creating network-centric applications. It is

complimentary to and integrated with Java.

JavaScript is very easy to implement because it

is integrated with HTML. It is open and cross-platform.";

$scope.angularjs="AngularJS is a very powerful JavaScript Framework. It is used in Single Page

Application (SPA) projects. It extends HTML DOM

with additional attributes and makes it more

responsive to user actions. AngularJS is open

source, completely free, and used by thousands of

developers around the world. It is licensed under the Apache license version 2.0.";

$scope.reactjs="React is a front-end library developed by Facebook. It is used for handling

the view layer for web and mobile apps. ReactJS

allows us to create reusable UI components. It is

currently one of the most popular JavaScript

libraries and has a strong foundation and large community behind it.";

var storyList=[];

for (var i=1; i <= 100; i++) {

storyList.push('My story no ' + i);

}

$scope.storylist=storyList;

$scope.bottom=function() {

alert('End of the stories');

};

});

src/home/home.html

&lt;div class="scrollable"&gt;
   &lt;div class="scrollable-header"&gt;My Stories List&lt;/div&gt;
   &lt;div class="scrollable-content" ui-scroll-bottom="bottom()"&gt;
      &lt;div class="list-group"&gt;
         &lt;a ng-repeat="item in storylist" href="" class="list-group-item"&gt;
            {{ item }} &lt;i class="fa fa-chevron-right pull-right"&gt;&lt;/i&gt;
         &lt;/a&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="scrollable-footer"&gt;End of the Stories&lt;/div&gt;
&lt;/div&gt;

<div class="scrollable-header">My Stories List</div>

{{ item }} <i class="fa fa-chevron-right pull-right"></i>

</a>

</div>

<div class="scrollable-footer">End of the Stories</div>

</div>

خروجی

Scrollable

منبع.

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

امتیاز دهید post

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

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

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

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

افزودن هدر و فوتر در مناطق قابل پیمایش

دستورالعمل ها در مناطق قابل پیمایش

index.html

src/js/app.js

src/home/home.html

خروجی

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

دیدگاه شما

بدون دیدگاه

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

افزودن هدر و فوتر در مناطق قابل پیمایش

دستورالعمل ها در مناطق قابل پیمایش

index.html

src/js/app.js

src/home/home.html

خروجی

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

دیدگاه شما

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

بدون دیدگاه