2.8.1 修改之前password_body.html页面的代码
html/user/password_body.html
<button tapmode="" onclick="OpenWin('add_friends_head','./add_friends_head.html')" class="H-button H-margin-vertical-top-20 H-width-100-percent H-font-size-15 H-outline-none H-padding-vertical-both-8 H-padding-horizontal-both-20 H-theme-font-color-white">
完成
</button>
2.8.2 添加好友的win页面
html/user/add_friends_head.html
<!DOCTYPE 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>app开发笔记</title>
<link rel="stylesheet" type="text/css" href="../../css/Hui.css"/>
<link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
<style type="text/css">
#search_box {
background: #fafafa;padding:6px
}
#search_input {
height: 30px;
background: #ffffff;
border: 1px solid #f4f4f4;
border-radius: 5px
}
#search_input:active{
background: #fdfdfd;
}
#search_input span{
color: #d8d8d8
}
#search_input span:active{
color: #e6e6e6;
}
button {
background: #d8d8d8;
border: 1px solid #d8d8d8;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
.btn-after {
background: #4a90e2;
border-color: #4a90e2;
}
.btn-after:active {
background: #dbe9f9;
border-color: #dbe9f9;
}
.tab-active {
position: relative;
overflow: hidden;
}
.tab-active:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform-origin: 0 0;
transform: scale(1);
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
margin: 24px 14px;
border-bottom: 2px solid #e7511a;
}
</style>
</head>
<body class="H-flexbox-vertical">
<header class="H-header H-padding-vertical-top-25" id="header" style="background-color: #fafafa">
<span onclick="CloseToWin('root')" tapmode=""
class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-padding-horizontal-left-5 H-z-index-100">
<i class="iconfont icon-arrow-left H-font-size-20 H-vertical-middle"></i>
</span>
<div class="H-header-title H-center-all H-font-size-14 H-text-show-row-1 H-position-absolute H-width-100-percent"
style="color: #4a4a4a">添加好友
</div>
</header>
<div class="H-flex-item">
<div tapmode="" onclick="OpenWin('search_friends_head','./search_friends_head.html')" id="search_box">
<div id="search_input" class="H-vertical-middle">
<span class="H-width-100-percent H-text-align-center H-display-block H-font-size-14">
<i class="iconfont icon-search"></i>
搜索昵称/手机号
</span>
</div>
</div>
<div id="tab" class="H-flexbox-horizontal H-theme-background-color-white">
<div class="H-flex-item H-center-all H-padding-vertical-both-10 H-theme-border-color-white H-font-size-14 H-theme-font-color-black"
style="">
<span class="tab-active">推荐好友</span>
</div>
<div class="H-flex-item H-center-all H-padding-vertical-both-10 H-theme-border-color-white H-font-size-14">
<span>微信好友</span>
</div>
</div>
</div>
<footer id="footer" class="H-padding-horizontal-both-25 H-padding-vertical-both-15">
<div class="H-font-size-14 H-text-align-center H-padding-vertical-bottom-10" style="color:#4a90e2;">换一批看看</div>
<button class="H-button H-width-100-percent H-font-size-15 H-outline-none H-padding-vertical-both-8 H-padding-horizontal-both-20 H-theme-font-color-white H-border-radius-5">
一键关注
</button>
</footer>
<script src="../../script/api.js" type="text/javascript"></script>
<script src="../../script/common.js" type="text/javascript"></script>
<script type="text/javascript">
apiready = function () {
api.openFrame({
name: 'add_friends_body',
url: './add_friends_body.html',
rect: {
x: 0,
y: $api.byId('header').offsetHeight + $api.byId('search_box').offsetHeight + $api.byId('tab').offsetHeight,
w: api.winWidth,
h: api.frameHeight - $api.byId('header').offsetHeight - $api.byId('search_box').offsetHeight - $api.byId('tab').offsetHeight - $api.byId('footer').offsetHeight
}
});
};
</script>
</body>
</html>
2.8.3 添加好友的frame页面
html/user/add_friends_body.html
<!DOCTYPE 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>app开发笔记</title>
<link rel="stylesheet" type="text/css" href="../../css/Hui.css"/>
<link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css"/>
<style type="text/css">
.friend_list{
padding: 0 30px;height: 100%
}
.friend_box {
height: 33.33%;
width: 33.33%;
text-align: center;
float: left
}
.friend_select {
height: 20px;
width: 20px;
bottom: 2px;
right: 2px;
}
.friend_select_bg {
background: #e7511a;
}
.friend_select_bg:active {
background: rgba(0, 0, 0, 0);
}
.friend_select_bg .icon-select{
color: #ffffff;
}
.friend_select_bg .icon-select:active {
color: rgba(0, 0, 0, 0);
}
.friend_noselect_bg {
background: #cccccc;
}
.friend_noselect_bg:active{
background: rgba(0, 0, 0, 0);
}
.friend_noselect_bg .icon-select{
color: #ffffff;
}
.friend_noselect_bg .icon-select:active {
color: rgba(0, 0, 0, 0);
}
</style>
</head>
<body class="H-width-100-percent H-height-100-percent">
<div class="friend_list">
<div class="H-flex-item H-vertical-middle friend_box">
<div class="H-line-height-0" style="min-width: 100%">
<div class="picture H-position-relative H-margin-horizontal-auto" style="width: 64px; height: 64px;">
<span tapmode="" onclick="SelectFriend(this)" selected="1"
class="friend_select friend_select_bg H-icon H-display-block H-position-absolute H-center-all H-border-radius-circle H-z-index-1000 H-line-height-0"
style="">
<i class="iconfont icon-select H-font-size-12 H-vertical-align-middle"></i>
</span>
<img src="../../image/defult/head-img.png" class="H-display-block H-border-radius-circle" alt=""
title="" style="width: 64px; height: 64px;">
</div>
<div class="H-font-size-14 H-padding-vertical-both-2" style="line-height: 1.4rem">名字名字</div>
<div class="H-font-size-10 H-theme-font-color-ccc H-padding-vertical-both-2" style="line-height: 1rem">粉丝 654</div>
</div>
</div>
<div class="H-flex-item H-vertical-middle friend_box">
<div class="H-line-height-0" style="min-width: 100%">
<div class="picture H-position-relative H-margin-horizontal-auto" style="width: 64px; height: 64px;">
<span tapmode="" onclick="SelectFriend(this)" selected="1"
class="friend_select friend_select_bg H-icon H-display-block H-position-absolute H-center-all H-border-radius-circle H-z-index-1000 H-line-height-0"
style="">
<i class="iconfont icon-select H-font-size-12 H-vertical-align-middle"></i>
</span>
<img src="../../image/defult/head-img.png" class="H-display-block H-border-radius-circle" alt=""
title="" style="width: 64px; height: 64px;">
</div>
<div class="H-font-size-14 H-padding-vertical-both-2" style="line-height: 1.4rem">名字名字</div>
<div class="H-font-size-10 H-theme-font-color-ccc H-padding-vertical-both-2" style="line-height: 1rem">粉丝 654</div>
</div>
</div>
<div class="H-flex-item H-vertical-middle friend_box">
<div class="H-line-height-0" style="min-width: 100%">
<div class="picture H-position-relative H-margin-horizontal-auto" style="width: 64px; height: 64px;">
<span tapmode="" onclick="SelectFriend(this)" selected="1"
class="friend_select friend_select_bg H-icon H-display-block H-position-absolute H-center-all H-border-radius-circle H-z-index-1000 H-line-height-0"
style="">
<i class="iconfont icon-select H-font-size-12 H-vertical-align-middle"></i>
</span>
<img src="../../image/defult/head-img.png" class="H-display-block H-border-radius-circle" alt=""
title="" style="width: 64px; height: 64px;">
</div>
<div class="H-font-size-14 H-padding-vertical-both-2" style="line-height: 1.4rem">名字名字</div>
<div class="H-font-size-10 H-theme-font-color-ccc H-padding-vertical-both-2" style="line-height: 1rem">粉丝 654</div>
</div>
</div>
<div class="H-flex-item H-vertical-middle friend_box">
<div class="H-line-height-0" style="min-width: 100%">
<div class="picture H-position-relative H-margin-horizontal-auto" style="width: 64px; height: 64px;">
<span tapmode="" onclick="SelectFriend(this)" selected="1"
class="friend_select friend_select_bg H-icon H-display-block H-position-absolute H-center-all H-border-radius-circle H-z-index-1000 H-line-height-0"
style="">
<i class="iconfont icon-select H-font-size-12 H-vertical-align-middle"></i>
</span>
<img src="../../image/defult/head-img.png" class="H-display-block H-border-radius-circle" alt=""
title="" style="width: 64px; height: 64px;">
</div>
<div class="H-font-size-14 H-padding-vertical-both-2" style="line-height: 1.4rem">名字名字</div>
<div class="H-font-size-10 H-theme-font-color-ccc H-padding-vertical-both-2" style="line-height: 1rem">粉丝 654</div>
</div>
</div>
<div class="H-flex-item H-vertical-middle friend_box">
<div class="H-line-height-0" style="min-width: 100%">
<div class="picture H-position-relative H-margin-horizontal-auto" style="width: 64px; height: 64px;">
<span tapmode="" onclick="SelectFriend(this)" selected="1"
class="friend_select friend_select_bg H-icon H-display-block H-position-absolute H-center-all H-border-radius-circle H-z-index-1000 H-line-height-0"
style="">
<i class="iconfont icon-select H-font-size-12 H-vertical-align-middle"></i>
</span>
<img src="../../image/defult/head-img.png" class="H-display-block H-border-radius-circle" alt=""
title="" style="width: 64px; height: 64px;">
</div>
<div class="H-font-size-14 H-padding-vertical-both-2" style="line-height: 1.4rem">名字名字</div>
<div class="H-font-size-10 H-theme-font-color-ccc H-padding-vertical-both-2" style="line-height: 1rem">粉丝 654</div>
</div>
</div><div class="H-flex-item H-vertical-middle friend_box">
<div class="H-line-height-0" style="min-width: 100%">
<div class="picture H-position-relative H-margin-horizontal-auto" style="width: 64px; height: 64px;">
<span tapmode="" onclick="SelectFriend(this)" selected="1"
class="friend_select friend_select_bg H-icon H-display-block H-position-absolute H-center-all H-border-radius-circle H-z-index-1000 H-line-height-0"
style="">
<i class="iconfont icon-select H-font-size-12 H-vertical-align-middle"></i>
</span>
<img src="../../image/defult/head-img.png" class="H-display-block H-border-radius-circle" alt=""
title="" style="width: 64px; height: 64px;">
</div>
<div class="H-font-size-14 H-padding-vertical-both-2" style="line-height: 1.4rem">名字名字</div>
<div class="H-font-size-10 H-theme-font-color-ccc H-padding-vertical-both-2" style="line-height: 1rem">粉丝 654</div>
</div>
</div><div class="H-flex-item H-vertical-middle friend_box">
<div class="H-line-height-0" style="min-width: 100%">
<div class="picture H-position-relative H-margin-horizontal-auto" style="width: 64px; height: 64px;">
<span tapmode="" onclick="SelectFriend(this)" selected="1"
class="friend_select friend_select_bg H-icon H-display-block H-position-absolute H-center-all H-border-radius-circle H-z-index-1000 H-line-height-0"
style="">
<i class="iconfont icon-select H-font-size-12 H-vertical-align-middle"></i>
</span>
<img src="../../image/defult/head-img.png" class="H-display-block H-border-radius-circle" alt=""
title="" style="width: 64px; height: 64px;">
</div>
<div class="H-font-size-14 H-padding-vertical-both-2" style="line-height: 1.4rem">名字名字</div>
<div class="H-font-size-10 H-theme-font-color-ccc H-padding-vertical-both-2" style="line-height: 1rem">粉丝 654</div>
</div>
</div>
<div class="H-flex-item H-vertical-middle friend_box">
<div class="H-line-height-0" style="min-width: 100%">
<div class="picture H-position-relative H-margin-horizontal-auto" style="width: 64px; height: 64px;">
<span tapmode="" onclick="SelectFriend(this)" selected="1"
class="friend_select friend_select_bg H-icon H-display-block H-position-absolute H-center-all H-border-radius-circle H-z-index-1000 H-line-height-0"
style="">
<i class="iconfont icon-select H-font-size-12 H-vertical-align-middle"></i>
</span>
<img src="../../image/defult/head-img.png" class="H-display-block H-border-radius-circle" alt=""
title="" style="width: 64px; height: 64px;">
</div>
<div class="H-font-size-14 H-padding-vertical-both-2" style="line-height: 1.4rem">名字名字</div>
<div class="H-font-size-10 H-theme-font-color-ccc H-padding-vertical-both-2" style="line-height: 1rem">粉丝 654</div>
</div>
</div>
<div class="H-flex-item H-vertical-middle friend_box">
<div class="H-line-height-0" style="min-width: 100%">
<div class="picture H-position-relative H-margin-horizontal-auto" style="width: 64px; height: 64px;">
<span tapmode="" onclick="SelectFriend(this)" selected="1"
class="friend_select friend_select_bg H-icon H-display-block H-position-absolute H-center-all H-border-radius-circle H-z-index-1000 H-line-height-0"
style="">
<i class="iconfont icon-select H-font-size-12 H-vertical-align-middle"></i>
</span>
<img src="../../image/defult/head-img.png" class="H-display-block H-border-radius-circle" alt=""
title="" style="width: 64px; height: 64px;">
</div>
<div class="H-font-size-14 H-padding-vertical-both-2" style="line-height: 1.4rem">名字名字</div>
<div class="H-font-size-10 H-theme-font-color-ccc H-padding-vertical-both-2" style="line-height: 1rem">粉丝 654</div>
</div>
</div>
</div>
<script src="../../script/api.js" type="text/javascript"></script>
<script src="../../script/common.js" type="text/javascript"></script>
<script type="text/javascript">
function SelectFriend(obj) {
if($api.attr(obj,'selected')=="1"){
$api.removeCls(obj,'friend_select_bg')
$api.addCls(obj,'friend_noselect_bg')
$api.attr(obj,'selected','0')
}else{
$api.addCls(obj,'friend_select_bg')
$api.removeCls(obj,'friend_noselect_bg')
$api.attr(obj,'selected','1')
}
}
</script>
</body>
</html>
效果图
