今天我们来讲一下appframework简单布局,一般app都会分成三个部分,header,page,footer,其中header和footer内容格式比较固定,这里主要是要看设计的需求,最主要的是page的内容实现。
Appframework 样式文件,JS文件引用
<link rel="stylesheet" type="text/css" href="build/af.ui.css"/>
<link rel="stylesheet" type="text/css" href="build/icons.min.css"/>
<script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/fastclick.min.js"></script>
<script type="text/javascript" charset="utf-8" src="build/appframework.ui.js"></script>
其中jquery.min.js版本是2.0以上的
Appframework布局
今天要实现的效果
这里的实现效果基本都是从demo里面复制过来的代码,其中有两个改变
1.Header右上角加了一个设置图标,主要是考虑到现在的app右上角都会有一个按钮。
2.Page内容里面的分割线小于1px的实现,主要是app现在越来越弱化分割线,很多app不仔细看基本上很难看到有这个线
Header代码
html代码
<header>
<h1>Tab View</h1>
<a href="#" class="icon settings set" id='tab4' data-transition="none" ></a>
</header>
样式代码
/***Head set start***/
.set{right:2%;position: absolute;line-height: 44px; text-decoration: none; font-size: 12px; text-overflow: ellipsis; color: #fff;}
.ios7 .set{
color: #606060;}
/***Head set end***/
note:
css样式代码里面不只有.set 还有一个.ios7 .set,其中.set 是默认主题的设置按钮样式编码,.ios7 .set是ios7的主题的设置按钮,当然后面开发这里肯定还有安卓的主题代码编写,我这里就不一一举例了。
Page代码
<div class="pages">
<!--Tab View Pages-->
<div class="panel" data-title="Home" id="main" data-selected="true">
<ul class="list">
<li>
<a href="index.html" data-ignore="true">App Framework theme</a>
</li>
<li>
<a href="index.html?ios7" data-ignore="true">iOS theme</a>
</li>
<li>
<a href="index.html?android" data-ignore="true">Android theme</a>
</li>
<li>
<a href="index.html?win8" data-ignore="true">Win8 theme</a>
</li>
<li>
<a href="index.html?bb" data-ignore="true">BB10 theme</a>
</li>
<li>
<a href="index.html?tizen" data-ignore="true">tizen</a>
</li>
<li>
<a href="index.html?firefox" data-ignore="true">firefox</a>
</li>
</ul>
</div>
<div class="panel" data-title="Favorites" id="foobar" >
This is view for second Tab
<br>
<br>
<a href="#about" class="button" data-tab='tab3' data-transition="slide-left">About</a>
</div>
<div class="panel" data-title="Messages" id="about">
This is view for third Tab
</div>
<div class="panel" data-title="Profile" id="test">
This is view for fourth Tab
</div>
</div>
这里的代码基本上是框架自带的样式,其中有改变的就是li的分割线,框架里面是1px的高度,我这里改成了0.5的效果,是用css3实现的
.list li{ border-bottom: none;}
.list li:after{
content: "";
display: block;
position: absolute;
left: -50%;
width: 200%;
bottom: 0px;
height: 1px;
background: #ededed;
-webkit-transform:scale(0.5);
}
Footer代码
<footer>
<a href="#main" class="icon home" id='tab1' >Main</a>
<a href="#foobar" class="icon heart" id='tab2' data-transition="up-reveal">Foobar</a>
<a href="#about" class="icon html5" id='tab3' data-transition="slide-left">About</a>
<a href="#test" class="icon trash" id='tab4' data-transition="none">test</a>
</footer>
纯粹的复制粘贴,标准搬砖。
这节课讲的比较简单,后面会有比较复杂的功能奉上。个人观点,h5 app就是要让人看不出和原生态的app有区别,所以教程尽量会以这个目标会前提,我也会很少讲解h5的代码,欢迎拍砖。
第一次写这种博客,写的不好,请体谅,如果有意见或者建议,欢迎留言。