Worklight - 如何使用IBM Worklight Tabbar API？

Question

如何使用IBM工作灯的TabBar API使iPhone和Android平台tabbased移动应用，

我发现的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

查看Common Controls的入门模块。幻灯片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夹。你可以得到一些免费的图标here，主站点是here。

下面是func1一个例子：

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

对于机器人：

公共/ [应用]的.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); 

的Android /图片/ tabicon.png

确保图像在您的项目中。

代码示例

有一个工作的工作灯项目/代码示例here用正确的HTML，JS和图片。