使用APICloud从1开始写玩转晋城一概览精选.docVIP

从1开始学晋城(一) —— 概览 上一篇“?从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 13??div id=header 14? ?? ?? ? div class=main header active? ?? ?? ???// 首页 15? ?? ?? ?? ?? ?? ?h1玩转晋城/h1a tapmode= class=scan onclick=scan()scan/a 16? ?? ?? ? /div 17? ?? ?? ? div class=news header? ?? ?? ?? ?? ?? ?? ?// 新闻 18? ?? ?? ?? ?? ?? ?h1玩转晋城/h1 19? ?? ?? ?? ?? ?? ?ul class=submenu 20? ?? ?? ?? ?? ?? ?? ?? ???lia tapmode=active onclick=filterNews(hot); class=hot lighti/i热点/a/li 21? ?? ?? ?? ?? ?? ?? ?? ???lia tapmode=active onclick=filterNews(local); class=locali/i本地/a/li 22? ?? ?? ?? ?? ?? ?? ?? ???lia tapmode=active onclick=filterNews(topic); class=topici/i专题/a/li 23? ?? ?? ?? ?? ?? ?/ul 24? ?? ?? ? /div 25? ?? ?? ? div class=life header? ?? ?? ?? ?? ?? ?? ?? ?// 生活 26? ?? ?? ?? ?? ?? ?h1玩转晋城/h1 27? ?? ?? ? /div 28? ?? ?? ? div class=activity header? ?? ?? ?? ?? ?? ?// 活动 29? ?? ?? ?? ?? ?? ?h1玩转晋城/h1 30? ?? ?? ?? ?? ?? ?ul class=submenu 31? ?? ?? ?? ?? ?? ?? ?? ???lia tapmode= onclick=searchAct(this,city) class=cityi/ispan全城/span/a/li 32? ?? ?? ?? ?? ?? ?? ?? ???lia tapmode= onclick=searchAct(this,type) class=hoti/ispan全部类型/span/a/li 33? ?? ?? ?? ?? ?? ?/ul 34? ?? ?? ? /div 35? ?? ?? ? div class=user header? ?? ?? ?? ?? ?? ?? ???// 用户 36? ?? ?? ?? ?? ?? ?h1 id=headerText我/h1a class=set tapmode= id=headerSet onclick=setting();设置/a 37? ?? ?? ? /div 38??/div 复制代码 这里html列出了全部的header，但同时只有一个会显示；当某个header获得active类的时候该header会显示，其他则隐藏。在js中，同样是控制header是否拥