apicloud apicloud

注册
查看: 27485|回复: 33

[新手教程] 从0开始写"脉脉"(三) —— 顶部导航栏

主题:
28
帖子:
88
云币:
757

[新手教程] 从0开始写"脉脉"(三) —— 顶部导航栏

27485 33 | 发表于 2014-11-3 18:31:22 |阅读模式 | |
本帖最后由 老邮局 于 2015-7-23 20:41 编辑

》》更多视频教程请关注 www.9y.cm《《




有什么特征:
1、中间两个文本标签,垂直居中水平均布
2、两侧两个图标按钮,各占用60px的宽度,剩余部分两个文本标签均分。
3、文本标签下有个滑块,起提示作用,根据选择会在两个标签下动态滑动。

如何实现:
Tips :  带触发的,无论文本标签还是"按钮",都用a标签onclick属性触发js函数,按钮的话我们给它加上外边框;图标按钮我们就加载图片。
1、文本的垂直居中,可以设置其height和line-height属性一样,即表示其相对父元素垂直居中;水平均布就是用到水平盒子模型,设置下显示比例就OK。
2、还是a标签,让它占用一定的宽度(60px),并与header同高,再给它加载图片作为背景,设置它的background-repeat和background-position,让它只显示一次,并且作为背景图片时垂直和水平居中。
3、一个小div,宽、高、位置都给它,背景为白色,根据用户的不同选择,动态改变它的位置(用css中的平移操作)

先看布局:

  1. <div id="header"> // header
  2.         <input type="radio" name="headers" id="iheader_home" checked="true"/>    //底部导航栏第一个图标对应的顶部导航栏
  3.         <div id="header_home"> // home窗口组的顶部导航栏
  4.                 <a id="back_home" tapmode="" onclick="openSearch()" class="search"></a> // 最左侧的搜索按钮
  5.                 <a tapmode="" onclick="slderbar('homeGroup',0)" id="checkSt" class="flex2" style="text-align: center">实名动态</a>
  6.                 <a tapmode="" onclick="slderbar('homeGroup',1)" class="flex2" style="color: #ffffff;text-align: center">匿名八卦</a>
  7.                 <a id="load_home" class="gossip" tapmode="" onclick="openScanner()"></a> // 最右侧的扫描按钮

  8.                 <div class="slider_status" id="slider_statust"> // 文字标签底部的滑块
  9.                         <span id="home_bar"></span>
  10.                 </div>
  11.         </div>

  12.         <input type="radio" name="headers" id="iheader_jobs"/>       // 底部导航栏第二个图标对应的顶部导航栏
  13.         <div id="header_jobs" style="-webkit-box-orient:vertical;height:75px">
  14. 。。。。。。。。。。。。。。。。
复制代码
这里唯一要说的就是第二行,首先底部导航栏是固定的,它的四个按钮分别对应四组不同的窗口组,每个窗口组拥有不同的顶部导航栏,所以呢,同底部导航栏一样,每个顶部导航都和一个单选按钮绑定。

0、首先定义header,主要属性是高度和背景颜色等
  1. #header{
  2.         text-align: center;
  3.         background-color: #028BE6;
  4.         color: #fff;width: 100%;
  5.         -webkit-background-size: auto 2.8125em;
  6. }
  7. #header > div{
  8.         height:2.8125em;
  9.         line-height:2.8125em;
  10. }
复制代码

1、文本标签垂直居中,且水平均布

前面已经定义过了,有一点需要说明:设置一个元素的height和line-height属性相同,表示该元素在父元素中垂直居中显示,这里#header > div 里面包含两个文本标签,其意思就是两个文本标签在header中垂直居中。
  1. #header > div{
  2.         height:2.8125em;
  3.         line-height:2.8125em;
  4. }
复制代码
水平均布,显然是用到水平盒子模型
  1. #header_home {
  2.         display: -webkit-box;    // 开启盒子模型,默认即为水平
  3.         position:relative;
  4. }
  5. .flex2 {
  6.         -webkit-box-flex: 2       // 比例是2:2
  7. }
复制代码
最终效果是这样的:


2、设置左右两按钮图片和位置等信息
加载图片:
  1. #header .search{         /*顶部导航加入搜索,首页-左上角*/
  2.         width:60px;          /*图片所在小框框的宽度*/
  3.         background-image:url(../image/btn_search_bg.png);
  4.         -webkit-background-size:30px; /*背景图片尺寸设置30px*/
  5. }
  6. #header .gossip{         /*顶部导航加入扫描,首页-右上角*/
  7.         width:60px;
  8.         background-image:url(../image/btn_gossip_bg.png);
  9.         -webkit-background-size:30px;
  10. }
复制代码
图片是加入了,效果会是这样:

图标重复出现,而且不是居中显示,我们还需要设置其他属性:
  1. #header > div > a{
  2.         height:2.8125em;
  3.         background-repeat:no-repeat;   // header>div>a 作为背景图时不重复,search和gosip是加载的图片,这里设置它只显示一幅*/
  4.         background-position:center;      // header>div>a 作为背景图时的起始显示位置,这个属性当你设置一个值时,另一个值自动设置成center,这里的意思是水平、垂直居中*/
  5.         overflow:hidden;
  6. }
复制代码
这里设置a标签的高度(同header同高),前面定义其类属性(.search和.gossip)宽度为60px,a标签实际变成了个小方块,我们想图标在小方块里面居中显示,就需要给他background-position属性。

OK,现在正常啦。

3、来看滑块
index.html
  1. 108  <div class="slider_status" id="slider_statust">
  2. 109        <span id="home_bar"></span>
  3. 110  </div>
