applican/アプリカン

Tutorialチュートリアル

スライドメニューを表示するには

スワイプして横に移動するスライドメニューを表示します。
使用する際は必須でapplican-config.xmlを設定します。表示後にJavaScriptから操作が可能です。
JavaScriptからの操作方法はリファレンスをご覧ください。

applican-config.xml

<applican-configuration>
	<property name="NATIVE_SLIDE_MENU">true</property>
	<property name="NATIVE_SLIDE_MENU_POSITION">top</property>
	<property name="NATIVE_SLIDE_MENU_WIDTH">80</property>
	<property name="NATIVE_SLIDE_MENU_HEIGHT">40</property>
	<property name="NATIVE_SLIDE_MENU_DEFAULT_COUNT">5</property>
	<property name="NATIVE_SLIDE_MENU_DEFAULT_RESET">true</property>
	<property name=”NATIVE_SLIDE_MENU_DEFAULT_IMAGES”>menu1,menu2,menu3,menu4,menu5</property>
	<property name=”NATIVE_SLIDE_MENU_DEFAULT_URLS”>index.html,http://www.google.co.jp/,tab3.html,tab4.html,test/tab5.html</property>
</applican-configuration>

No	属性名	説明	設定値	デフォルト値
1	NATIVE_SLIDE_MENU	スライドメニューを表示します。	boolean	false
2	NATIVE_SLIDE_MENU_POSITION	メニューの表示位置を指定します。	string	top
3	NATIVE_SLIDE_MENU_WIDTH	メニューの幅を指定します。	number	80
4	NATIVE_SLIDE_MENU_HEIGHT	メニューの高さを指定します。	number	40
5	NATIVE_SLIDE_MENU_DEFAULT_COUNT	初期表示するメニューの数を指定します。	number	-
6	NATIVE_SLIDE_MENU_DEFAULT_IMAGES	slide_menuフォルダに配置した画像の、画像IDをカンマ区切りで指定します。	string	-
7	NATIVE_SLIDE_MENU_DEFAULT_URLS	メニューを選択した際に開くページのURLをカンマ区切りで指定します。	string	-
8	NATIVE_SLIDE_MENU_DEFAULT_RESET	trueの場合、コンテンツの更新時にスライドメニューをapplican-config.xmlの設定値で初期化します。	boolean	false

画像データについて

webディレクトリの直下に「slide_menu」というフォルダを作成し、以下の画像名で画像を配置してください。

画像名	説明	例
[任意の画像ID].png	選択時の画像	menu1.png
[任意の画像ID]_selected.png	未選択時の画像	menu1_selected.png

画像サイズはiOSのRetina対応のため、下記の例のようにNATIVE_SLIDE_MENU_WIDTH、NATIVE_SLIDE_MENU_HEIGHTで指定した数値の2倍のサイズで作成してください。

例

属性名	設定値	画像サイズ
NATIVE_SLIDE_MENU_WIDTH	80	横幅 160px
NATIVE_SLIDE_MENU_HEIGHT	40	縦幅 80px