logo

iMAG移动应用开发指南

Tabs

标签页控件

标签

标签名 描述 说明 子标签
tabs 标签页标签 标签页布局,以标签的形式来展示内容 tab

属性

属性名 取值 描述
id String id编码
style 样式
tabs样式,包括:
scrollable Boolean 设置是否允许标签页左右滑动:
true:允许滑动,默认值
false:不允许滑动

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式

Tab

网格项

标签名 描述 说明
tab 标签页子标签 tabs的子标签,用来展示标签页的内容

属性

属性名 取值 描述
id 文本 id编码
style 样式
tab样式,包括:
icon 文件名 标签页图标
badge 文本 标签页提示内容
href URL地址 标签页的链接地址
current true:当前标签页
false:非当前标签页,默认值
当前标签页,默认第一个tab为当前标签页
cache true:使用缓存,默认值
false:不使用缓存
是否使用缓存,仅当href不为空时有效
onchange Javascript脚本 选择标签页时触发的脚本
onload Javascript脚本 当href链接的内容异步加载完成时触发的脚本

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式

控件详解

● 标签页基本用法

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <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>

效果:

说明:icon="tab_mine_normal.png,tab_mine_selected.png"定义的分别是tab按钮默认状态和选中状态的图标,style="label-color:#999999,#46c01b"则分别是tab按钮默认状态和选中状态的文字颜色。

● 禁止标签页左右滑动

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <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 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>

说明:设置scrollable="false",禁止标签页左右滑动。

● 设置标签页背景

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <tabs style="background:#444444">
            <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>

效果:

说明:style="background:#444444"是设置颜色背景

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <tabs style="background:mmfooter_bg.png repeat-x;">
            <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>

效果:

说明:style="background:mmfooter_bg.png repeat-x;"是设置图片背景,repeat-x用于把图片水平拉伸。

● 设置标签按钮背景

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <tabs style="background:#444444">
            <tab label="微信" icon="tab_home_normal.png,tab_home_selected.png" style="label-color:#999999,#46c01b;tab-background:null,gray">
                <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;tab-background:null,gray">
                <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;tab-background:null,gray">
                 <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;tab-background:null,gray">
                 <title>
                    <center>
                        <label>我</label>
                    </center>
                </title>
                <content draggable="true">
                    <list type="group">
                        <item>
                            <label>我</label>
                        </item>
                    </list>
                </content>
            </tab>
        </tabs>
    </page>
</imag>

效果:

说明:style="tab-background:null,gray"用来设置tab按钮的背景,其中gray是选中的背景颜色,而未选中的背景一般设置为null,表示透明。

● 设置标签页内容背景

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <tabs>
            <tab label="微信" icon="tab_home_normal.png,tab_home_selected.png" style="background:gray;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="background:gray;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>

效果:

说明:在tab标签上设置style="background:gray"是设置的tab内容的背景。

● 设置当前标签页

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <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="发现" current="true" 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>

效果:

说明:current="true"用来设置当前显示的标签页,同时可以通过$('tabid').current = true在JS里动态设置当前标签页。

● 设置标签页链接

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <tabs>
            <tab label="微信" icon="tab_home_normal.png,tab_home_selected.png">
                <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" href="tab_address.xml"/>
            <tab label="发现" icon="tab_service_normal.png,tab_service_selected.png"  href="tab_find_frd.xml"/>
            <tab label="我" icon="tab_mine_normal.png,tab_mine_selected.png" cache="false" href="tab_settings.xml"/>
        </tabs>
   </page>
</imag>

效果:

说明:可以在tab上设置href,这样tab的内容将从href指向的xml页面动态加载。默认是有缓存的,设置cache="false"可以禁止缓存,这样每次tab切换都会重新加载xml内容。

● 设置消息提示

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <tabs>
            <tab label="微信" badge="3" 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="发现" badge="dot" 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="我" badge="NEW" 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>

效果:

说明:badge="3"用来在tab上显示消息提示,badge="dot"将显示成小圆点。

● 设置消息提示

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <tabs>
            <tab label="微信" badge="3" 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="发现" badge="dot" 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="我" badge="NEW" 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>

效果:

说明:badge="3"用来在tab上显示消息提示,badge="dot"将显示成小圆点。

● 切换响应事件

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <tabs>
            <tab label="微信" onchange="hint('微信');" 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="通信录" onchange="hint('通信录');" 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="发现" onchange="hint('发现');" 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="我" onchange="hint('我');" 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>

说明:切换tab时会触发onchange事件。

● 控制消息提示

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <tabs>
            <tab label="微信" badge="3" onchange="this.badge = ''" 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="发现" badge="dot" onchange="this.badge = ''" 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="我" badge="NEW" onchange="this.badge = ''" 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>

说明:设置onchange="this.badge = ''",tab切换的时候会清空消息提示。

示例下载

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