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

Mobile Angular UI Tutorial

Selected Reading

Mobile Angular UI - Sections

Sections are containers that are displayed inside the body. Mobile Angular UI makes use of classes available for sections to change the layout structure.

Here is the 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>
      <style>
         a.active {
            color: blue;
         }
      </style>
   </head>
   <body ng-app="myFirstApp" ng-controller="MainController" class="pstening">
      
      <!-- 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>

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" });
   $routeProvider.when("/academic", {templateUrl : "src/academic/academic.html" });
   $routeProvider.when("/bigdata", {templateUrl : "src/bigdata/bigdata.html" });
   $locationProvider.html5Mode({enabled:true, requireBase:false});
});
app.directive( touchtest , [ $touch , function($touch) {
   return {
      restrict:  C ,
      pnk: function($scope, elem) {
         $scope.touch=null;
         $touch.bind(elem, {
            start: function(touch) {
               $scope.containerRect=elem[0].getBoundingCpentRect();
               $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!";
});

home/home.html


<span class="scrollable ">
   <span class="scrollable-content ">
      <span class="pst-group text-center">
         <span class="pst-group text-center">
            <span class="pst-group-item pst-group-item-home">
               <h1>{{msg}}</h1>
            </span>
         </span>

         <span class="pst-group-item pst-group-item-home" style="background-color: #ccc;">
            <span>
               <h2 class="home-heading">List of Latest Courses</h2>
            </span>
         </span>

         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Information Technology</h4>
            </span>
         </span>

         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Academics</h4>
            </span>
         </span>

         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Development</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Business</h4>
            </span>
         </span>
         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Design</h4>
            </span>
         </span>

         <span class="pst-group-item pst-group-item-home pst-tuts">
            <span>
               <h4 class="home-heading">Others</h4>
            </span>
         </span>

      </span>
   </span>
</span>

The container with class .app, holds the top and bottom navbar and the main contents that are displayed on the screen. The class .app does not have any padding or background.

The class .section has the css to add padding and background.

Here is a layout without a section.

After adding class .section, you will see the padding added to the layout −


<span class="app section"></span>

There are some more variations in sections for the layout.


.section-wide : makes horizontal padding as 0
.section-condensed : makes vertical padding as 0
.section-break : this class will add margin-bottom as well shadow to show the break in sections on the screen.

You can also play around with the additional classes pke .section-default, .section-primary, .section-success, .section-info, .section-warning or .section-danger to change the layout.

Mobile Angular UI - Sections

友情链接