Comment implémenter les onglets de style mvvm dans Angularjs ? cas + code-js tutoriel-php.cn

Comment implémenter les onglets de style mvvm dans Angularjs ? cas + code

php中世界最好的语言

Libérer： 2018-03-08 09:35:53

original

1595 Les gens l'ont consulté

Nous savons que les onglets sont l'un des effets les plus couramment utilisés dans les pages Web modernes. Cette fois, nous allons vous montrer comment implémenter des onglets de style mvvm dans Angularjs ? Cas + code, ce qui suit est un cas pratique, jetons un oeil.

L'objectif de cet article est d'utiliser angulairejs, un framework mvvm très populaire, pour obtenir l'effet d'onglet. Avant cela, abandonnons notre implémentation jquery couramment utilisée.

1. jquery implémente un effet de tabulation simple et brut

var nav = $(".tabs");//tab切换var box = $(".box");//容器nav.on("click", function(){ //点击事件
  var this_index=$(this).index();
  $(this).addClass("active").siblings().removeClass("active");
  box.eq(this_index).show().siblings().hide();
});

Copier après la connexion

Seule la partie principale de js est donnée ici, et le HTML et le CSS ne seront pas décrits en détail.
Le code ci-dessus implémente l'effet de tabulation de manière simple et grossière. Il utilise l'événement click pour obtenir elem.index() et connecte l'index et le conteneur pour contrôler l'affichage et le masquage.

2. Angularjs implémente un simple effet de tabulation

Partie HTML

<section ng-app="myApp">
       <div class="tabs tabs-style" ng-controller="TabController as tab">
         <nav>
           <ul>
             <li ng-class="{&#39;current&#39;:tab.isSet(1)}">
               <a href="#" ng-click="tab.setCurrent(1)"><span>Home</span></a></li>
             <li ng-class="{&#39;current&#39;:tab.isSet(2)}">
               <a href="#" ng-click="tab.setCurrent(2)"><span>Work</span></a></li>
             <li ng-class="{&#39;current&#39;:tab.isSet(3)}">
               <a href="#" ng-click="tab.setCurrent(3)"><span>Blog</span></a></li>
             <li ng-class="{&#39;current&#39;:tab.isSet(4)}">
               <a href="#" ng-click="tab.setCurrent(4)"><span>About</span></a></li>
             <li ng-class="{&#39;current&#39;:tab.isSet(5)}">
               <a href="#" ng-click="tab.setCurrent(5)"><span>Contact</span></a></li>
           </ul>
         </nav>
         <div class="content">
           <section id="section-1"  ng-show="tab.isSet(1)">
             <p>1</p>
           </section>
           <section id="section-2"  ng-show="tab.isSet(2)">
             <p>2</p>
           </section>
           <section id="section-3" ng-show="tab.isSet(3)">
             <p>3</p>
           </section>
           <section id="section-4" ng-show="tab.isSet(4)">
             <p>4</p>
           </section>
           <section id="section-5" ng-show="tab.isSet(5)">
             <p>5</p>
           </section>
         </div>
       </div>
   </section>

Copier après la connexion

partie CSS (ici, pour notre commodité en utilisant la syntaxe Less, les enfants peuvent personnaliser l'implémentation CSS Effet personnalisé)

* {  margin: 0;  padding: 0;
}body {  background: #e7ecea;  font-weight: 600;  font-family: &#39;Raleway&#39;, Arial, sans-serif;  text-align: center;
}a {    color: #2CC185;    text-decoration: none;    outline: none;
  
    &:hover {    color: #74777b;
    }
}.tabs {  position: relative;  width: 100%;  margin: 30px auto 0 auto;
  nav {
    ul {      position: relative;      display: flex;      max-width: 1200px;      margin: 0 auto;      list-style: none;      flex-flow: row wrap;      justify-content: center;
      
        li {          flex: 1;
          
          &.current a {            color: #74777b;
          }
        }
      }
    }  
    a {      display: block;      position: relative;      overflow : hidden;      line-height: 2.5;
      
      span {        vertical-align: middle;        font-size: 1.5em;
      }
    }
}.content {  position: relative; 
  
  section {    /* display: none; */
    margin: 0 auto;    max-width: 1200px;
    &.content-current {      /* display: block; */
    }    
    p {      color: rgba(40,44,42, 0.4);      margin: 0;      padding: 1.75em 0;      font-weight: 900;      font-size: 5em;      line-height: 1;
    }
  }
}.tabs-style {
  nav {    /* background: rgba(255,255,255,0.4); */
    
    ul li {
      a {        overflow: visible; 
        border-bottom: 1px solid rgba(0,0,0,0.2);        -webkit-transition: color 0.2s;        transition: color 0.2s;
      }
    }    
    ul li.current a{
      &:after, &:before {        content: &#39;&#39;;        position: absolute;        top: 100%;        left: 50%;        width: 0;        height: 0;        border: solid transparent;
        }
      &:after {        margin-left: -10px;        border-width: 10px;        border-top-color: #e7ecea;
      }
      &:before {        margin-left: -11px;        border-width: 11px;        border-top-color: rgba(0,0,0,0.2);
      }
    }
  }
}

Copier après la connexion

partie js

angular.module(&#39;myApp&#39;, [])
  .controller(&#39;TabController&#39;, function() {    this.current = 1;  
  this.setCurrent = function (tab) {    this.current = tab;
  };  
  this.isSet = function(tab) {    return this.current == tab;
  };
});

Copier après la connexion

L'effet final est le suivant :

Comment implémenter les onglets de style mvvm dans Angularjs ? cas + code

Par le code ci-dessus , nous pouvons constater que le cœur de l'implémentation est constitué des instructions ng-class, ng-click et ng-show intégrées à angulairejs. En termes simples : la valeur par défaut des données actuelles est 1 dans le contrôleur. ng-click personnalise la fonction pour l'événement click pour modifier les données actuelles. ng-class lie la condition en obtenant la valeur de current. Le style est ajouté à l'index actuellement sélectionné, et le conteneur obtient également les données actuelles dans le contrôleur et les affiche et les masque via le contrôle ng-show.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment déboguer différentes versions de nodejs avec différentes versions de vscdoe

Vuejs webp prend en charge le plug- en développement pour les images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!