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") ...
随机推荐
- 为什么java的main方法必须是静态的
今天看类型信息时发现一个问题,不能再main方法中打印this关键字的信息,这时想起了之前的知识,不能再静态方法中调用this.理由很简单,this表示“这个对象”,也就是声明一个类的对象,然而静态方 ...
- react-router JS 控制路由跳转（转载）
Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.han ...
- Serial,Parallel,CMS,G1四大GC收集器特点小结
1.Serial收集器一个单线程的收集器,在进行垃圾收集时候,必须暂停其他所有的工作线程直到它收集结束.特点:CPU利用率最高,停顿时间即用户等待时间比较长.适用场景:小型应用通过JVM参数-XX:+ ...
- [转帖]"微信支付"勒索病毒制造者被锁定 传播、危害和疫情终极解密 --- 可以学习下一年火绒团队的分析原理的精神.
"微信支付"勒索病毒制造者被锁定 传播.危害和疫情终极解密 https://www.cnbeta.com/articles/tech/794851.htm 12月1日,首个要求&q ...
- 【洛谷P4955 】[USACO14JAN]越野滑雪越野滑雪
题目链接:ヾ(≧∇≦*)ゝ 对于每一个点可以向它右边的点和下面的点连边,权值就为两个点的高度差 然后再把所有的边按边权从小到大排序,并查集加点 最后判断当前集合是否涵盖所有的航点,如果是,就输出最后一 ...
- Libre 6008 「网络流 24 题」餐巾计划 （网络流，最小费用最大流）
Libre 6008 「网络流 24 题」餐巾计划 (网络流,最小费用最大流) Description 一个餐厅在相继的N天里,第i天需要Ri块餐巾(i=l,2,-,N).餐厅可以从三种途径获得餐巾. ...
- WPF 杂谈——开篇简言
这俩年多来笔者一直在从事关于WPF的开发.虽然不能说是专家级别的.但是对于WPF的应用还是有一定的了解.论他的灵活性决对不在WinForm之下.WPF的出现更是引发一段热议.他的何去何从更是让很多人感 ...
- Linux上java程序的jar包启动通用脚本（稳定用过）
Linux上java程序的jar包启动通用脚本如下: #! /bin/sh export LANG="zh_CN.GBK" SERVICE_NAME=` .sh` SCRIPT_N ...
- 口琴练习部分 - 多孔单音奏法 & 简单伴奏
多孔单音奏法(口含5个孔) 加入伴奏 理论知识 - 盖住 理论知识 - 松开 舌头一抬一合形成一个伴奏 高级一点的伴奏练习 正拍伴奏: 当要吹吸某一个音时,舌头先离开琴格,然后迅速盖上.
- SpringBoot 读取配置文件及profiles切换配置文件
读取核心配置文件 核心配置文件是指在resources根目录下的application.properties或application.yml配置文件,读取这两个配置文件的方法有两种,都比较简单. 先创 ...