Worklight - 如何使用IBM Worklight Tabbar API？

Question

如何使用IBM Worklight Tabbar API为iPhone和Android平台制作基于标签的移动应用程序，

我找到了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开始。

Answer 1

查看通用控件的入门模块。 幻灯片14-19应该可以帮到你。

这是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");

确保func1 ， func2和func3是先前在您的应用程序中定义的函数，并且传递的图像（ 1.png ， 2.png和3.png ）也存在于您的images文件夹中。 你可以在这里获得一些免费图标，主要网站就在这里 。

这是func1的一个例子：

var func1 = function () { 
  alert('hello world');
}

对于Android：

公共/ [应用]的.html

在body标签后添加以下内容：

<div id="AppBody"> </div>

机器人/ 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);

安卓/图片/ tabicon.png

确保项目中存在图像。

代码示例

这里有一个有效的Worklight项目/代码示例，其中包含正确的html，js和图像。