logo

iMAG移动应用开发指南

PathMenu

弹跳菜单控件

标签

标签名 描述 说明 子标签
pathmenu 弹跳菜单标签 显示Path风格的弹跳菜单 item

属性

属性名 取值 描述
id String id编码
position String 菜单所在位置,取值:
topleft:左上
topright:右上
bottomleft:左下
bottomright:右下
bottomcenter:底部中间
bottomleftvertical:左下向上弹出
bottomrightvertical:右下向上弹出
icon String 弹跳菜单按钮图标文件名
items Array 返回item的数组,只读
onclick Javascript 点击按钮时触发的脚本
onclose Javascript 菜单关闭时触发的脚本

方法

方法名 参数 返回值 描述
open() None None 打开菜单
close() None None 关闭菜单
add(item:Object) item:ActionMenuItem对象 None 增加一个菜单项
remove(item:Object) item:ActionMenuItem对象 None 移除一个菜单项
clear() None None 移除所有菜单项

PathMenuItem

菜单项

标签名 描述 说明
item 菜单项子标签 显示菜单项

属性

属性名 取值 描述
id String id编码
icon String 菜单项图标文件名
onclick Javascript 点击菜单项时触发的脚本

控件详解

● 左上角弹跳菜单

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <pathmenu position="topleft" icon="composer_button_normal.png,composer_button_pressed.png">
            <item icon="composer_camera.png" onclick="hint('camera')"></item>           
            <item icon="composer_music.png" onclick="hint('music')"></item>           
            <item icon="composer_place.png" onclick="hint('place')"></item>       
            <item icon="composer_sleep.png" onclick="hint('sleep')"></item>       
            <item icon="composer_thought.png" onclick="hint('thought')"></item>
            <item icon="composer_with.png" onclick="hint('with')"></item>
        </pathmenu>
        <title>
            <center>
                <label>PathMenu左上</label>
            </center>
        </title>
    </page>
</imag>

设置position="topleft"

● PathMenu与Tabs标签页合用

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <pathmenu position="bottomleft" icon="composer_button_normal.png,composer_button_pressed.png">
            <item icon="composer_camera.png" onclick="hint('camera')"></item>           
            <item icon="composer_music.png" onclick="hint('music')"></item>           
            <item icon="composer_place.png" onclick="hint('place')"></item>       
            <item icon="composer_sleep.png" onclick="hint('sleep')"></item>       
            <item icon="composer_thought.png" onclick="hint('thought')"></item>
            <item icon="composer_with.png" onclick="hint('with')"></item>
        </pathmenu>
        <tabs>
            <tab label="微信" icon="tab_home_normal.png,tab_home_selected.png" style="label-color:#999999,#46c01b">
                <title>
                    <center>
                        <label>微信</label>
                    </center>
                </title>
                <content draggable="true">
                    <list type="group">
                        <item>
                            <label>微信</label>
                        </item>
                    </list>
                </content>
            </tab>
            <tab label="通信录" icon="tab_category_normal.png,tab_category_selected.png" style="label-color:#999999,#46c01b">
               <title>
                    <center>
                        <label>通信录</label>
                    </center>
                </title>
                <content draggable="true">
                    <list type="group">
                        <item>
                            <label>通信录</label>
                        </item>
                    </list>
                </content>
            </tab>
            <tab label="发现" icon="tab_service_normal.png,tab_service_selected.png" style="label-color:#999999,#46c01b">
                <title>
                    <center>
                        <label>发现</label>
                    </center>
                </title>
                <content draggable="true">
                    <list type="group">
                        <item>
                            <label>发现</label>
                        </item>
                    </list>
                </content>
            </tab>
            <tab label="我" icon="tab_mine_normal.png,tab_mine_selected.png" style="label-color:#999999,#46c01b">
                <title>
                    <center>
                        <label>我</label>
                    </center>
                </title>
                <content draggable="true">
                    <list type="group">
                        <item>
                            <label>我</label>
                        </item>
                    </list>
                </content>
            </tab>
        </tabs>
    </page>
</imag>

