[英]Worklight - How to use IBM Worklight Tabbar API?
How can I use IBM Worklight Tabbar API to make tabbased mobile application for iPhone and Android platform, 如何使用IBM Worklight Tabbar API为iPhone和Android平台制作基于标签的移动应用程序,
I found the Tabbar API: http://pic.dhe.ibm.com/infocenter/wrklight/v5r0m5/index.jsp?topic=%2Fcom.ibm.worklight.help.doc%2Fapiref%2Fr_tab_bar_api.html 我找到了Tabbar API: http ://pic.dhe.ibm.com/infocenter/wrklight/v5r0m5/index.jsp? topic=% 2Fcom.ibm.worklight.help.doc%2Fapiref%2Fr_tab_bar_api.html
But, not getting how to start with tabbar in my application. 但是,没有得到如何从我的应用程序中的tabbar开始。
Take a look at the Getting Started Module for Common Controls . 查看通用控件的入门模块。 Slides 14-19 should help you. 幻灯片14-19应该可以帮到你。
Here's a quick example for iOS: 这是iOS的一个简单示例:
var tb = WL.TabBar;
tb.init();
tb.addItem("0", func1 , "One", { image : "images/1.png"});
tb.addItem("1", func2 , "Two", { image : "images/2.png"});
tb.addItem("2", func3, "Three", { image : "images/3.png"});
tb.setVisible(true);
tb.setSelectedItem("0");
Make sure func1
, func2
and func3
are functions that are defined previously in your application and the images passed ( 1.png
, 2.png
and 3.png
) also exist in your images
folder. 确保func1
, func2
和func3
是先前在您的应用程序中定义的函数,并且传递的图像( 1.png
, 2.png
和3.png
)也存在于您的images
文件夹中。 You can get some free icons here , the main site is here . 你可以在这里获得一些免费图标,主要网站就在这里 。
Here's an example of func1
: 这是func1
的一个例子:
var func1 = function () {
alert('hello world');
}
For Android: 对于Android:
common/[app].html 公共/ [应用]的.html
Add the following after the body tag: 在body标签后添加以下内容:
<div id="AppBody"> </div>
android/js/[app].js 机器人/ JS / [应用]的.js
WL.TabBar.setParentDivId("AppBody");
WL.TabBar.init();
WL.TabBar.addItem("item1", function(){ alert("item 1 pressed"); },"item1 title",{
image: "images/tabicon.png",
imageSelected : "images/tabicon.png"
});
WL.TabBar.addItem("item2", function(){ alert("item 2 pressed"); },"item2 title",{
image: "images/tabicon.png",
imageSelected : "images/tabicon.png"
});
WL.TabBar.addItem("item3", function(){ alert("item 3 pressed"); },"item3 title",{
image: "images/tabicon.png",
imageSelected : "images/tabicon.png"
});
WL.TabBar.addItem("item4", function(){ alert("item 4 pressed"); },"item4 title",{
image: "images/tabicon.png",
imageSelected : "images/tabicon.png"
});
WL.TabBar.addItem("item5", function(){ alert("item 5 pressed"); },"item5 title",{
image: "images/tabicon.png",
imageSelected : "images/tabicon.png"
});
WL.TabBar.setVisible(true);
android/images/tabicon.png 安卓/图片/ tabicon.png
Make sure that the images exists in your project. 确保项目中存在图像。
Code Sample 代码示例
There's a working Worklight Project/Code Sample here with the correct html, js and images. 这里有一个有效的Worklight项目/代码示例,其中包含正确的html,js和图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.