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和圖片。