How to implement mvvm style tabs in Angularjs? case + code-JS Tutorial-php.cn

How to implement mvvm style tabs in Angularjs? case + code

php中世界最好的语言

Release： 2018-03-08 09:35:53

Original

1594 people have browsed it

We know that tabs are one of the most commonly used effects in modern web pages. This time we will show you how to implement mvvm-style tabs in Angularjs? Case + code, the following is a practical case, let’s take a look.

The focus of this article is to use angularjs, a very popular mvvm framework, to achieve the tab effect. Before that, let’s move out our commonly used jquery implementation.

1. jquery implements simple and crude tab effect

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();
});

Copy after login

Only the core part of js is given here, and html and css will not be described in detail.
The above code implements the tab effect simply and crudely. It uses the click event to obtain elem.index(), and connects the index and the container to control the display and hiding.

2. Angularjs implements a simple tab effect

Html part

<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>

Copy after login

css part (here for the convenience of us using Less syntax, children can customize css to achieve personalized effects )

* {  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);
      }
    }
  }
}

Copy after login

js part

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

Copy after login

The final effect is as shown below:

How to implement mvvm style tabs in Angularjs? case + code

Through the above code, we can find that the core of the implementation is Angularjs's built-in ng-class, ng-click, and ng-show instructions. In layman's terms: The default value of current data is defined in the controller as 1. ng-click gives the click event custom function to change the current data. ng-class binds conditions by getting the value of current to give The current style is added to the currently selected index, and the container also obtains the current data in the controller and displays and hides it through ng-show control.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!