bob体育官方平台
进级高端!帮你做能一败涂地的分界面之TAB的小短线

1.1 App滑动导航

jQuery实现简单的滑动导航代码(移动端),jquery滑动

1.1 App滑动导航

说明:这个例子主要是实现一条导航山只有两个选项的。

1.适合用于移动端。

2.滑动条的长度是选项内容的长度。

1.1.1. 效果图 

图片 1

1.1.2. Html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>滑动导航</title>
 </head>
 <body>
 <ul class="slid">
  <li><a href="#" rel="external nofollow" rel="external nofollow" >滑动到岗</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" >滑动到岗</a></li>

 </ul>
 <script type="text/JavaScript" src="js/jQuery-1.9.1.min.js"></script>
 </body>
</html>

1.1.3. Css

<style type="text/css">
 body,div,p{ 
   margin:0; 
   padding:0; 
  }   
  ul.slid{
   display: block;   
   position:fixed;
   top: 10px; 
   left:0px; 
   right:0px;        
   height:60px;
   background: #f2f2f2;
   overflow: height;  
  }
  ul.slid li{
   display: inline-block;
   width: 49%;
   height: 40px;
   margin-top: 10px;
   float: left;
   text-align: center;
   overflow: hidden;

  }
   ul.slid li:first-child{
   border-right: 1px solid red;
   }
  ul.slid li a{
   display: inline-block;    
   width: 120px;       
   text-decoration:none; 
   height:37px;
   line-height: 37px; 
   color: #898989;   
   overflow: hidden;
  }
  ul.slid li a:hover{
   color: red;
  }
  #navLine{
   height:2px; 
   background-color:red; 
   position:absolute;    
   bottom:7px; 
   width:0px; 
   left:0px; 
   display:none; 
   overflow:hidden;
  }
 </style>

1.1.4. jQuery

<script type="text/javascript">
 $(function (){   
   navSlid();
  });
  //滑动导航
  var navSlid = function(){ 
   var nline = $('#navLine'); 
   var lia = $('ul.slid li a'); 
   //初始化滑块 
   nline.css({ 
    'width':lia.width(), 
    'left' :parseInt(lia.position().left) 
   }); 
   $('ul.slid li a').mouseenter(function(){ 
    //显示滑块 
    if(nline.css('display') == 'none'){ 
     nline.show(); 
    }; 
    //移动滑块 
    nline.stop().animate({ 
     width: $(this).width(), 
     left: parseInt($(this).position().left) 
    },300); 
   }); 
  }; 
 </script>

1.1 App滑动导航 说明:这个例子主要是实现一条导航山只有两个选项的。 1.适合用于移动...

很喜欢的菜心写的文章,分享给大家。

说明:这个例子主要是实现一条导航山只有两个选项的。

我们先来科普下今天要讲的东西是啥,看下图:

2.滑动条的长度是选项内容的长度。

图片 2

1.1.1. 效果图

每一个选项都是一个tab ,tab 的形式千千万,但今天只讲这种选中后下面带横线的。(我们给这个横线起个名字叫做小短线吧,下文都这么叫了哈!)

1.1.2. Html

今天的大纲如下:

  滑动导航   

tab是用来干嘛的

  • 滑动到岗
  • 滑动到岗

tab 的分类

1.1.3. Css

几种常见的小短线

 body,div,p{ margin:0; padding:0; } ul.slid{ display: block; position:fixed; top: 10px; left:0px; right:0px; height:60px; background: #f2f2f2; overflow: height; } ul.slid li{ display: inline-block; width: 49%; height: 40px; margin-top: 10px; float: left; text-align: center; overflow: hidden; } ul.slid li:first-child{ border-right: 1px solid red; } ul.slid li a{ display: inline-block; width: 120px; text-decoration:none; height:37px; line-height: 37px; color: #898989; overflow: hidden; } ul.slid li a:hover{ color: red; } #navLine{ height:2px; background-color:red; position:absolute; bottom:7px; width:0px; left:0px; display:none; overflow:hidden; } 

小短线的注意事项一

1.1.4. jQuery

小短线的注意事项二

 ${ navSlid; //&#28369;&#21160;&#23548;&#33322; var navSlid = function(){ var nline = $; var lia = $; //&#21021;&#22987;&#21270;&#28369;&#22359; nline.css, 'left' :parseInt }); $.mouseenter{ //&#26174;&#31034;&#28369;&#22359; if == 'none'){ nline.show(); }; //&#31227;&#21160;&#28369;&#22359; nline.stop().animate.width(), left: parseInt.left) },300); }); }; 

tab是用来干嘛的

Tab的中文名是标签的意思,他是用来干嘛的呢,如果你用过ps,还记得软件右边的工具窗口吗?如下图:

图片 3

上图有库、调整、样式三个tab,为什么要设置这三个tab 呢?

试想一下,如果没有tab 给它们分类,所有的小功能全部平铺开,哪有地方放啊,找起来多麻烦!

所以通俗的来讲tab就是为了做好分类,节省空间,等需要的时候更容易找到!

tab 的两种形式

但我们今天讲的并不是ps里面的tab,而是app页面中的tab,我们可以将其可分为两种形式,固定的tab与可滑动的tab。

固定的tab:

图片 4

谷歌规范中规定:一组固定 tabs 至少包含 2 个 tab 并且不多于 6 个 tab,并且在一行内显示。

可滑动的tab:

图片 5

返回顶部