minxing-devtools-core
Version:
250 lines (243 loc) • 8.81 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>window</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
html,body{
height: 100%;
background-color: #EEEEF0;
}
#wrap{
height:100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow:column;
}
.fl{
float:left;
}
#header{
background-color: #323232;
color: #fff;
width: 100%;
height: 48px;
position: relative;
}
#header h1{
font-size: 20px; height: 44px; line-height: 44px; margin: 0em; color: #fff;
}
#header h5{
font-size: 1em;
}
#main{
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
padding: 1em;
}
#main .title{
font-size: 0.8em;
text-indent: 1em;
}
#main .brief{
font-size: 0.6em;
text-indent: 1.3em;
}
#footer{
height: 50px; line-height: 50px;
background: url(../image/tmall_bottom_bg.9.png) left bottom repeat-x;
background-size: 11px 50px;
background-color: #81a9c3;
width: 100%;
text-align: center;
}
#footer h5{
color: white;
}
#header .header_content{
width: 100%;
height: 48px;
position: absolute;
left: 0;
bottom: 0;
display: none;
}
#footer_list{
height: 50px;
width: 100%;
position: relative;
background-color: #f2f2f2;
}
#footer_list .list_li{
float: left;
height: 50px;
width: 20%;
position: relative;
}
#footer_list .list_bar{
position: absolute;
bottom: 0;
left: 6.4%;
height: 2px;
width: 7.5%;
background-color: #6ab494;
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
#footer_list .home{
background: url(../image/icon_tab_home_nomal.png) center 6px no-repeat;
background-size: 22px 21px;
}
#footer_list .home.active{
background: url(../image/icon_tab_home_selected.png) center 6px no-repeat;
background-size: 22px 21px;
}
#footer_list .follow{
background: url(../image/icon_tab_featured_normal.png) center 6px no-repeat;
background-size: 22px 21px;
}
#footer_list .follow.active{
background: url(../image/icon_tab_featured_selected.png) center 6px no-repeat;
background-size: 22px 21px;
}
#footer_list .fun{
background: url(../image/icon_tab_fun_normal.png) center 6px no-repeat;
background-size: 26px 21px;
}
#footer_list .fun.active{
background: url(../image/icon_tab_fun_selected.png) center 6px no-repeat;
background-size: 26px 21px;
}
#footer_list .cart{
background: url(../image/icon_tab_cart_normal.png) center 6px no-repeat;
background-size: 22px 21px;
}
#footer_list .cart.active{
background: url(../image/icon_tab_cart_selected.png) center 6px no-repeat;
background-size: 22px 21px;
}
#footer_list .profile{
background: url(../image/icon_tab_featured_normal.png) center 6px no-repeat;
background-size: 22px 21px;
}
#footer_list .profile.active{
background: url(../image/icon_tab_featured_selected.png) center 6px no-repeat;
background-size: 22px 21px;
}
#footer_list .list_li .text{
position: absolute;
width: 100%;
height: 1em;
line-height: 1em;
left: 0;
bottom: 7px;
color: #323237;
font-size: 11px;
}
#footer_list .list_li.active .text{
color: #6ab494;
}
.topbar {background: #323237; height:50px; border-bottom: 1px solid #DDDFE3;}
.whitebar {background-color: #f2f2f2;}
#whitecity {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px;color: #6ab494;}
.secCitylistarrow {vertical-align: top; width: 15px; padding-top: 18px;padding-left: 5px;}
.search {height: 34px;line-height: 34px; padding-left: 10px; border-radius: 30px; margin-top: 8px;}
.search img {vertical-align: top; width: 20px; padding-top: 7px;padding-right: 10px;}
.secSearch {position:absolute;left: 90px;right: 15px;background-color: #E8E8E8;color: #999;}
</style>
</head>
<body ontouchstart="">
<div id="wrap">
<div id="header" class="">
<div class="topbar whitebar">
<div class="citylist fl" id="whitecity" tapmode onclick="">北京<img src="../image/title_arrow_down_normal.png" alt="" class="secCitylistarrow"></div>
<div class="search secSearch" tapmode onclick="">
<img src="../image/navibar_search_icon_search.png" alt="">搜索团购...
</div>
</div>
</div>
<div id="main">
</div>
<div id="footer">
<ul id="footer_list">
<li class="list_li home active" onclick="changeIndexFrame(0);" tapmode>
<span class="text">天猫</span>
</li>
<li class="list_li follow" onclick="changeIndexFrame(1);" tapmode>
<span class="text">关注</span>
</li>
<li class="list_li fun" onclick="changeIndexFrame(2);" tapmode>
<span class="text">范儿</span>
</li>
<li class="list_li cart" onclick="changeIndexFrame(3);" tapmode>
<span class="text">购物车</span>
</li>
<li class="list_li profile" onclick="changeIndexFrame(4);" tapmode>
<span class="text">我</span>
</li>
<li class="list_bar">
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var aFooterList = $api.domAll('#footer_list .list_li');
var listBar = $api.dom('#footer_list .list_bar');
var frameJson = {
'0': 'apicloudFrame1',
'1': 'apicloudFrame1',
'2': 'apicloudFrame1',
'3': 'apicloudFrame1',
'4': 'apicloudFrame1'
};
var changeIndexFrame = function(index){
header.className = 'home';
for (var i = 0; i < 5; i++) {
if (i == index) {
$api.addCls(aFooterList[index],'active');
} else{
$api.removeCls(aFooterList[i],'active');
}
};
listBar.style.webkitTransform = 'translateX('+index*266.5+'%)';
openIndexFrames(index);
};
apiready = function(){
api.setWinAttr({
bounces: false
});
window.header = $api.byId('header');
$api.fixIos7Bar(header);
var headerPos = $api.offset(header);
var main = $api.byId('main');
var mainPos = $api.offset(main);
var footer = $api.byId('footer');
var footerPos = $api.offset(footer);
window.openIndexFrames = function(index){
api.openFrame({
name: frameJson[index],
url: frameJson[index]+'.html',
bounces: true,
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: mainPos.h
}
});
};
changeIndexFrame(0);
};
</script>
</html>