今天正式开始了高仿猫影电影这个项目。这个项目使用CastApp开发，CastApp.js是对mui.js的二次封装，比mui还要方便开发。
这个项目在整体的结构上面和我上一篇博客中用到的思路基本一致，在此就不赘述了。下面给出index.html的完整代码。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <link href="css/base.css" rel="stylesheet" /> </head> <body> <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="movie.html"> <span class="mui-icon mui-icon-videocam"></span> <span class="mui-tab-label">电影</span> </a> <a class="mui-tab-item" href="movie_theater.html"> <span class="mui-icon mui-icon-chatboxes"><span style="display: none;" class="mui-badge">1</span></span> <span class="mui-tab-label">影院</span> </a> <a class="mui-tab-item" href="find.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">发现</span> </a> <a class="mui-tab-item" href="home.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">我的</span> </a> </nav> <script src="js/mui.js"></script> <script src="js/dongyi.js"></script> <script type="text/javascript"> //mui初始化 mui.init(); var subpages = ['movie.html','movie_theater.html','find.html','home.html']; var subpage_style = { top:'0px', bottom: '51px' }; var aniShow = {}; //创建子页面，首个选项卡页面显示，其它均隐藏； mui.plusReady(function() { var self = plus.webview.currentWebview(); for (var i = 0; i < subpages.length; i++) { var temp = {}; var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); if (i > 0) { sub.hide(); }else{ temp[subpages[i]] = "true"; mui.extend(aniShow,temp); } self.append(sub); } }); //当前激活选项 var activeTab = subpages[0]; //选项卡点击事件 mui('.mui-bar-tab').on('tap', 'a', function(e) { var targetTab = this.getAttribute('href'); if (targetTab == activeTab) { return; } //显示目标选项卡 //若为iOS平台或非首次显示，则直接显示 if(mui.os.ios||aniShow[targetTab]){ plus.webview.show(targetTab); }else{ //否则，使用fade-in动画，且保存变量 var temp = {}; temp[targetTab] = "true"; mui.extend(aniShow,temp); plus.webview.show(targetTab,"fade-in",300); } //隐藏当前; plus.webview.hide(activeTab); //更改当前活跃的选项卡 activeTab = targetTab; }); //自定义事件，模拟点击“首页选项卡” document.addEventListener('gohome', function() { var defaultTab = document.getElementById("defaultTab"); //模拟首页点击 mui.trigger(defaultTab, 'tap'); //切换选项卡高亮 var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active"); if (defaultTab !== current) { current.classList.remove('mui-active'); defaultTab.classList.add('mui-active'); } }); </script> </body> </html>
为了和猫影电影保持一致，我们要对界面上的一些元素的样式进行设置。基本的思路是这样的，先用PhotoShop对猫影电影的页面进行吸色，然后使用浏览器自带的“检查”功能找到是哪一个样式在控制着当前的这个元素，然后在我么自己新建的css文件里面添加同名的样式，然后把对应的属性修改了就可以了。
比如说，在下面左侧的图片例子当中，底部选项卡被激活的选项的颜色是淡蓝色，我们想把它改成右侧图片的样子。
我们通过使用浏览器的检查功能，发现控制激活选项颜色的样式是这样的
.mui-bar-tab .mui-tab-item.mui-active {
color: #007aff;
}
然后我们在base.css文件当中新建一个同名的样式
这样我们的这个新的样式就会覆盖原来的样式。
下面给出base.css文件的完整代码
/* * 这是我们自己写的css文件 */ /*页面主体的背景颜色*/ body{ background-color: #f5f5f5 !important; } /*设置标题头和子页面之间的间隔距离*/ .mui-bar-nav { top: 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; } /*设置底部导航栏的背景颜色 注意这里不能更改mui-bar的background-color属性 因为卡头的class也是mui-bar-tab*/ .mui-bar-tab { background-color: #f5f5f5 !important; } /*设置底部选项卡被选中的时候的背景颜色*/ .mui-bar-tab .mui-tab-item.mui-active { color: #d43e37; } /*表头的背景颜色*/ #header{ background: #d43e37; } /*表头中字体的颜色*/ #header h1{ color:#fff; }
最终的项目效果图
注意，在css文件中不能使用//这种方式来注释，必须使用/**/的方式，我一开始就是因为使用了//的方式对代码进行了注释，最后导致样式不能正确的发挥作用。
好的，第一课就到此结束。