APICloud成长记录 二 页面框架搭建
2016-08-25 09:36
246 查看
<!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"/>
<title>main</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
html,body{
height:100%;
}
body{
display:-webkit-box;
display:-webkit-flex;
-webkit-box-orient : vertical;/*纵向布局*/
-webkit-flex-flow : column;
flex-flow : column;
}
.header{
width:100%;
height :50px;//让其高度占满50像素，
background-color:#3DEE11;
}
.place-holder{/*中间给其占满空间，使用盒子弹性布局*/
width:100%;
-webkit-box-flex: 1;
-webkit-flex:1;
flex:1;
background-color:#3352CC;
}
/*给页脚盒子布局*/
.footer{
display:-webkit-box;
display:-webkit-flex;
-webkit-box-orient : horizontal;/*横向布局*/
-webkit-flex-flow : row;
flex-flow : row;
width:100%;
height :60px;
background-color:red;
}
.footer .menu{
box-sizing:border-box;
padding-top:42px;
padding-bottom:5px;
-webkit-box-flex: 1;
-webkit-flex:1;
flex:1;
height:60px;
text-align:center;
font-size:13px;
background-size:30px 30px;
background-position:center 6px;
background-repeat:no-repeat;
}
//此是实现footer底部图标切换
.footer .home{
background-image :url(../image/footer/home.png);
}
.footer .home.active{
background-image :url(../image/footer/home_act.png);
}
.footer .groupbuy{
background-image :url(../image/footer/groupbuy.png);
}
.footer .groupbuy.active{
background-image :url(../image/footer/groupbuy_act.png);
}
.footer .find{
background-image :url(../image/footer/find.png);
}
.footer .find.active{
background-image :url(../image/footer/find_act.png);
}
.footer .my{
background-image :url(../image/footer/my.png);
}
.footer .my.active{
background-image :url(../image/footer/my_act.png);
}
.header{//头部使用盒子布局
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow:row;
flex-flow:row;
}
/* .header .left{
width:90px;
height:60px;
background-color:#fa0;
}
.header .center{
-webkit-box-flex: 1;
-webkit-flex:1;
flex:1;
height:50px;
background-color:#0fa;
}
.header .center .search-bar{
margin-top:7px;
width:100%;
height:36px;
background-color:#fa6604;
background-clip:padding-box;
border-radius: 18px;
}
.header .right{
width:60px;
height:50px;
background-color:#a0f;
}*/
</style>
</head>
<body>
<header id="header" class="header">
<!--<div class="left"></div>
<div class="center">
<div class="search-bar"></div>
</div>
<div class="right"></div>-->
</header>
<div class="place-holder"></div>
<footer id="footer" class="footer">
<div class="menu home active" onclick="showContent(0)">首页</div>
<div class="menu groupbuy" onclick="showContent(1)">团购</div>
<div class="menu find" onclick="showContent(2)">发现</div>
<div class="menu my" onclick="showContent(3)">我的</div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
init();
showContent(0);
};
var menus,headerHeight,footerHeight;
function init(){//布局基本设置
var header = $api.byId('header');
footer = $api.byId('footer');
$api.fixIos7Bar(header);
headerHeight = $api.offset(header).h;//页眉高度
footerHeight = $api.offset(footer).h;//页脚高度
menus = $api.domAll(footer, '.menu');
}
var frameNames = ['home_frame','groupbuy_frame','find_frame','my_frame'];
//点击团购
function showContent(index){
for(var i = 0;i<menus.length;i++){
if(index == i ){//当index等于i时将元素添加上去
$api.addCls(menus[i], 'active');
var y = 3 ==i?0 : headerHeight; //针对我的页面置顶需求,进行判断
//通过数组来循环操作
api.openFrame({
name: 'content_frame_'+ i,
url: 'content_frame.html',
rect: {
x:0,
y:y,
w:api.winWidth,
h:api.winHeight - y - footerHeight
},
pageParam:{ //可以带参数过去
name: frameNames[i],
}
});
}else{
$api.removeCls(menus[i], 'active');//当点击其他按钮时，需要将其rm
今天根据官方的文档写了一个页面的原型布局,一来是为了自己以后更好的查看,二来希望与更多的朋友一起交流学习，废话不多说,直接上代码吧，
content_frame.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"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
body{
}
</style>
</head>
<body>
<div id="name"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
$api.byId('name').innerHTML = JSON.stringify(api.pageParam);
};
</script>
</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"/>
<title>main</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
html,body{
height:100%;
}
body{
display:-webkit-box;
display:-webkit-flex;
-webkit-box-orient : vertical;/*纵向布局*/
-webkit-flex-flow : column;
flex-flow : column;
}
.header{
width:100%;
height :50px;//让其高度占满50像素，
background-color:#3DEE11;
}
.place-holder{/*中间给其占满空间，使用盒子弹性布局*/
width:100%;
-webkit-box-flex: 1;
-webkit-flex:1;
flex:1;
background-color:#3352CC;
}
/*给页脚盒子布局*/
.footer{
display:-webkit-box;
display:-webkit-flex;
-webkit-box-orient : horizontal;/*横向布局*/
-webkit-flex-flow : row;
flex-flow : row;
width:100%;
height :60px;
background-color:red;
}
.footer .menu{
box-sizing:border-box;
padding-top:42px;
padding-bottom:5px;
-webkit-box-flex: 1;
-webkit-flex:1;
flex:1;
height:60px;
text-align:center;
font-size:13px;
background-size:30px 30px;
background-position:center 6px;
background-repeat:no-repeat;
}
//此是实现footer底部图标切换
.footer .home{
background-image :url(../image/footer/home.png);
}
.footer .home.active{
background-image :url(../image/footer/home_act.png);
}
.footer .groupbuy{
background-image :url(../image/footer/groupbuy.png);
}
.footer .groupbuy.active{
background-image :url(../image/footer/groupbuy_act.png);
}
.footer .find{
background-image :url(../image/footer/find.png);
}
.footer .find.active{
background-image :url(../image/footer/find_act.png);
}
.footer .my{
background-image :url(../image/footer/my.png);
}
.footer .my.active{
background-image :url(../image/footer/my_act.png);
}
.header{//头部使用盒子布局
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-orient: horizontal;
-webkit-flex-flow:row;
flex-flow:row;
}
/* .header .left{
width:90px;
height:60px;
background-color:#fa0;
}
.header .center{
-webkit-box-flex: 1;
-webkit-flex:1;
flex:1;
height:50px;
background-color:#0fa;
}
.header .center .search-bar{
margin-top:7px;
width:100%;
height:36px;
background-color:#fa6604;
background-clip:padding-box;
border-radius: 18px;
}
.header .right{
width:60px;
height:50px;
background-color:#a0f;
}*/
</style>
</head>
<body>
<header id="header" class="header">
<!--<div class="left"></div>
<div class="center">
<div class="search-bar"></div>
</div>
<div class="right"></div>-->
</header>
<div class="place-holder"></div>
<footer id="footer" class="footer">
<div class="menu home active" onclick="showContent(0)">首页</div>
<div class="menu groupbuy" onclick="showContent(1)">团购</div>
<div class="menu find" onclick="showContent(2)">发现</div>
<div class="menu my" onclick="showContent(3)">我的</div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
init();
showContent(0);
};
var menus,headerHeight,footerHeight;
function init(){//布局基本设置
var header = $api.byId('header');
footer = $api.byId('footer');
$api.fixIos7Bar(header);
headerHeight = $api.offset(header).h;//页眉高度
footerHeight = $api.offset(footer).h;//页脚高度
menus = $api.domAll(footer, '.menu');
}
var frameNames = ['home_frame','groupbuy_frame','find_frame','my_frame'];
//点击团购
function showContent(index){
for(var i = 0;i<menus.length;i++){
if(index == i ){//当index等于i时将元素添加上去
$api.addCls(menus[i], 'active');
var y = 3 ==i?0 : headerHeight; //针对我的页面置顶需求,进行判断
//通过数组来循环操作
api.openFrame({
name: 'content_frame_'+ i,
url: 'content_frame.html',
rect: {
x:0,
y:y,
w:api.winWidth,
h:api.winHeight - y - footerHeight
},
pageParam:{ //可以带参数过去
name: frameNames[i],
}
});
}else{
$api.removeCls(menus[i], 'active');//当点击其他按钮时，需要将其rm
api.setFrameAttr({
name: 'content_frame_' + i,//隐藏背景色
hidden :true
});
}
}
};
</script>
</html>今天根据官方的文档写了一个页面的原型布局,一来是为了自己以后更好的查看,二来希望与更多的朋友一起交流学习，废话不多说,直接上代码吧，
content_frame.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"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
body{
}
</style>
</head>
<body>
<div id="name"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
$api.byId('name').innerHTML = JSON.stringify(api.pageParam);
};
</script>
</html>
今天的内容就这些了，希望对大家能用的上！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- APICloud成长记录 二 页面框架搭建调整
- ASP.NET学习笔记五 用站点导航控件与母版页搭建页面框架
- ASP.NET学习笔记2----用站点导航控件与母版页搭建页面框架
- 【分析总结框架记录】开发环境搭建4
- 主页面布局框架搭建
- 记录-项目java项目框架搭建的一些问题（maven+spring+springmvc+mybatis）
- 简单的搭建Web系统常用的框架页面
- 搭建SpringMvc框架中遇到的问题记录
- 【分析总结框架记录】开发环境搭建2
- 【分析总结框架记录】开发环境搭建1
- MAC中在eclipse luna上搭建移动平台自己主动化測试框架(UIAutomator/Appium/Robotium/MonkeyRunner)关键点记录
- 新浪微博Android客户端学习记录二：系统主框架搭建
- [开源项目-MyBean轻量级配置框架] 使用MyBean快速搭建分模块的应用程序(主页面的TAB)(DLL-MDI)
- qooxdoo框架环境搭建+登录页面
- 【分析总结框架记录】开发环境搭建3
- 用站点导航控件与母板页搭建页面框架
- 新浪微博Android客户端学习记录二：系统主框架搭建
- AngularJs 入门系列-1 使用 AngularJs 搭建页面基本框架
- 【web学习记录】项目框架搭建二（加入需要的jar包）
- 个人项目框架搭建 -- Autofac简单使用记录