apicloud apicloud

注册
查看: 42477|回复: 65

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

 

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

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

 
42477 65 | 发表于 2014-10-29 18:22:28 |阅读模式 | |
本帖最后由 老邮局 于 2015-7-23 20:44 编辑

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

两步走:首先分析下底部导航栏具有的特征,然后再考虑如何实现




具有的特征:
1、首先底部导航栏有一个灰色的背景图片。
2、四组按钮都由两部分(图标和文字)组成,点选不同按钮会打开不同的“窗口组”
3、按钮未被选中为灰色,选中后换为蓝色图标、文字颜色加深
4、四组按钮水平均匀分布。

如何实现:
1、背景图片直接用css设置就可以了

2、每组按钮都由一个图标和文字组成,我们把这两看成一个整体,用a标签包裹住分别显示图标和文字的标签,当a标签被选中后,触发onclick事件函数处理。
3、此步可以和2合并,用js替换图片。脉脉用的是单选按钮和css的配合来实现,它将a标签和单选按钮绑在了一块,当a标签被选中,同时单选按钮被选中。也就是说每个a标签都对应一个单选按钮,a标签和单选按钮各司其职,a标签打开"窗口组",单选按钮更新图片。
4、使用css3的水平盒子模型,占用比例为1:1:1:1

我们先看下如何布局:

index.html
  1. 1.  <div id="footer">     
  2. 2.        <form name="Menu">     //四个按钮的父类,这里为底部导航背景图片
  3. 3.                <input type='radio' name='footers' id='ifooter_home' checked='true' />    // 第一组按钮
  4. 4.                <a tapmode="homeActive" onclick="jumpFrame('home');">                         // 用a标签包裹住里面的图标和文字标签
  5. 5.                        <p class="home"></p>                                                                              // 图标
  6. 6.                        <center id='hic'>首页</center>                                                                 // 文字
  7. 7.                </a>
  8. 8.                <input type='radio' name='footers' id='ifooter_jobs' />                                 // 第二组按钮
  9. 9.                <a tapmode="jobsActive" onclick="jumpFrame('jobs');">                              
  10. 10.                       <p class="jobs"></p>
  11. 11.                       <center>工作</center>
  12. 12.              </a>
  13. 13.              <input type='radio' name='footers' id='ifooter_contacts' />                          // 第三组按钮
  14. 14.              <a tapmode="contactsActive" onclick="jumpFrame('contacts');">                     
  15. 15.                        <p class="contacts"></p>
  16. 16.                        <center>人脉</center>        
  17. 17.               </a>
  18. 18.               <input type='radio' name='footers' id='ifooter_myself' />                            // 第四组按钮
  19. 19.               <a tapmode="myselfActive" onclick="jumpFrame('myself');">
  20. 20.                         <p class="myself"></p>
  21. 21.                         <center>个人</center>               
  22. 22.               </a>
  23. 23.          </form>
  24. 24.  </div>
复制代码
行3:  每组按钮旁边配上个单选按钮,当按钮(a标签)被选中,同时触发该单选按钮,而单选按钮被选中则通过css中的设置更换一张蓝色图片
行4:  按钮(a标签)被选中,触发onclick事件,执行jumpFrame(‘home’);   
行5:  导航按钮图片,默认p标签是没有宽高的,在css中我们给他设置宽高,这样图片才能显示出来
行6:  按钮对应文字


我们依次实现上面的4个步骤:
1、加载背景图片
  1. #footer form{                                                                            // 这里是给底部导航加背景图片
  2.         padding-top:0.5625em;                                                    // 内部子元素距父元素顶部距离(上边距)
  3.         height:2.5625em;                                                               // 背景图片高度
  4.         background:url(../image/footer_menu.png) repeat-x;   // 背景图片素材延x轴平铺
  5.         -webkit-background-size:auto 3.125em;
  6.         font-weight:bold;
  7. }
复制代码
2、显示图片和文字
Tips:a、span等标签默认是无宽度和高度的,在使用前需要先给display:block属性,然后定义的宽和高才能生效。
  1. footer,header,section,dialog,menu,a,label,strong,var,em,del,time,figcaption,figure,pre,img,small,mark,cite,code,fieldset,button{   //都给他设置了,后面还得用到
  2.         display:block;
  3. }
复制代码
加载图片:
  1. #footer input[type="radio"] + a p{     // 加载按钮图片,给p标签设置宽高,前面提过其默认是无宽高的
  2.         height:1.4375em;
  3.         background-repeat:no-repeat;   // 无需重复
  4.         background-position:center top;
  5.         -webkit-background-size:auto 1.55em;
  6.         -webkit-transition-duration:200ms;
  7. }
  8. .home{      // 给第一个导航按钮加载图片
  9.         background-image:url('../image/tab_feeds_normal.png');
  10. }
  11. .jobs{        // 给第二个导航按钮加载图片
  12.         background-image:url('../image/tab_jobs_normal.png');
  13. }
  14. .contacts{ // 给第三个导航按钮加载图片
  15.         background-image:url('../image/tab_contacts_normal.png');
  16. }
  17. .myself{    // 给第四个导航按钮加载图片
  18.         background-image:url('../image/tab_myself_normal.png');
  19. }
复制代码
加载文字:
  1. #footer input[type="radio"] + a center{                  // 默认情况下,图标下文字样式
  2.         font-size:0.75em;                                               // 给p一个高度
  3.         color:#000;
  4.         opacity:0.3;                                                         // 默认情况下透明度
  5.         -webkit-transition-duration:200ms;
  6. }
  7. #footer input[type="radio"]:checked + a center{   // 被选中后的透明度
  8.         opacity:1;
  9. }
