cordova - 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

但是，没有得到如何在我的应用程序中使用标签栏。

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');
}

对于安卓：

普通/[app].html

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

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

android/js/[app].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 和图像。