apicloud弹出层
那年夏天 2019-06-26
我的，点击设置弹出
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../css/app.css" />
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 17.63 + 'px';
</script>
</head>
<body>
<header class="app-subheader" id="header">
<div class="subheader-left"></div>
<div class="subheader-center">我的</div>
<div class="subheader-right"></div>
</header>
<!--个人中心-->
<section class="app-personalCenter">
<div class="personalCenter-header">
<img src="../../image/personCenterImg.png" alt="img" class="header-top" />
<p class="header-bottom">欢迎你，华仔同学</p>
</div>
<ul class="personalCenter-body">
<li class="body-item" onclick="openCollection()">
<img class="item-left" src="../../image/centerStart.png" alt="start"/>
<span class="item-center">收藏</span>
<img class="item-right" src="../../image/centerMore.png" alt="more" />
</li>
<li class="body-item" onclick="openSet()">
<img class="item-left" src="../../image/centerSet.png" alt="start" />
<span class="item-center">设置</span>
<img class="item-right" src="../../image/centerMore.png" alt="more" />
</li>
<li class="body-item" onclick="openAbout()">
<img class="item-left" src="../../image/centerPerson.png" alt="start" />
<span class="item-center">关于</span>
<img class="item-right" src="../../image/centerMore.png" alt="more" />
</li>
<li class="body-item" onclick="openDialog()">
<img class="item-left" src="../../image/centerInfo.png" alt="start" />
<span class="item-center">当前版本1.0,已经是最新版本</span>
<img class="item-right" src="../../image/centerMore.png" alt="more"/>
</li>
</ul>
</section>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript">
apiready = function() {
var header = $api.dom('#header');
$api.fixStatusBar(header);
var headerH = $api.offset(header).h;
$("body").css("padding-top",headerH);
navWidth = api.pageParam.navWidth;
headerHeight = api.pageParam.headerHeight;
dialogBox = api.require('dialogBox');
};
function openCollection(){
api.openFrame({
name: 'collection',
url: 'collection.html',
rect: {
x: navWidth,
y: 0,
w: 'auto',
h: 'auto'
},
pageParam: {
navWidth: navWidth,
headerHeight: headerHeight
},
bounces: false
});
}
function openAbout() {
api.openFrame({
name: 'about',
url: 'about.html',
rect: {
x: navWidth,
y: 0,
w: 'auto',
h: 'auto'
},
pageParam: {
navWidth: navWidth,
headerHeight: headerHeight
},
bounces: false
});
}
function openSet() {
api.openFrame({
name: 'set',
url: './set.html',
rect: {
x: 0,
y: 0,
w: api.winWidth,
h: api.winHeight
},
bgColor: 'rgba(0,0,0,0.6)',
bounces: false,
pageParam: {
navWidth: navWidth,
headerHeight: headerHeight
}
});
}
</script>
</html>设置页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../css/app.css" />
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 17.63 + 'px';
</script>
<style>
html,
body {
height: 100%;
background-color: transparent;
}
.app-login{
}
</style>
</head>
<body>
<!--个人信息-->
<section class="app-login">
<div class="login-header">
<div class="header-item">
<img src="../../image/loginPerson.png" alt="img" />
<input type="text" placeholder="13737241011" />
</div>
<div class="header-item">
<img src="../../image/loginLock.png" alt="img" />
<input type="password" placeholder="修改密码" />
</div>
</div>
<div class="login-footer" onclick="api.closeFrame();">退出登录</div>
</section>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function() {};
</script>
</html> 
相关推荐
jyj0 0喜欢 / 0评论 2020-10-27
fanfanxiaozu 0喜欢 / 0评论 2020-08-18
阿狸写代码 0喜欢 / 0评论 2020-06-16
朱建伟 0喜欢 / 0评论 2020-06-11
bapinggaitianli 0喜欢 / 0评论 2020-05-16
bapinggaitianli 0喜欢 / 0评论 2020-04-17
xubzhlin 0喜欢 / 0评论 2020-03-20
beibeijia 0喜欢 / 0评论 2020-02-16
playis 0喜欢 / 0评论 2020-02-12
bapinggaitianli 0喜欢 / 0评论 2019-12-27
傻欣妹陀 0喜欢 / 0评论 2019-11-17
needh 0喜欢 / 0评论 2019-11-17
xubzhlin 0喜欢 / 0评论 2019-11-13
playis 0喜欢 / 0评论 2019-11-01
heqiang0 0喜欢 / 0评论 2019-10-30
cloudwiseAPM 0喜欢 / 0评论 2017-11-29
我的iOS王者之路 0喜欢 / 0评论 2019-09-05
chijianxingfeng 0喜欢 / 0评论 2019-06-03
傻欣妹陀 0喜欢 / 0评论 2019-07-01
mislyvinky 0喜欢 / 0评论 2019-06-29
LadyFork 0喜欢 / 0评论 2019-06-29
zfeifei 0喜欢 / 0评论 2019-06-28
分享经验共同进步 0喜欢 / 0评论 2019-06-28
mislyvinky 0喜欢 / 0评论 2019-06-28
mislyvinky 0喜欢 / 0评论 2019-06-28
hengqiaqia 0喜欢 / 0评论 2019-06-27
那年夏天 0喜欢 / 0评论 2019-06-21
ForEachkaka 0喜欢 / 0评论 2019-06-21
mislyvinky 0喜欢 / 0评论 2019-06-21
小狼驿站 0喜欢 / 0评论 2018-03-24
kkcode 0喜欢 / 0评论 2018-03-24
QiHY 0喜欢 / 0评论 2018-01-10
流媒体开发先行者 0喜欢 / 0评论 2017-12-29
zchang 0喜欢 / 0评论 2017-12-27
小狼驿站 0喜欢 / 0评论 2017-09-13
sayu 0喜欢 / 0评论 2014-12-16
DDghost 0喜欢 / 0评论 2019-05-23
移动微技 0喜欢 / 0评论 2017-06-27
阿狸写代码 0喜欢 / 0评论 2015-09-24
虹墨空间站 0喜欢 / 0评论 2014-09-13
xiliangxiaoke 0喜欢 / 0评论 2018-01-05
APICloud 0喜欢 / 0评论 2017-12-21
Pinapps 0喜欢 / 0评论 2018-03-05
Pinapps 0喜欢 / 0评论 2018-01-29
友心人 0喜欢 / 0评论 2017-11-30
网络游戏 0喜欢 / 0评论 2017-04-22
软件设计 0喜欢 / 0评论 2017-04-20