minxing-tools-core
Version:
308 lines (262 loc) • 11.7 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" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
/* 头部样式 */
.topbar {background: #f2f2f2; height:50px; border-bottom: 1px solid #DDDFE3;position: relative;}
.topbar_title {display: inline-block;font-size: 20px; line-height: 50px;padding-left: 12px;}
.hr01, .hr02 {height: 28px;}
.headerico {padding: 11px 15px 11px 15px;}
.headericohover {background: #DADDE0;}
.fr{float: right;}
.fl{float: left;}
img {vertical-align: top;}
/*第一头部*/
.egret-header-box {height: 50px;}
.egret-img img {height: 30px;padding: 10px;}
.egret-header-search {background-color: #fff; position: absolute; left: 60px; right: 20px; height: 34px; margin-top: 8px;border-radius: 4px;}
.egret-header-search img {margin-left: 30px; height: 20px; margin-top: 7px;}
.egret-header-search input {line-height: 24px;font-size: 14px;padding-top: 5px;}
.egret-header-search input:focus {/*border:0;*/ outline:none;}
/* 第二头部 */
.egret-header-text {line-height: 50px;color: #fff;font-size: 16px;padding: 0 10px;}
.egret-header-title {position: absolute;width: 100%;text-align: center;line-height: 50px;color: #fff;font-size: 20px;}
/* 第三头部 */
.egret-switchframe {position: absolute; left: 90px; right: 90px;background-color: #fcfcfc;text-align: center;height: 30px;line-height: 30px;bottom: 10px;border-radius: 4px;color: #fff;border: 1px solid #6ab494;}
.egret-switchframe div {width: 50%;display: inline-block;color: #323237;background-color: #f2f2f2;}
.egret-switchframe div:first-child {border-radius: 3px 0 0 3px;}
.egret-switchframe div:last-child {border-radius: 0px 3px 3px 0px;}
.egret-switchframe-selectswitch {background-color: #6ab494 ;color: #fff ;}
/* 头部切换样式 */
.activebar {display: block;}
/* 底部切换按钮样式 */
ul {display: -webkit-box; display: -webkit-flex; display: flex; }
#footer {height: 51px;background-color: #413A36;border-top: 1px solid #332E2A; }
#footer li{-webkit-box-flex: 1; -webkit-flex: 1; flex:1;}
/* 选项卡样式 */
.scrollbar {display: -webkit-box;display: -webkit-flex; display: flex;text-align: center; height: 40px; line-height: 40px;background: #EBECF0;font-size: 12px;position: relative;}
.col1 {-webkit-box-flex:1;-webkit-flex: 1;flex:1;color: #909090;}
.indexbar {position: absolute;width: 50%;height: 5px;left: 0px;bottom: 0px;-webkit-transition: 300ms;}
.redbox {background: #DB4646;width: 40px;height: 5px;position: relative;left: auto;right: auto; margin-left: auto; margin-right: auto;}
#localrefresh {display:none;float: right; width: 40px; padding: 5px 10px;}
.navbar {display: -webkit-box; display: -webkit-flex;display: flex;-webkit-box-orient: horizontal; position: relative; height: 40px; box-sizing: border-box; background: rgba(255,255,255,0.4); border-bottom: 1px solid #e0e0e0; }
.navbar-item {display: block; -webkit-box-flex: 1; -webkit-flex: 1;flex: 1;width: 100%; line-height: 40px; font-size: 16px; text-align: center;color: #000; }
.navbar-item-hov {background-color: rgba(254,242,228,0.7); }
.navbar-item-active {color: #6ab494; }
#navmark {position: absolute; left: 0px; bottom: 0px; -webkit-transition: 300ms; text-align: center; height: 2px;background-color: #6ab494;}
</style>
</head>
<body>
<div id="wrap">
<!-- 第三头部 -->
<div id="thridHeader" class="titlebar">
<div class="egret-header topbar">
<div class="egret-switchframe">
<div class="egret-switchframe-leftbtn egret-switchframe-selectswitch" tapmode onclick="setSecondFramegroupIndex(0)">已下载</div><div class="egret-switchframe-rightbtn" onclick="setSecondFramegroupIndex(1)" tapmode>下载中</div>
</div>
<div class="egret-img"><img src="../image/cm2_icn_back.png" alt="" tapmode onclick="" ></div>
</div>
</div>
<nav class="navbar" id="firstHeaderIndex">
<a id="navbar-item-recommend" class="navbar-item navbar-item-active" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(0);">歌曲</a>
<a id="navbar-item-rank" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(1);">歌手</a>
<a id="navbar-item-favorite" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex(2);">专辑</a>
<mark id="navmark"></mark>
</nav>
<div id="main">
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var thirdHeader = $api.byId('thridHeader');
var firstHeaderOffset;
var firstHeaderIndexHeight;
var main = $api.byId('main');
var mainPos = $api.offset(main);
var isSecopen ;
var isFirstopen;
function setFrameGroupIndex(frameIndex) {
api.setFrameGroupIndex({
name: 'downloadmusicgroup',
index: frameIndex,
scroll: true
});
}
function setFrameGroupStatus(frameIndex) {
switch (frameIndex) {
case 0:
{
$api.byId('navbar-item-recommend').className = "navbar-item navbar-item-active";
$api.byId('navbar-item-rank').className = "navbar-item";
$api.byId('navbar-item-favorite').className = "navbar-item";
var num = (api.winWidth / 3) * frameIndex;
$api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");
break;
}
case 1:
{
$api.byId('navbar-item-recommend').className = "navbar-item";
$api.byId('navbar-item-rank').className = "navbar-item navbar-item-active";
$api.byId('navbar-item-favorite').className = "navbar-item";
var num = (api.winWidth / 3) * frameIndex;
$api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");
break;
}
case 2:
{
$api.byId('navbar-item-recommend').className = "navbar-item";
$api.byId('navbar-item-rank').className = "navbar-item";
$api.byId('navbar-item-favorite').className = "navbar-item navbar-item-active";
var num = (api.winWidth / 3) * frameIndex;
$api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)");
break;
}
default:
break;
}
}
// 打开第一个framegroup
function openFirstFramegroup() {
api.openFrameGroup({
name: 'downloadmusicgroup',
background: '#FFF',
scrollEnabled: false,
rect: {
x: 0,
y: firstHeaderOffset.h + firstHeaderIndexHeight,
w: "auto",
h: api.frameHeight - firstHeaderOffset.h - firstHeaderIndexHeight
},
index: 0,
frames: [{
name: 'apicloudFrame1',
url: 'apicloudFrame1.html',
bounces: false,
}, {
name: 'apicloudFrame1',
url: 'apicloudFrame1.html',
bounces: false,
}, {
name: 'apicloudFrame1',
url: 'apicloudFrame1.html',
bounces: false,
}]
}, function(ret) {
setFrameGroupStatus(ret.index);
});
}
function offsetSecFrame () {
api.setFrameAttr({
name: 'apicloudFrame1',
rect: {
x: 0,
y: firstHeaderOffset.h + firstHeaderIndexHeight,
w: 'auto',
h: 'auto'
}
});
}
function backSecFrame () {
api.setFrameAttr({
name: 'apicloudFrame1',
rect: {
x: 0,
y: firstHeaderOffset.h,
w: 'auto',
h: 'auto'
}
});
}
function setFrameGroupAttribute (framename, ishidden) {
api.setFrameGroupAttr({
name: framename,
hidden: ishidden
});
}
function setFrameAttribute (framename, ishidden) {
api.setFrameAttr({
name: framename,
hidden: ishidden
});
}
function openSecFrame () {
api.openFrame({
name: 'apicloudFrame1',
url: 'apicloudFrame1.html',
bounces: false,
opaque: false,
rect: {
x: 0,
y: firstHeaderOffset.h,
w: 'auto',
h: 'auto'
}
});
}
// -----------------------------------
// 第二个framegroup
// -----------------------------------
function setSecondFramegroupIndex(frameIndex) {
if ((isSecopen == false) && (frameIndex == 1))
{
openSecFrame();
isSecopen = true;
}
if ((isFirstopen == false) && (frameIndex == 0))
{
openFirstFramegroup();
isFirstopen = true;
}
if (frameIndex === 0) {
var thridHeader = $api.byId('thridHeader');
var thridHeader = $api.offset(thridHeader);
// 清除右部class
var leftbtn = document.getElementsByClassName('egret-switchframe-leftbtn')[0];
var rightbtn = document.getElementsByClassName('egret-switchframe-rightbtn')[0];
// 注意，类名的前面有一个空格
rightbtn.className = 'egret-switchframe-rightbtn';
leftbtn.className = 'egret-switchframe-leftbtn egret-switchframe-selectswitch';
offsetSecFrame();
setFrameAttribute('apicloudFrame1', true);
setFrameGroupAttribute('downloadmusicgroup', false);
}
else {
var thridHeader = $api.byId('thridHeader');
var thridHeader = $api.offset(thridHeader);
// 清除左部class
var leftbtn = document.getElementsByClassName('egret-switchframe-leftbtn')[0];
var rightbtn = document.getElementsByClassName('egret-switchframe-rightbtn')[0];
rightbtn.className = 'egret-switchframe-rightbtn egret-switchframe-selectswitch';
leftbtn.className = 'egret-switchframe-leftbtn';
setFrameAttribute('apicloudFrame1', false);
setFrameGroupAttribute('downloadmusicgroup', true);
backSecFrame();
}
}
// 完成首页初始化
apiready = function() {
thirdHeader = $api.byId('thridHeader');
var fortheader = $api.byId('fortheader');
var firstHeaderIndex = $api.byId('firstHeaderIndex');
$api.fixIos7Bar(thirdHeader);
// TODO 一定记得修改
firstHeaderOffset = $api.offset(thirdHeader);
firstHeaderIndexHeight = $api.offset(firstHeaderIndex).h;
var main = $api.byId('main');
var mainPos = $api.offset(main);
var scrollHeight = $api.dom('.navbar').offsetHeight;
$api.byId('navmark').style.width = api.winWidth / 3 + 'px';
var index = 0;
isFirstopen = false;
isSecopen = false;
setSecondFramegroupIndex(index);
};
</script>
</html>