Worklight - 如何使用 IBM Worklight Tabbar API？

Posted 2023-02-25

【中文标题】Worklight - 如何使用 IBM Worklight Tabbar API？

【英文标题】：Worklight - How to use IBM Worklight Tabbar API?

【发布时间】：2013-03-05 07:22:41

【问题描述】：

如何使用 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

但是，不知道如何在我的应用程序中使用标签栏。

【参考方案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');

对于安卓：

common/[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);

android/images/tabicon.png

确保图像存在于您的项目中。

代码示例

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

【讨论】：

感谢您的快速回复 :) 及其适用于 iphone 但在 android 上无效。 :(

嗨cnandreu你知道设置android标签栏吗？

Android 应用程序通常don't have a TabBar UI element 与 iOS 应用程序类似。如果我没记错的话，使用上面的代码应该会在顶部给你一个 HTML5 TabBar。另一种选择是查看jQuery Mobile。

对android使用上面的代码我没有在任何地方得到Tabbar，就像它在ios中显示的那样，如果不使用jQuery Mobile，这可能吗？有什么专门针对 android 的吗？

您不必在 Android 中使用 WL.TabBar.setParentDivId(parentId)。默认情况下，标签栏添加到具有 ID 内容的元素（默认情况下应该是正文）。