如何使用 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
但是,没有得到如何在我的应用程序中使用标签栏。
如何使用 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
但是,没有得到如何在我的应用程序中使用标签栏。
查看通用控件的入门模块。幻灯片 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 和图像。