English 中文(简体)
Mobile Angular UI Tutorial

Selected Reading

Mobile Angular UI - Tabs
  • 时间：2024-09-08

Mobile Angular UI - Tabs

Previous Page Next Page  

Tabs are useful components available in angular mobile ui. Tabs are available in the same wrapper and show your contents in separate pane just pke how the tabs are opened in the browser. Only one tab is displayed to the user at a time.

Here is a working example of Tabs component.

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>
      <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 
]);
app.config(function($routeProvider, $locationProvider) {
   $routeProvider
   .when("/", {
      templateUrl : "src/home/home.html"
   });
   $locationProvider.html5Mode({enabled:true, requireBase:false});
});

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.";
});

src/home/home.html


<span class="scrollable">
   <span class="scrollable-content">
      <span class="section">
         <ui-shared-state id="activeTab" default="1"></ui-shared-state>

         <ul class="nav nav-tabs">
            <p ui-class="{ active : activeTab == 1}">
               <a ui-set="{ activeTab : 1}">Javascript</a>
            </p>
            <p ui-class="{ active : activeTab == 2}">
               <a ui-set="{ activeTab : 2}">AngularJS</a>
            </p>
            <p ui-class="{ active : activeTab == 3}">
               <a ui-set="{ activeTab : 3}">ReactJS</a>
            </p>
         </ul>

         <span ui-if="activeTab == 1">
            <h3 class="page-header">Javascript</h3>
            <p>{{js}}</p>
         </span>

         <span ui-if="activeTab == 2">
            <h3 class="page-header">AngularJS</h3>
            <p>{{angularjs}}</p>
         </span>

         <span ui-if="activeTab == 3">
            <h3 class="page-header">ReactJS</h3>
            <p>{{reactjs}}</p>
         </span>
            <span class="btn-group justified nav-tabs">
            <a ui-set="{ activeTab : 1}"
               ui-class="{ active : activeTab == 1}" class="btn btn-default">Javascript</a>
            <a ui-set="{ activeTab : 2}"
               ui-class="{ active : activeTab == 2}" class="btn btn-default">AngularJS</a>
            <a ui-set="{ activeTab : 3}"
               ui-class="{ active : activeTab == 3}" class="btn btn-default">ReactJS</a>
         </span>
      </span>
   </span>
</span>

Following is the display in browser −

Tab Advertisements

友情链接

Allggapp Allqahome-程序员问答家园 mvfinale.com-影视剧情大结局大全