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") ...
随机推荐
- Smart Disk -- proposed by Liyuan Liu
Need 如今,照相渐渐得成为了人们的日常举动.几乎所有的人都在随时随地得照相.手机,相机,平板越来越多的设备对照相进行了支持,同时, 照片以一种前所未有的速度渐渐淹没我们的文件夹.而寻找照片,对照片 ...
- Beta阶段冲刺-6
一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 4. 工作中遇到的困难 杨晨露:各种问题,虽然都是开发上面的问题,但是都提出来就有点头大了. 戴志斌:对小程序公众号的开发不了解,因 ...
- （第三周）c#程序理解
阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长时间才能输出第一个结果?时间 ...
- 清华大学OS操作系统实验lab1练习知识点汇总
lab1知识点汇总 还是有很多问题,但是我觉得我需要在查看更多资料后回来再理解,学这个也学了一周了,看了大量的资料...还是它们自己的80386手册和lab的指导手册觉得最准确,现在我就把这部分知识做 ...
- (转)linux 内存管理——内核的shmall 和shmmax 参数
内核的 shmall 和 shmmax 参数 SHMMAX= 配置了最大的内存segment的大小 ------>这个设置的比SGA_MAX_SIZE大比较好. SHMMIN= 最小的内存seg ...
- mac 关闭显示器 & 快捷键
mac 关闭显示器 & 快捷键 https://support.apple.com/zh-cn/HT201236 https://support.apple.com/zh-cn/HT20705 ...
- 学习Spring Boot：（十六）使用Shiro与JWT 实现认证服务
前言 需要把Web应用做成无状态的,即服务器端无状态,就是说服务器端不会存储像会话这种东西,而是每次请求时access_token进行资源访问.这里我们将使用 JWT 1,基于散列的消息认证码,使用一 ...
- 【Vijos1404】遭遇战（最短路）
[Vijos1404]遭遇战(最短路) 题面 Vijos 题解 显然可以树状数组之类的东西维护一下\(dp\).这里考虑一种最短路的做法. 首先对于一个区间\([l,r]\),显然可以连边\((l,r ...
- CentOS服务器配置SSH免密码登录
由于工作需要,经常要登录到多台服务器远程操作,每次都是ssh user@host:port 再输入密码,时间长了,难免觉得乏味-- 故而从度娘那里扒来了一些让SSH免密码登录的办法,其实这也是使用Gi ...
- 使用 docker 创建自己的镜像
docker run 命令 镜像(image):An image is a filesystem and parameters to use at runtime. It doesn't have s ...