apicloud apicloud

注册
查看: 18210|回复: 24

[新手教程] 从1开始学晋城(一) —— 概览

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

[新手教程] 从1开始学晋城(一) —— 概览

18210 24 | 发表于 2014-11-30 21:05:21 |阅读模式 | |
本帖最后由 老邮局 于 2015-7-23 20:46 编辑

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


上一篇“ 从0开始写脉脉 ”的帖子得到了朋友们的肯定,最近研读了下晋城的代码,再次分享读书心得,这次从“1”开始,不敢再从“0”开始误导比我还白的朋友。依旧是连载文章,但是这次文章更新的跨度会比较大。文章是给和我一样的小白准备的。


从脉脉到晋城,我们可以总结出一般规律:界面基本分为三大块:header、main、footer。
我们首先从使用者的角度分析下程序:
1、由于header、footer和main部分组成。
2、footer是固定的,五个按钮打开不同的header和main部分

其实就这些了,内容最多最复杂的是main,包括布局和js部分,会娓娓道来的.......


footer是这个样子的:

footer是很重要的部分,底部导航的样式基本都是相通的,布局我们后面会详加分析,和脉脉不同的是这五个按钮的触发方式(选中后,打开对应的header和main),脉脉更多的偏向css3的部分,晋城偏向js实现。

header是这个样子的:
底部按钮对应的header
首    页
新    闻
生    活
活    动
每个底部导航按钮,会打开不同的header。

main是这个样子的 :此处省略后面表


进入正题
入口文件是index.html。
先看header部分:
index.html
  1. 13  <div id="header">
  2. 14          <div class="main header active">           // 首页
  3. 15                  <h1>玩转晋城</h1><a tapmode="" class="scan" onclick="scan()">scan</a>
  4. 16          </div>
  5. 17          <div class="news header">                     // 新闻
  6. 18                  <h1>玩转晋城</h1>
  7. 19                  <ul class="submenu">
  8. 20                          <li><a tapmode="active" onclick="filterNews('hot');" class="hot light"><i></i>热点</a></li>
  9. 21                          <li><a tapmode="active" onclick="filterNews('local');" class="local"><i></i>本地</a></li>
  10. 22                          <li><a tapmode="active" onclick="filterNews('topic');" class="topic"><i></i>专题</a></li>
  11. 23                  </ul>
  12. 24          </div>
  13. 25          <div class="life header">                        // 生活
  14. 26                  <h1>玩转晋城</h1>
  15. 27          </div>
  16. 28          <div class="activity header">                  // 活动
  17. 29                  <h1>玩转晋城</h1>
  18. 30                  <ul class="submenu">
  19. 31                          <li><a tapmode="" onclick="searchAct(this,'city')" class="city"><i></i><span>全城</span></a></li>
  20. 32                          <li><a tapmode="" onclick="searchAct(this,'type')" class="hot"><i></i><span>全部类型</span></a></li>
  21. 33                  </ul>
  22. 34          </div>
  23. 35          <div class="user header">                       // 用户
  24. 36                  <h1 id="headerText">我</h1><a class="set" tapmode="" id="headerSet" onclick="setting();">设置</a>
  25. 37          </div>
  26. 38  </div>
复制代码
这里html列出了全部的header,但同时只有一个会显示;当某个header获得active类的时候该header会显示,其他则隐藏。在js中,同样是控制header是否拥有active类来显示或者隐藏。
我们可以先简单的看一下css:
  1. 28  #header .header{
  2. 29          display: none;
  3. 30  }
  4. 31  #header .active{
  5. 32          display: block;
  6. 33  }
复制代码
这里我们就大体了解了他的机制,每个header默认有两个类控制,拿“首页”来说,其同时拥有main、header、active类,main类控制header具体的外观样式,header让其默认隐藏,而拥有active类则会显示。
还好index.html和index.css的代码不多,index.css中的剩余部分代码大家自己琢磨吧,很简单,“脉脉”那篇帖子我都说的很详细了。



再看footer部分
html部分非常简单,主要内容是css布局部分,后面具体分析footer的时候详解。
  1. 42  <div id="nav">
  2. 43          <ul>
  3. 44                  <li class="active"><a class="main" tapmode="active" onclick="openTab('main')">首页</a></li>
  4. 45                  <li><a class="news" tapmode="active"                         onclick="openTab('news')">新闻</a></li>
  5. 46                  <li><a class="life" tapmode="active"                            onclick="openTab('life')">生活</a></li>
  6. 47                  <li><a class="activity" tapmode="active"                      onclick="openTab('activity')">活动</a></li>
  7. 48                  <li><a class="user" tapmode="active"                           onclick="openTab('user')">我</a></li>
  8. 49          </ul>
  9. 50  </div>
