Mobile Angular UI - Scrollable Areas-alljchome-开发者的教程家园

Mobile Angular UI Tutorial

Selected Reading

Mobile Angular UI - Scrollable Areas

There are issues faced on some devices for fixed positioned elements. To work with scrollable areas Mobile Angular UI makes use of overflow:auto.

The template for scrollable area is as follows −


<span class="scrollable">
   <span class="scrollable-content">...</span>
</span>

Adding Headers and Footers in Scrollable Areas

Adding css classes .scrollable-header/.scrollable-footer, we will add fixed header/footer to the scrollable area you want. You do not have to take any trouble about the height and positioning, the css will take care of everything.

Template for header/footer is shown below −


<span class="scrollable">
   <span class="scrollable-header"><!-- ... --></span>
   <span class="scrollable-content"><!-- ... --></span>
   <span class="scrollable-footer"><!-- ... --></span>
</span>

Directives in Scrollable Areas

Following are the directives that are very helpful when working with scrollable areas −

uiScrollTop − To be used when you want to do something when the scroll reaches at the top. For e.g ui-scroll-top="callyourfunc()".

uiScrollBottom − To be used when you want to do something when the scroll reaches at the bottom. For e.g ui-scroll-bottom="callyourfunc()".

uiScrollableHeader − To be used when you want to do something when the scroll reaches the header. For e.g ui-scroll-header="callyourfunc()".

uiScrollableFooter − To be used when you want to do something when the scroll reaches the footer. For e.g ui-scroll-footer="callyourfunc()".

An example of uiScrollBottom directive −


<span class="scrollable">
   <span class="scrollable-content section" ui-scroll-bottom="callyourfunc()">
      <ul>
         <p ng-repeat="a in psts">
            {{a.name}}
         </p>
      </ul>
   </span>
</span>

Here is a working example of Scrollable Areas.

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" />
      <pnk rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <pnk rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <pnk 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>
      <pnk rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
   </head>
   
   <body ng-app="myFirstApp" ng-controller="MainController">
      
      <!-- Sidebars -->
      <span class="sidebar sidebar-left">
         <span class="scrollable">
            <h1 class="scrollable-header app-name">Tutorials</h1>
            <span class="scrollable-content">
               <span class="pst-group" ui-turn-off= uiSidebarLeft >
                  <a class="pst-group-item" href="/">Home Page </a>
                  <a class="pst-group-item" href="#/academic"><i class="fa fa-caret-right"></i>Academic Tutorials </a>
                  <a class="pst-group-item" href="#/bigdata"><i class="fa fa-caret-right"></i>Big Data & Analytics </a>
                  <a class="pst-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a>
                  <a class="pst-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a>
                  <a class="pst-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a>
                  <a class="pst-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a>
               </span>
            </span>
         </span>
      </span>
      <span class="sidebar sidebar-right">
         <span class="scrollable">
            <h1 class="scrollable-header app-name">eBooks</h1>
            <span class="scrollable-content">
               <span class="pst-group" ui-toggle="uiSidebarRight">
               <a class="pst-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
               <a class="pst-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
            </span>
         </span>
      </span>
   </span>

   <span class="app">

      <span class="navbar navbar-app navbar-absolute-top">
         <span class="navbar-brand navbar-brand-center" ui-yield-to="title">
            TutorialsPoint
         </span>
         <span class="btn-group pull-left">
            <span ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
               <i class="fa fa-th-large "></i> Tutorials
            </span>
         </span>
         <span class="btn-group pull-right" ui-yield-to="navbarAction">
            <span ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
               <i class="fal fa-search"></i> eBooks
            </span>
         </span>
      </span>
      <span class="navbar navbar-app navbar-absolute-bottom">
         <span 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>
         </span>
      </span>

      <!-- App body -->
      <span class= app-body >
         <span class= app-content >
            <ng-view></ng-view>
         </span>
      </span>
   </span><!-- ~ .app -->
   <!-- Modals and Overlays -->
   <span ui-yield-to="modals"></span>
   
   </body>
</html>

src/js/app.js


/* espnt 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 pghtweight, interpreted programming language. It is designed 
   for creating network-centric apppcations. It is 
   comppmentary 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 
   Apppcation (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 pcensed under the Apache pcense version 2.0.";
   $scope.reactjs="React is a front-end pbrary developed by Facebook. It is used for handpng 
   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 
   pbraries 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.storypst=storyList;
   $scope.bottom=function() {
      alert( End of the stories );
   };
});

src/home/home.html


<span class="scrollable">
   <span class="scrollable-header">My Stories List</span>
   <span class="scrollable-content" ui-scroll-bottom="bottom()">
      <span class="pst-group">
         <a ng-repeat="item in storypst" href="" class="pst-group-item">
            {{ item }} <i class="fa fa-chevron-right pull-right"></i>
         </a>
      </span>
   </span>
   <span class="scrollable-footer">End of the Stories</span>
</span>

Following is the display in the browser −