● 底部中间弹跳菜单

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>"WebRoot/WEB-INF/views/website/site/doc/pathmenu.jsp";
        <pathmenu position="bottomcenter" icon="pathmenu_home_normal.png,pathmenu_home_pressed.png">
            <item icon="pathmenu_shix.png" onclick="hint('写工作')"></item>            
            <item icon="pathmenu_signin.png" onclick="hint('签到')"></item>           
            <item icon="pathmenu_sys.png" onclick="hint('扫一扫')"></item>           
            <item icon="pathmenu_weix.png" onclick="hint('发i信')"></item>   
        </pathmenu>
        <tabs scrollable="false">
            <tab label="微信" icon="tab_home_normal.png,tab_home_selected.png" style="label-color:#999999,#46c01b">
                <title>
                    <center>
                        <label>微信</label>
                    </center>
                </title>
                <content draggable="true">
                    <list type="group">
                        <item>
                            <label>微信</label>
                        </item>
                    </list>
                </content>
            </tab>
            <tab label="通信录" icon="tab_category_normal.png,tab_category_selected.png" style="label-color:#999999,#46c01b">
               <title>
                    <center>
                        <label>通信录</label>
                    </center>
                </title>
                <content draggable="true">
                    <list type="group">
                        <item>
                            <label>通信录</label>
                        </item>
                    </list>
                </content>
            </tab>
            <tab>
            </tab>
            <tab label="发现" icon="tab_service_normal.png,tab_service_selected.png" style="label-color:#999999,#46c01b">
                <title>
                    <center>
                        <label>发现</label>
                    </center>
                </title>
                <content draggable="true">
                    <list type="group">
                        <item>
                            <label>发现</label>
                        </item>
                    </list>
                </content>
            </tab>
            <tab label="我" icon="tab_mine_normal.png,tab_mine_selected.png" style="label-color:#999999,#46c01b">
                <title>
                    <center>
                        <label>我</label>
                    </center>
                </title>
                <content draggable="true">
                    <list type="group">
                        <item>
                            <label>我</label>
                        </item>
                    </list>
                </content>
            </tab>
        </tabs>
    </page>
</imag>

设置position="bottomcenter"

● 左下向上弹出弹跳菜单

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <pathmenu icon="weibo_unselected_button.png" position="bottomleftvertical" >
            <item icon="weibo_unselected_alljob.png" onclick="hint('1')"></item>            
            <item icon="weibo_unselected_alljob.png" onclick="hint('2')"></item>
            <item icon="weibo_unselected_alljob.png" onclick="hint('3')"></item>            
            <item icon="weibo_unselected_alljob.png" onclick="hint('4')"></item>
            <item icon="weibo_unselected_alljob.png" onclick="hint('5')"></item>            
            <item icon="weibo_unselected_alljob.png" onclick="hint('6')"></item>
            <item icon="weibo_unselected_alljob.png" onclick="hint('7')"></item>            
            <item icon="weibo_unselected_alljob.png" onclick="hint('8')"></item>
        </pathmenu>
        <title>
            <center>
                <label>左下向上弹出</label>
            </center>
        </title>
    </page>
</imag>

position="bottomleftvertical"position="bottomrightvertical"是向上弹出,向上弹出能放置更多的菜单项。

● 设置弹跳菜单位置

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <pathmenu position="bottomleft" icon="composer_button_normal.png,composer_button_pressed.png" style="offset-x:20;offset-y:-20">
            <item icon="composer_camera.png" onclick="hint('camera')"></item>           
            <item icon="composer_music.png" onclick="hint('music')"></item>           
            <item icon="composer_place.png" onclick="hint('place')"></item>       
            <item icon="composer_sleep.png" onclick="hint('sleep')"></item>       
            <item icon="composer_thought.png" onclick="hint('thought')"></item>
            <item icon="composer_with.png" onclick="hint('with')"></item>
        </pathmenu>
        <title>
            <center>
                <label>PathMenu左上</label>
            </center>
        </title>
    </page>
</imag>

说明:可通过offset-xoffset-y样式来控制弹跳按钮的偏移位置

示例下载

请点此下载pathmenu相关的示例代码:imag-pathmenu.zip