1

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

しかし、私のアプリケーションでタブバーを開始する方法がわかりません。

4

1 に答える 1

4

Common Controlsの Getting Started モジュール を参照してください。スライド 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');
}

アンドロイド用：

共通/[アプリ].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/images/tabicon.png

イメージがプロジェクトに存在することを確認してください。

コードサンプル

ここには、正しい html、js、および画像を含む実際の Worklight プロジェクト/コード サンプルがあります。

于 2013-03-05T07:47:57.963 に答える