APICloud 社区从0开始写“脉脉”(三)

 本帖最后由 老邮局 于 2015-7-23 20:41 编辑



有什么特征：
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. 
   
9.                 <div class="slider_status" id="slider_statust"> // 文字标签底部的滑块
   
10.                         <span id="home_bar"></span>
    
11.                 </div>
    
12.         </div>
    
13. 
    
14.         <input type="radio" name="headers" id="iheader_jobs"/>       // 底部导航栏第二个图标对应的顶部导航栏
    
15.         <div id="header_jobs" style="-webkit-box-orient:vertical;height:75px">
    
16. 。。。。。。。。。。。。。。。。

复制代码

这里唯一要说的就是第二行，首先底部导航栏是固定的，它的四个按钮分别对应四组不同的窗口组，每个窗口组拥有不同的顶部导航栏，所以呢，同底部导航栏一样，每个顶部导航都和一个单选按钮绑定。

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. 
   
9. .slider_status span {          // 滑块
   
10.         display: block;
    
11.         width: 73px;              // 滑块的宽度
    
12.         height: 100%;           // 滑块的高度，继承父元素2px的高度
    
13.         background-color: #FFFFFF;    // 白色
    
14.         -webkit-transition: 300ms;      // 转场动画时间
    
15. }

复制代码

样式、外观等等都定义好了，怎么触发它动作呢，先小说一下：每个窗口组都由多个窗口组成，例如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开始写"脉脉"(五) —— 内容页