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