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

erfan molaei
3 سال پیش
منوی آکاردئون در برنامه نویسی انگولار

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

 

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

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

 

اجازه دهید برای دیدن کارکرد آکاردئون در رابط کاربری انگولار روی یک مثال کار کنیم.

 

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" />
      <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" />
      <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" />
      <link 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>
      <link rel="stylesheet" href="src/css/app.css" />
      <script src="src/js/app.js"></script>
   </head>
   <body ng-app="myFirstApp" ng-controller="MainController">
      <!-- Sidebars -->
      <div class="sidebar sidebar-left">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">Tutorials</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-turn-off='uiSidebarLeft'>
                  <a class="list-group-item" href="/">Home Page </a>
                  <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>
            </div>
         </div>
      </div>
      <div class="sidebar sidebar-right">
         <div class="scrollable">
            <h1 class="scrollable-header app-name">eBooks</h1>
            <div class="scrollable-content">
               <div class="list-group" ui-toggle="uiSidebarRight">
                  <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a>
                  <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a>
               </div>
            </div>
         </div>
      </div>
      
      <div class="app">
         <div class="navbar navbar-app navbar-absolute-top">
            <div class="navbar-brand navbar-brand-center" ui-yield-to="title">
               TutorialsPoint
            </div>
            <div class="btn-group pull-left">
               <div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle">
                  <i class="fa fa-th-large "></i> Tutorials
               </div>
            </div>
            <div class="btn-group pull-right" ui-yield-to="navbarAction">
               <div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle">
                  <i class="fal fa-search"></i> eBooks
               </div>
            </div>
         </div>
         <div class="navbar navbar-app navbar-absolute-bottom">
            <div 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>
            </div>
         </div>

         <!-- App body -->
         <div class='app-body'>
            <div class='app-content'>
               <ng-view></ng-view>
            </div>
         </div>
      </div><!-- ~ .app -->

      <!-- Modals and Overlays -->
      <div ui-yield-to="modals"></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'
]);
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.sections="Testing of Accordion using 
   Mobile Angular UI!Testing of Accordion using 
   Mobile Angular UI!Testing of Accordion using 
   Mobile Angular UI!";
});

 

الگوی آکاردئون در داخل src / home / home.html اضافه می شود.

 

<div class="scrollable">
   <div class="scrollable-content">
      <div class="section">
      <div class="panel-group"
         ui-shared-state="testAccordion"
         ui-default='2'>
         
         <div class="panel panel-default" ng-repeat="i in [1,2,3,4,5]">
         <div class="panel-heading" ui-set="{'testAccordion': i}">

            <h4 class="panel-title">
               Accordion Group Item #{{i}}
            </h4>
         </div>
         
         <div ui-if="testAccordion == {{i}}">
            <div class="panel-body">
               {{sections}}
            </div>
         </div>
         </div>
      </div>
   </div>
</div>
</div>

 

Accordion

 

منبع.

 

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

  1. آموزش برنامه نویسی انگولار
  2. بررسی اجمالی برنامه نویسی انگولار
  3. آموزش نصب انگولار 
  4. آموزش راه اندازی پروژه در برنامه نویسی انگولار
  5. آموزش اولین برنامه انگولار
  6. آموزش طرح بندی در برنامه نویسی انگولار
  7. آموزش مولفه ها در برنامه نویسی انگولار
  8. آموزش منوی کشویی در برنامه نویسی انگولار
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه