집 > 기사 > 웹 프론트엔드 > Angularjs에서 mvvm 스타일 탭을 구현하는 방법은 무엇입니까? 케이스 + 코드

Angularjs에서 mvvm 스타일 탭을 구현하는 방법은 무엇입니까? 케이스 + 코드

php中世界最好的语言원래의: 2018-03-08 09:35:531512검색

탭은 현대 웹페이지에서 가장 일반적으로 사용되는 효과 중 하나라는 것을 알고 있습니다. 이번에는 Angularjs에서 mvvm 스타일 탭을 구현하는 방법을 보여 드리겠습니다. Case + code, 다음은 실제 사례이므로 살펴보겠습니다.

이 글의 초점은 매우 인기 있는 mvvm 프레임워크인angularjs를 사용하여 탭 효과를 구현하는 것입니다. 그 전에 일반적으로 사용되는 jquery 구현을 옮겨 보겠습니다.

1. jquery는 간단하고 투박한 탭 효과를 구현합니다

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

여기에서는 js의 핵심 부분만 제공하고 html과 css에 대해서는 자세히 설명하지 않습니다.
위 코드는 간단하고 투박하게 탭 효과를 구현한 것입니다. 클릭 이벤트를 사용하여 elem.index()를 얻고, 인덱스와 컨테이너를 연결하여 표시 및 숨기기를 제어합니다.

2. Angularjs는 간단한 탭 효과를 구현합니다

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>

css 부분(여기서는 Less 구문을 사용하는 편의를 위해 어린이가 CSS를 맞춤설정하여 맞춤 효과를 얻을 수 있습니다)

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

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

최종 효과 그림과 같이

Angularjs에서 mvvm 스타일 탭을 구현하는 방법은 무엇입니까? 케이스 + 코드

위의 코드를 통해 구현의 핵심이Angularjs에 내장된 ng-class, ng-click, ng-show 명령어임을 알 수 있습니다. 평신도의 관점에서 보면 현재 데이터의 기본값은 컨트롤러에서 1로 정의됩니다. ng-click은 현재 데이터를 변경하기 위한 클릭 이벤트 사용자 정의 기능을 제공합니다. ng-class는 다음 값을 얻어서 현재 선택된 인덱스에 조건을 바인딩합니다. 현재 스타일을 추가하면 컨테이너도 컨트롤러에서 현재 데이터를 가져와서 ng-show 컨트롤을 통해 표시하고 숨깁니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!