当前位置:主页 > 网页特效 > TAB标签 >

Material Design风格实用Tabs选项卡

发布时间:2018/07/07 来源:互联网 浏览: 关键词:material 选项卡 tab 
Material Design风格实用Tabs选项卡 Material Design风格实用Tabs选项卡
阿里云

简要教程

这是一款非常实用的Material Design风格Tabs选项卡特效。该Tabs选项卡使用扁平化设计风格,Tabs点击时带有点击波特效,并且选项卡的高度会随内容而改变。

使用方法

HTML结构

该Tabs选项卡的HTML结构如下:ul无序列表是选项卡的Tab,nav元素是选项卡的左右箭头导航按钮。div.nav-content是选项卡的内容,它通过tab-id属性和Tabs关联。

<!--Tabs-->
<ul>
  <liclass="active"><ahref="#tab-1"tab-id="1"ripple="ripple"ripple-color="#FFF">Tab 1</a></li>
  <li><ahref="#tab-2"tab-id="2"ripple="ripple"ripple-color="#FFF">Tab 2</a></li>
  <li><ahref="#tab-3"tab-id="3"ripple="ripple"ripple-color="#FFF">Tab 3</a></li>
  <li><ahref="#tab-4"tab-id="4"ripple="ripple"ripple-color="#FFF">Tab 4</a></li>
  <li><ahref="#tab-5"tab-id="5"ripple="ripple"ripple-color="#FFF">Tab 5</a></li>
</ul>
<!--箭头导航-->
<navclass="tabs-nav">
  <iid="prev"ripple="ripple"ripple-color="#FFF"class="material-icons"></i>
  <iid="next"ripple="ripple"ripple-color="#FFF"class="material-icons"></i>
</nav>
<!--选项卡内容-->
<divclass="tabs-content">
  <divtab-id="1"class="tab active">......</div>
</div>    

CSS样式

该Tabs选项卡的按钮点击波特效的CSS样式如下:

[ripple] {
  z-index:1;
  position:relative;
  overflow:hidden;
}
[ripple] .ripple {
  position:absolute;
  background:#FFFFFF;
  width:12px;
  height:12px;
  border-radius:100%;
  -webkit-animation: ripple1.6s;
          animation: ripple1.6s;
}
 
@-webkit-keyframes ripple {
  0%{
    -webkit-transform:scale(1);
            transform:scale(1);
    opacity:0.2;
  }
  100%{
    -webkit-transform:scale(40);
            transform:scale(40);
    opacity:0;
  }
}
 
@keyframes ripple {
  0%{
    -webkit-transform:scale(1);
            transform:scale(1);
    opacity:0.2;
  }
  100%{
    -webkit-transform:scale(40);
            transform:scale(40);
    opacity:0;
  }
}    

JavaScript

该Tabs选项卡使用下面的jQuery代码来完成选项卡的切换和按钮点击波特效的生成。

$(document).ready(function() {
  varactivePos = $('.tabs-header .active').position();
  functionchangePos() {
      activePos = $('.tabs-header .active').position();
      $('.border').stop().css({
          left: activePos.left,
          width: $('.tabs-header .active').width()
      });
  }
  changePos();
  vartabHeight = $('.tab.active').height();
  functionanimateTabHeight() {
      tabHeight = $('.tab.active').height();
      $('.tabs-content').stop().css({ height: tabHeight +'px'});
  }
  animateTabHeight();
  functionchangeTab() {
      vargetTabId = $('.tabs-header .active a').attr('tab-id');
      $('.tab').stop().fadeOut(300,function() {
          $(this).removeClass('active');
      }).hide();
      $('.tab[tab-id='+ getTabId +']').stop().fadeIn(300,function() {
          $(this).addClass('active');
          animateTabHeight();
      });
  }
  $('.tabs-header a').on('click',function(e) {
      e.preventDefault();
      vartabId = $(this).attr('tab-id');
      $('.tabs-header a').stop().parent().removeClass('active');
      $(this).stop().parent().addClass('active');
      changePos();
      tabCurrentItem = tabItems.filter('.active');
      $('.tab').stop().fadeOut(300,function() {
          $(this).removeClass('active');
      }).hide();
      $('.tab[tab-id="'+ tabId +'"]').stop().fadeIn(300,function() {
          $(this).addClass('active');
          animateTabHeight();
      });
  });
  vartabItems = $('.tabs-header ul li');
  vartabCurrentItem = tabItems.filter('.active');
  $('#next').on('click',function(e) {
      e.preventDefault();
      varnextItem = tabCurrentItem.next();
      tabCurrentItem.removeClass('active');
      if(nextItem.length) {
          tabCurrentItem = nextItem.addClass('active');
      }else{
          tabCurrentItem = tabItems.first().addClass('active');
      }
      changePos();
      changeTab();
  });
  $('#prev').on('click',function(e) {
      e.preventDefault();
      varprevItem = tabCurrentItem.prev();
      tabCurrentItem.removeClass('active');
      if(prevItem.length) {
          tabCurrentItem = prevItem.addClass('active');
      }else{
          tabCurrentItem = tabItems.last().addClass('active');
      }
      changePos();
      changeTab();
  });
  $('[ripple]').on('click',function(e) {
      varrippleDiv = $('<div class="ripple" />'),
        rippleOffset = $(this).offset(),
        rippleY = e.pageY - rippleOffset.top,
        rippleX = e.pageX - rippleOffset.left,
        ripple = $('.ripple');
      rippleDiv.css({
          top: rippleY - ripple.height() / 2,
          left: rippleX - ripple.width() / 2,
          background: $(this).attr('ripple-color')
      }).appendTo($(this));
      window.setTimeout(function() {
          rippleDiv.remove();
      }, 1500);
  });
});               

共有人阅读,期待你的评论!评论
Top