applican

applican-config.xml

<applican-configuration>
	<property name="NAVIGATION_BAR">false</property>
	<property name="STATUS_BAR">true</property>
	<property name="PULL_TO_REFRESH">true</property>
	<property name="SCREEN_ORIENTATION_PORTRAIT">true</property>
	<property name="SCREEN_ORIENTATION_LANDSCAPE">false</property>
	<property name="RESUME_RELOAD">false</property>
	<property name="KEEP_SCREEN_ON">false</property>
	<property name="WEBVIEW_BOUNCES">true</property>
	<property name="WEBVIEW_BACK">true</property>
	<property name="NATIVE_TAB_BAR">true</property>
	<property name="NATIVE_TAB_COUNT">5</property>
	<property name="NATIVE_TAB_URL1">index.html</property>
	<property name="NATIVE_TAB_URL2">tab2.html</property>
	<property name="NATIVE_TAB_URL3">tab3.html</property>
	<property name="NATIVE_TAB_URL4">tab4.html</property>
	<property name="NATIVE_TAB_URL5">tab5.html%3Fparam=val</property>
	<property name="NATIVE_TAB_POSITION">buttom</property>
	<property name="NATIVE_TAB_HEIGHT">40</property>
</applican-configuration>

解説

NATIVE_TAB_BARにtrueを指定し、タブ表示するよう宣言します。
NATIVE_TAB_COUNTでタブ数（この例では５つ）を指定します。
NATIVE_TAB_URL1でタブの１番目をタップした場合のコンテンツを、2以降もタブに応じたコンテンツのURLを（URLエンコード形式で）指定します。
NATIVE_TAB_POSITIONではタブUIを画面上部か下部に表示するか指定します。
NATIVE_TAB_HEIGHTではタブの高さを指定します。

タブ用の画像について

タブ用の画像は"web/tab"ディレクトリに以下のファイル名で画像を配置してください。

tab_btn_1_on.png　タブ選択時の画像
tab_btn_1_off.png　タブ非選択時の画像

タブの数に応じて2～5までの画像を配置します。

画像のサイズはタブの数によって変わります。以下のように作成してください。

タブが5個　　縦100px, 横128px
タブが4個　　縦100px, 横160px
タブが3個　　縦100px, 横213px
タブが2個　　縦100px, 横320px

※縦のサイズはiPhone4以上の高解像度に対応するため、NATIVE_TAB_HEIGHTで指定した数値の2倍にしてください。
<property name="NATIVE_TAB_HEIGHT">43</property> と設定した場合は、高さ86pxの画像を用意してください。

タブ上にバッジを表示する

タブ上にバッジを表示する際の背景画像は"web/tab"ディレクトリに以下のファイル名で画像を配置してください。

tab_badge_bg.png（縦40px, 横40px）… タブ上にバッジを表示する際の背景画像

バッジを表示するには下記の関数を呼び出してください。

applican.tab.setBadge([タブ番号], [バッジ上の数値]);

・タブ番号はバッジを表示したいタブの番号で、左から1～5を指定できます。
・バッジ上の数値は0～99を指定できます。
　※ 0以下を指定した場合はバッジは非表示になります。
　※ 100以上を指定した場合の表示は「99」になります。

タブ画像を変更する

applican.tab.changeTabImage([タブ画像フォルダ]);

デフォルトのタブ画像フォルダは「tab」となっておりアプリ通常起動時はtabフォルダから画像を取得しますが、任意のフォルダに命名規則に従ったタブ用画像をwebフォルダ内に配置し、上記のAPIでフォルダ名を指定することで、タブ画像を変更することができます。
次回以降の起動時についても、変更されたタブ画像フォルダから読み込みます。

実装例

applican.tab.changeTabImage(“tab2”);

画面イメージ

Android		iOS