Tutorialチュートリアル
スライドメニューを表示するには
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 |