ApiCloud利用NVTabBar模块快速搭建起APP的框架
废话不说，直接上代码
模块地址：https://docs.apicloud.com/Client-API/Nav-Menu/NVTabBar
代码实例：
<!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">
<link rel="stylesheet" type="text/css" href="./css/aui.css" />
</head>
<body>
<header class="aui-bar aui-bar-nav" id="aui-header">
<a class="aui-btn aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> </a>
<div class="aui-title" id="header"></div>
</header>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function() {
api.parseTapmode();
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var body_h = $api.offset($api.dom('body')).h;
var NVTabBar = api.require('NVTabBar');
NVTabBar.open({
styles : {
bg : 'rgba(200,200,200,1)',
h : 54,
dividingLine : {
width : 0,
color : '#000'
},
badge : {
bgColor : '#f00',
numColor : '#000',
size : 6.0,
centerY : 2
}
},
items : [{
w : api.winWidth / 5.0,
iconRect : {
w : 25.0,
h : 25.0,
},
icon : {
normal : 'widget://image/nvtabbar/acti.png',
highlight : 'widget://image/nvtabbar/actied.png',
selected : 'widget://image/nvtabbar/actied.png'
},
title : {
text : '动态',
size : 12.0,
normal : '#696969',
selected : '#eb4f38',
marginB : 6.0
}
}, {
w : api.winWidth / 5.0,
iconRect : {
w : 25.0,
h : 25.0,
},
icon : {
normal : 'widget://image/nvtabbar/guan.png',
highlight : 'widget://image/nvtabbar/guaned.png',
selected : 'widget://image/nvtabbar/guaned.png'
},
title : {
text : '发现',
size : 12.0,
normal : '#696969',
selected : '#eb4f38',
marginB : 6.0
}
}, {
w : api.winWidth / 5.0,
bg : {
marginB : 0,
image : 'rgba(200,200,200,0)'
},
iconRect : {
w : 50,
h : 50,
},
icon : {
normal : 'widget://image/nvtabbar/yyuan.png',
highlight : 'widget://image/nvtabbar/mai.png',
selected : 'widget://image/nvtabbar/mai.png'
}
}, {
w : api.winWidth / 5.0,
iconRect : {
w : 25.0,
h : 25.0,
},
icon : {
normal : 'widget://image/nvtabbar/bir.png',
highlight : 'widget://image/nvtabbar/bired.png',
selected : 'widget://image/nvtabbar/bired.png'
},
title : {
text : '消息',
size : 12.0,
normal : '#696969',
selected : '#eb4f38',
marginB : 6.0
}
}, {
w : api.winWidth / 5.0,
iconRect : {
w : 25.0,
h : 25.0,
},
icon : {
normal : 'widget://image/nvtabbar/fav.png',
highlight : 'widget://image/nvtabbar/faved.png',
selected : 'widget://image/nvtabbar/faved.png'
},
title : {
text : '我的',
size : 12.0,
normal : '#696969',
selected : '#eb4f38',
marginB : 6.0
}
}],
selectedIndex : 0
}, function(ret, err) {
//alert(JSON.stringify(ret))
if (ret) {
if (ret.eventType == "show") {
$api.html(header, '动态');
api.openFrame({
name : 'frame0',
url : './html/frame0.html',
rect : {
x : 0,
y : headerPos.h,
w : 'auto',
h : api.winHeight - headerPos.h - 54
}
})
}
if (ret.eventType == "click" && ret.index == 0) {
$api.html(header, '动态');
api.openFrame({
name : 'frame0',
url : './html/frame0.html',
rect : {
x : 0,
y : headerPos.h,
w : 'auto',
h : api.winHeight - headerPos.h - 54
}
})
}
if (ret.eventType == "click" && ret.index == 1) {
$api.html(header, '发现');
api.openFrame({
name : 'frame1',
url : './html/frame1.html',
rect : {
x : 0,
y : headerPos.h,
w : 'auto',
h : api.winHeight - headerPos.h - 54
}
})
}
if (ret.eventType == "click" && ret.index == 2) {
$api.html(header, '圈子');
api.openFrame({
name : 'frame2',
url : './html/frame2.html',
rect : {
x : 0,
y : headerPos.h,
w : 'auto',
h : api.winHeight - headerPos.h - 54
}
})
}
if (ret.eventType == "click" && ret.index == 3) {
$api.html(header, '消息');
api.openFrame({
name : 'frame3',
url : './html/frame3.html',
rect : {
x : 0,
y : headerPos.h,
w : 'auto',
h : api.winHeight - headerPos.h - 54
}
})
}
if (ret.eventType == "click" && ret.index == 4) {
$api.html(header, '我的');
api.openFrame({
name : 'frame4',
url : './html/frame4.html',
rect : {
x : 0,
y : headerPos.h,
w : 'auto',
h : api.winHeight - headerPos.h - 54
}
})
}
var NVTabBar = api.require('NVTabBar');
NVTabBar.bringToFront();
}
});
};
</script>
</html>
效果图：
ApiCloud利用NVTabBar模块快速搭建起APP的框架的更多相关文章
- [ios][opengles]GLKit如何搭一个app的框架
一个外文对GLKit的讲解: Beginning OpenGL ES 2.0 with GLKit Part 1 英文原文链接:http://www.raywenderlich.com/5223 ...
- 利用MVVM设计快速开发个人中心、设置等模块
我们在做iOS开发过程中,静态页面的开发比开发动态页面更让我们开发者抓狂.因为动态页面通常是一个页面一种cell样式,作为开发者只需要专注于定制好一种样式之后,就可以使用数据填充出较好的界面.而静态c ...
- Web API应用架构在Winform混合框架中的应用（4）--利用代码生成工具快速开发整套应用
前面几篇介绍了Web API的基础信息,以及如何基于混合框架的方式在WInform界面里面整合了Web API的接入方式,虽然我们看似调用过程比较复杂,但是基于整个框架的支持和考虑,我们提供了代码生成 ...
- 利用iisnode模块，让你的Node.js应用跑在Windows系统IIS中
最近比较喜欢用Node.js做一些简单的应用,一直想要部署到生产环境中,但是手上只有一台windows server 2008服务器,并且已经开启了IIS服务,运行了很多.Net开发的网站,80端口已 ...
- 【APICloud】APICloud基础学习与快速入门
前言:回顾这几天学习情况,总的来说APICloud官网它的学习资料和社区还是足够了,但是我必须吐槽一句,实在是过于混乱了,视频资料文档资料它一股脑地都堆在了那里,这几天基本处于在各个地方跳转,然后现在 ...
- nginx利用geo模块做限速白名单以及geo实现全局负载均衡的操作记录
geo指令使用ngx_http_geo_module模块提供的.默认情况下,nginx有加载这个模块,除非人为的 --without-http_geo_module.ngx_http_geo_modu ...
- Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面
Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面 关于欢迎界面 很多App第一次启动都会有一个欢迎界面,欢迎界面往往决定这用户对App的第一映像,所以欢 ...
- nginx利用limit模块设置IP并发防CC攻击
nginx利用limit模块设置IP并发防CC攻击 分类: 系统2013-01-21 09:02 759人阅读 评论(0) 收藏 举报 来源:http://blog.xencdn.net/nginx- ...
- 后端Nodejs利用node-xlsx模块读取excel
后端Nodejs(利用node-xlsx模块) /** * Created by zh on 16-9-14. */ var xlsx = require("node-xlsx") ...
随机推荐
- Office处理
1.NPOI:一个开源项目,不需要安装Microsoft Office,支持对Office 97-2003,2007文件格式,功能比较强大. http://npoi.codeplex.com/ 2.a ...
- JS 一些问题与解决方法
一.post/get传输json数据中包含特殊字符 在使用HTTP请求传输数据时,因为他本身也需要一些字符做标记,比如= &,所以传输的数据中如果有特殊字符,就会被错误的理解成标记字符做了一些 ...
- mysql 列转行处理
CREATE TABLE `table1` ( `id` ) DEFAULT NULL, `name` ) CHARACTER SET utf8 DEFAULT NULL ) ENGINE=MyISA ...
- 转帖 IBM要推POWER9，来了解一下POWER处理器的前世今生
https://blog.csdn.net/kwame211/article/details/76669555 先来说一下最新的POWER 9 在Hot Chips会议上首次提到的IBM Power ...
- CORS跨域资源共享简述
什么是CORS? 默认情况下,为预防某些而已行为,浏览器的XHR对象只能访问来源于同一个域中的资源.但是我们在日常实际开发中,常常会遇到跨域请求的需求,因此就出现了一种跨域请求的方案:CORS(Cro ...
- Angular中ui-grid的使用详解
Angular中ui-grid的使用 在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验.最近,项目中用到的表格特别多,而且表格的列数和行数也超多.为了让用户浏览更爽,产品经理提出,当表格 ...
- MT【176】两两乘积
求$1,2\cdots,n$两两乘积的平均值____ 解答:$\dfrac{1}{C_n^2}\sum\limits_{1\le i<j\le n}{ij}=\dfrac{1}{n(n-1)}( ...
- suoi14 子树查找 (dfs)
把询问记下来,然后开个桶差分 #include<bits/stdc++.h> #define pa pair<int,int> #define lowb(x) ((x)& ...
- Hello,Power BI
Power BI 是什么 Power BI 是一套业务分析工具,用于分析数据和理解数据,快速便捷地监控数据变化,为商务决策提供依据. Power BI 有用户组的概念.分享权限等概念 Power BI ...
- 【codevs1297】硬币 完全背包
题目大意:给定 N 种不同种类的硬币,每种硬币的重量范围在一个可变区间内,但是价值恒定,求给定一个重量 W,求有多少种面值不同的组合方式. 题解:如果硬币的重量恒定,那么就是一道裸的完全背包问题.因此 ...