复制代码
每个按钮会触发openTab()函数,切换header和main全在这里面实现(index.js)。
index.js
  1. var prevPid = '';           // 前一个打开的窗口
  2. curPid = '';                   // 当前打开的窗口,记录这两个数组主要是后面方便判断,过滤掉重复打开当前页面这个操作
  3. var frameArr = [];        // 保存已打开的窗口名称,第一次打开会加载内存,之后我们只需要隐藏或者让其显示,无需再次加载内存,减小开销

  4. function isOpened(frmName){    // 根据已给窗口名,判断是否曾经被打开过?
  5.         var i = 0, len = frameArr.length;
  6.         var mark = false;
  7.         for(i; i<len; i++){
  8.                 if(frameArr[i] === frmName){
  9.                         mark = true;
  10.                         return mark;
  11.                 }
  12.         }
  13.         return mark;
  14. }
  15. function showHeader(type){
  16.         if(!type){return;}
  17.         var header = $api.dom('#header .active');         // 查找前一个显示的header
  18.         $api.removeCls(header,'active');                         // 去掉它的显示属性(隐藏)
  19.         var thisHeader = $api.dom('#header .'+type);   // 当前要显示的header
  20.         $api.addCls(thisHeader,'active');                         // dispaly:block  显示当前header
  21. }
  22. function openTab(type){                                            // 这个type对应底部导航的五个值,我们在index.html的44~48行已经确定好了
  23.         showHeader(type);                                             // 显示对应的header

  24.         var actTab = $api.dom('#nav .active');             // 查找之前选中的底部导航按钮
  25.         $api.removeCls(actTab,'active');                       // 去掉它的被选中属性
  26.         var thisTab = $api.dom('#nav .'+ type);           // 寻找当前被选中的按钮
  27.         thisTab = thisTab.parentNode;                        // 通过html代码可知,按钮是a标签,其父元素是li标签,我们需要的就是给li标签加样式
  28.         $api.addCls(thisTab,'active');                            // 激活当前按钮()

  29.         prevPid = curPid;                                       
  30.         curPid = type;

  31.         if(prevPid !== curPid){                                      // 如果不是重复打开自己的话
  32.                 if(isOpened(type)){
  33.                         api.setFrameAttr({                             // 窗口之前被打开则直接让其显示
  34.                                 name: type,
  35.                                 hidden: false
  36.                         });
  37.                 }else{
  38.                         api.openFrame({});                            // 之前未被打开,则分配内存加载之。 mian部分在这里被加载!
  39.         }
  40.        if(prevPid){                                                         // 隐藏之前打开的页面
  41.                 api.setFrameAttr({
  42.                         name: prevPid,
  43.                         hidden: true
  44.                 });
  45.         }
  46.         if(!isOpened(type)){                                           // 若之前没被打开过,则加入已打开的窗口数组,
  47.                 frameArr.push(type);
  48.         }
  49. }
  50. }
复制代码


我们最后看一下“首页”header右上角的那个图标的几个知识点:
index.html的第15行,我们定义了一个a标签:
  
  1. 49  #header .scan{
  2. 50          display:inline-block;          // 这个知识点比较重要,不过这里不起任何作用
  3. 51          position:absolute;              // 相对于父元素绝对定位,它不会占用父元素的位置,二是浮在父元素表面
  4. 52          bottom: 2px; right: 20px;   // 给他一个绝对的坐标
  5. 53          width: 40px; height: 40px; text-indent: -9999px;      // 显示该图标的元素容器大小
  6. 54          background: url(../image/scan.png) no-repeat center center;
  7. 55          background-size: 24px;     // 背景图片大小配置,还有contain、cover等属性,需要掌握@
  8. 56          -webkit-background-size: 24px;
  9. 57  }
复制代码

后续文章,会引用前面说过的内容,很多东西是前后呼应的......




文章导航:
从1开始学晋城(一) —— 概览
从1开始学晋城(二) —— 首页main部分
从1开始学晋城(三) —— 蓝色样式

从1开始学晋城(四) —— 热门活动
从1开始学晋城(五) —— 下拉菜单

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

1

查看全部评分

主题:
41
帖子:
287
云币:
1474
发表于 2014-12-1 00:28:48 |
顶楼主!好文章!
个人博客:http://hanc.cc

主题:
2
帖子:
16
云币:
15
发表于 2014-12-1 09:36:57 |
楼主辛苦了。感谢分享,受益良多。

主题:
0
帖子:
5
云币:
7
发表于 2014-12-1 10:17:30 |
楼主辛苦了,学习去。

马路杀手

UID:934

主题:
4
帖子:
676
云币:
1223
发表于 2014-12-1 10:38:06 |
好文章,分析的不错~~

主题:
0
帖子:
11
云币:
56
发表于 2014-12-1 10:47:36 |
小白 受益!!!

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

APICloud粉丝端午节

发表于 2014-12-1 16:25:13 |

驾校小白

UID:13595

主题:
3
帖子:
18
云币:
21
发表于 2014-12-2 11:51:56 |
绝对是精品!   感谢老师

新手上路

UID:15766

主题:
3
帖子:
11
云币:
113
发表于 2014-12-8 01:17:49 来自手机 |
学习了,感谢分享

主题:
1
帖子:
4
云币:
19
发表于 2014-12-9 09:10:37 |
火钳刘明啊
啊啊啊
123下一页
您需要登录后才可以回帖 登录 | 立即注册

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