logo

iMAG移动应用开发指南

SlidingMenu

侧滑菜单控件

标签

标签名 描述 说明 子标签
actionmenu 侧滑菜单标签 显示系侧滑菜单 item

属性

属性名 取值 描述
id String id编码

方法

方法名 参数 返回值 描述
open() None None 打开做左侧侧滑菜单
close() None None 关闭侧滑菜单

SlidingMenu

菜单项

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

属性

属性名 取值 描述
id String id编码

控件详解

SlidingMenu用来显示侧滑菜单,SlidingMenu包括两个item,第一个item是左边的菜单项,第二个item是右边的内容。
左边的菜单项一开始是隐藏的,可以调用open()方法打开。

脚本示例

● 使用侧滑菜单

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <slidingmenu id="slidingmenu">
            <item>
                <content style="background:#666666">
                    <list>
                        <item style="background:#333333">
                            <label style="color:white">头条</label>
                        </item>
                        <item style="background:#333333">
                            <label style="color:white">体育</label>
                        </item>
                        <item style="background:#333333">
                            <label style="color:white">娱乐</label>
                        </item>
                        <item style="background:#333333">
                            <label style="color:white">财经</label>
                        </item>
                        <item style="background:#333333">
                            <label style="color:white">科技</label>
                        </item>
                    </list>
                </content>
            </item>
            <item>
                <title>
                    <left>
                        <button onclick="$('slidingmenu').open()">打开</button>
                    </left>
                    <center>
                        <label>SlidingMenu</label>
                    </center>
                </title>
                <content style="background:white">
                    <label>内容</label>
                </content>
            </item>
        </slidingmenu>
    </page>
</imag>

效果:

上面的例子slidingmenu定义了两个item,第一个item一开始是隐藏的,当点击左上角按钮时调用open()方法显示侧滑菜单。

● 点击侧滑菜单切换Content

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[ 
            function showContent(index){
                $('slidingmenu').close();
                $('contents').showContent(index);
            }
        ]]>
    </script>
    <page>
        <slidingmenu id="slidingmenu">
            <item>
                <content style="background:#666666">
                    <list>
                        <item style="background:#333333" onclick="showContent(0)">
                            <label style="color:white">头条</label>
                        </item>
                        <item style="background:#333333" onclick="showContent(1)">
                            <label style="color:white">体育</label>
                        </item>
                        <item style="background:#333333" onclick="showContent(2)">
                            <label style="color:white">娱乐</label>
                        </item>
                        <item style="background:#333333" onclick="showContent(3)">
                            <label style="color:white">财经</label>
                        </item>
                        <item style="background:#333333" onclick="showContent(4)">
                            <label style="color:white">科技</label>
                        </item>
                    </list>
                </content>
            </item>
            <item>
                <title>
                    <left>
                        <button onclick="$('slidingmenu').open()">打开</button>
                    </left>
                    <center>
                        <label>SlidingMenu切换Content</label>
                    </center>
                </title>
                <contents id="contents">
                    <content style="background:white">
                        <label>头条</label>
                    </content>
                    <content style="background:blue">
                        <label>体育</label>
                    </content>
                    <content style="background:green">
                        <label>娱乐</label>
                    </content>
                    <content style="background:yellow">
                        <label>财经</label>
                    </content>
                    <content style="background:gray">
                        <label>科技</label>
                    </content>
                </contents>
            </item>
        </slidingmenu>
    </page>
</imag>

效果:

点击左侧的侧滑菜单切换右侧的Content的内容。

示例下载

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