复制代码
对应的css:
  1. .slider_status {                    // 滑块容器
  2.         width: 240px;             // 容器宽度
  3.         height: 2px;               // 滑块高度
  4.         left: 71px;                   // 相对于父元素左侧距离
  5.         top: 35 px;                 // 相对于父元素顶部距离
  6.         position: absolute;    // 相对于父元素。其实就是相对于header
  7. }

  8. .slider_status span {          // 滑块
  9.         display: block;
  10.         width: 73px;              // 滑块的宽度
  11.         height: 100%;           // 滑块的高度,继承父元素2px的高度
  12.         background-color: #FFFFFF;    // 白色
  13.         -webkit-transition: 300ms;      // 转场动画时间
  14. }
复制代码
样式、外观等等都定义好了,怎么触发它动作呢,先小说一下:每个窗口组都由多个窗口组成,例如home窗口组就有2两个窗口,当打开home窗口组的子窗口1时,滑块位于“毛豆动态”标签下,触发子窗口2时,让滑块移到“匿名八卦”标签下,我们在openFramGroup()的时候就写好触发的回调函数,根据当前激活的子窗口索引号驱动“滑块”进行动作。
index.html
  1. 286  }, function (ret) {                            // home窗口组回调函数
  2. 287          if (ret.index == 0) {                // 子窗口1被激活
  3. 288                  api.execScript({
  4. 289                          name: api.winName,     // 顶层窗口
  5. 290                          script: 'slderbarCallback("home_bar",0,"checkSt")'     // CheckSt是文本标签的class
  6. 291                  })
  7. 292          } else if (ret.index == 1) {      // 子窗口2被激活
  8. 293                  api.execScript({
  9. 294                          name: api.winName,
  10. 295                          script: 'slderbarCallback("home_bar",100,"checkSt")'  // 第二个参数是移动的偏移
  11. 296                  })
  12. 297          }
  13. 298  });
复制代码
回调函数:
  1. function slderbarCallback(id, num,barId) {
  2.         var width=parseInt(window.getComputedStyle($api.byId(barId),null).width);    // 获取文本标签的宽度
  3.         if(num!=0){  
  4.                 num=width;          // 如果打开子窗口1,偏移为0;子窗口2,偏移取第二个参数的值
  5.         }
  6.         $api.css($api.byId(id),
  7.                 "-webkit-transform:translate(" + num + "px,0)"   // 进行x轴平移
  8.         );
  9. }
复制代码

小插曲

脉脉的原作者在这个“滑块”处有一个小手误,在css中给“滑块”定位的时候,top:35 px; 这句中35和px之间多加了个空格,导致顶部偏移失效,我想作者当时纠结了很久,实在没找出问题所在,就在js中又重新给了滑块定位:
index.html
  1. 254  $api.byId('slider_statust').style.left=50+(width*0.2)+"px";        
  2. 255  $api.byId('slider_statust').style.top=($api.byId('header').offsetHeight-10)+"px";
复制代码
这样,首页布局就OK了,剩下的就是子窗口的div和css了,每个子窗口都是div+css+js的组合啦.....  

下一篇................

文章导航:
从0开始写"脉脉"(一) —— 首页布局分析
从0开始写"脉脉"(二) —— 底部导航栏
从0开始写"脉脉"(三) —— 顶部导航栏
从0开始写"脉脉"(四) —— 再谈顶部导航栏
从0开始写"脉脉"(五) —— 内容页

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

主题:
17
帖子:
511
云币:
4164

APICloud粉丝中秋节APICloud大会专属勋章

发表于 2014-11-3 19:38:01 |
板凳

主题:
18
帖子:
612
云币:
366
发表于 2014-11-3 20:06:33 |

主题:
28
帖子:
521
云币:
85900011

APICloud粉丝端午节

发表于 2014-11-4 14:20:47 |

主题:
0
帖子:
13
云币:
252
发表于 2014-11-4 15:02:26 |

主题:
3
帖子:
12
云币:
105
发表于 2014-11-5 16:23:18 |

驾校小白

UID:1722

主题:
1
帖子:
16
云币:
3
发表于 2014-11-7 12:49:22 |
连篇看过来

主题:
13
帖子:
68
云币:
174
发表于 2014-12-2 20:46:25 |
很详细啊

主题:
20
帖子:
203
云币:
280
发表于 2015-1-12 17:37:45 |
这个“滑块“ 在大屏幕的手机或者是平板中,设置固定值会变得很”丑“,
  1. <a tapmode="" onclick="slderbar('homeGroup',0)" id="checkSt" class="flex2" style="color: #ffffff;text-align: center">
  2.                 <p>实名动态</p>
  3.                 <span></span>
  4.             </a>
复制代码

把span 放到a里面 用样式进行控制!
  1. #header_home a[class='flex2']{
  2.     position: relative;
  3. }
  4. #header_home a p{
  5.     display: block;
  6.     width: 100%;
  7.     height: 95%;
  8.     color: #ffffff;
  9. }
  10. #header_home a span{
  11.     position: absolute;
  12.     display: block;
  13.     width: 60%;
  14.     height: 5%;
  15.     background:transparent;
  16.     margin-top: -5%;
  17.     margin-left: 20%;
  18. }
  19. #header_home a:hover span{
  20.     background: #fff;
  21. };
复制代码

主题:
9
帖子:
21
云币:
44
发表于 2015-3-31 10:10:44 |
xiaoqiang730730 发表于 2015-1-12 17:37
这个“滑块“ 在大屏幕的手机或者是平板中,设置固定值会变得很”丑“,
把span 放到a里面 用样式进行控制 ...

666666666666
1234下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表