复制代码
3、按钮选中后更换图片
Tips:这里的“+”表示同级。在html中可以看出,单选按钮和a标签是同级的,这里的意思是:当单选按钮被选中后,其同级的a标签下的拥有类名为home的p标签更换图标
  1. #footer input[type="radio"]:checked + a p.home{    // 按钮被选中后,更换蓝色图片
  2.         background-image:url('../image/tab_feeds_selected.png');
  3. }
  4. #footer input[type="radio"]:checked + a p.jobs{   // 同上
  5.         background-image:url('../image/tab_jobs_selected.png');
  6. }
  7. #footer input[type="radio"]:checked + a p.contacts{
  8. background-image:url('../image/tab_contacts_selected.png');
  9. }
  10. #footer input[type="radio"]:checked + a p.myself{
  11.         background-image:url('../image/tab_myself_selected.png');
  12. }
复制代码
4、水平均匀分布
Tips:水平盒子模型
  1. #main,#header menu,form,#main > footer,#main > footer > div{    //这里干脆将后面将会用到的一块设置了吧,包括header
  2.         display:-webkit-box !important;            // 开启盒子模型
  3.         display: box !important;
  4.         -webkit-box-orient: horizontal;             //默认为水平方式,所以这句可以省略
  5. }
  6. #content,form a,#shops ol,#main > footer div,#shop_item,#shop_item li{
  7.         box-flex:1;
  8.         -webkit-box-flex:1;                                  //比例,#footer > form 下面四个a标签,比例就是1:1:1:1
  9. }
复制代码
OK,上面提到的四步我们都做到了,我们看下效果可能是这样:
不怎么和谐,单选按钮的小圆圈我们得去掉它
  1. input[type="radio"]{              //底部导航单选按钮小圆圈不显示,只是隐藏并不影响触发它
  2.         display:none!important;
  3. }
复制代码

---------------------------------------------------------------------------------------------------------------------------------------------

Last,我们还剩下一个问题(如何实现第三步描述的):a标签和单选按钮绑在了一块,当a标签被选中,同时单选按钮被选中。我们看一下index.html的第四行
  1. <a tapmode="homeActive" onclick="jumpFrame('home');">   
复制代码
我们看下jumpFram()的实现:
  1. function jumpFrame(url){
  2.         radioSelect('ifooter_' + url);            // 打开底部导航对应的顶部标题导航
  3.         radioSelect('iheader_' + url);

  4.         if (url == 'home') {
  5.                 openHomeFrameGroup(0);     // 打开home窗口组的0号窗口
  6.         } else if (url == 'jobs') {
  7.                 openJobsFrameGroup(0);
  8.         } else if (url == 'myself') {
  9.                 openMyselfFrameGroup(0);
  10.         } else if (url == 'contacts') {
  11.                 openContactsFrame();
  12.         }
  13. }
  14. function radioSelect(id) {                         // 触发单选按钮
  15.         var ret = 0;
  16.         var e = $api.byId(id);
  17.         if (e && !e.checked) {
  18.                 e.checked = true;
  19.                 ret = 1;
  20.         }
  21.         return ret;
  22. }
复制代码
openHomeFrameGroup()很简单,里面有个slderbarCallback()后面再说吧,编辑器提醒我帖子超过限制了......
下一篇我们搞定header ,follow me......

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

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

主题:
1102
帖子:
5126
云币:
2147214880

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

发表于 2014-10-29 19:36:50 |
推荐,高亮,楼主精品贴

主题:
28
帖子:
88
云币:
757
 楼主| 发表于 2014-10-29 20:14:48 |
APICloud官方 发表于 2014-10-29 19:36
推荐,高亮,楼主精品贴

编辑文章费事,必须得精品贴。。。。。

驾校小白

UID:3417

主题:
10
帖子:
49
云币:
119

APICloud粉丝APICloud毕业勋章

发表于 2014-10-30 09:02:03 |
赞。感谢分享。
如果你非要喊我“老湿”,请不要在后面加个“了”。
APICloud济南交流群:415691662

主题:
18
帖子:
612
云币:
366
发表于 2014-10-30 10:22:14 |
看见  CSS 我就头疼

主题:
28
帖子:
88
云币:
757
 楼主| 发表于 2014-10-30 13:19:19 来自手机 |
生于1984 发表于 2014-10-30 10:22
看见  CSS 我就头疼

我css基础为0,研究脉脉这四天就学会了,以你的基础绝对逆天

主题:
0
帖子:
11
云币:
56
发表于 2014-11-4 15:08:04 |
#footer input[type="radio"] + a p
这是一种方式样式表写法?没理解

主题:
28
帖子:
88
云币:
757
 楼主| 发表于 2014-11-4 15:50:34 |
liang32617 发表于 2014-11-4 15:08
#footer input[type="radio"] + a p
这是一种方式样式表写法?没理解

#footer input[type="radio"]  表示footer下的单选按钮
“+”表示同级
a p  表示a标签下的p标签

连起来意思就是:与footer下的单选按钮同级的a标签,选中a标签下的p标签

驾校小白

UID:5825

主题:
6
帖子:
26
云币:
41
发表于 2014-11-6 22:35:20 |
一会用 px 一会用em 有点晕

驾校小白

UID:1722

主题:
1
帖子:
16
云币:
3
发表于 2014-11-7 12:53:52 |
老邮局 发表于 2014-11-4 15:50
#footer input[type="radio"]  表示footer下的单选按钮
“+”表示同级
a p  表示a标签下的p标签

CSS还有这么强大的用法,佩服
您需要登录后才可以回帖 登录 | 立即注册

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