logo

iMAG移动应用开发指南

Tabbar

标签栏控件,通常放在顶部用来切换多个Content

标签

标签名 描述 说明 子标签
tabbar 标签栏标签 通常放在顶部用来切换多个Content

属性

属性名 取值 描述
id String id编码
style String
bottom样式,包括:
controlContents Boolean 是否控制Contents控件的切换:
true:控制切换,默认值
false:不控制切换
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 设置多个样式
add(item:Object) item:TabbarItem对象 None 添加一个item
remove(item:Object) content:TabbarItem对象 None 移除一个item
clear() None None 移除Tabbar中所有的item

TabbarItem

菜单项

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

属性

属性名 取值 描述
id String id编码
current Boolean 是否是当前的item,取值:
true:当前的item
false:非当前的item,默认值
onchange Javascript 切换TabbarItem时触发的脚本事件

控件详解

● 用Tabbar控制Contents切换

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>Tabbar</label>
            </center>
        </title>
        <header>
            <tabbar>
                <item label="头条"></item>
                <item label="体育"></item>
                <item label="娱乐"></item>
                <item label="财经"></item>
                <item label="科技"></item>
                <item label="时尚"></item>
                <item label="汽车"></item>
            </tabbar>
        </header>
        <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>
            <content style="background:red">
                <label>时尚</label>
            </content>
            <content style="background:brown">
                <label>汽车</label>
            </content>
        </contents>
    </page>
</imag>

效果:

Tabbar默认会控制Contents的切换,可以设置controlContents="false"来取消对Contents的控制。

● 设置Tabbar样式

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>Tabbar样式</label>
            </center>
        </title>
        <header>            
            <tabbar controlContents="true" style="background:#444444;label-color:white,orange;indicator-color:orange;indicator-height:3">
                <item label="头条"></item>
                <item label="体育"></item>
                <item label="娱乐"></item>
                <item label="财经"></item>
                <item label="科技"></item>
                <item label="时尚"></item>
                <item label="汽车"></item>
            </tabbar>
        </header>
        <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>
            <content style="background:red">
                <label>时尚</label>
            </content>
            <content style="background:brown">
                <label>汽车</label>
            </content>
        </contents>
    </page>
</imag>

效果:

设置tabbar的样式,其中label-color是文字颜色,indicator-color是indicator滑块的颜色,indicator-height是indicator滑块的高度。

● 自定义TabbarItem

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        var i = 0;
        function changeIcon(index, src) {
            for (var i = 0; i < 4; i++) {
                $('icon' + i).src = $('icon' + i).src.replace('selected', 'normal');
            }
            $('icon' + index).src = src;
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>自定义TabbarItem</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>
        </contents>
        <footer>
            <tabbar>
                <item onchange="changeIcon(0, 'tab_home_selected.png')"><row><icon id="icon0" src="tab_home_selected.png"/><label>微信</label></row></item>
                <item onchange="changeIcon(1, 'tab_category_selected.png')"><row><icon id="icon1" src="tab_category_normal.png"/><label>通信</label></row></item>
                <item onchange="changeIcon(2, 'tab_service_selected.png')"><row><icon id="icon2" src="tab_service_normal.png"/><label>发现</label></row></item>
                <item onchange="changeIcon(3, 'tab_mine_selected.png')"><row><icon id="icon3" src="tab_mine_normal.png"/><label>我</label></row></item>
            </tabbar>
        </footer>
    </page>
</imag>

效果:

说明:不设置TabbarItem的label属性,而是使用row布局,item里可以放更多控件。

● 设置当前的TabbarItem

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>设置当前的TabbarItem</label>
            </center>
            <right>
                <button onclick="$('tabitem4').current=true">设置</button>
            </right>
        </title>
        <header>
            <tabbar>
                <item label="头条"></item>
                <item label="体育"></item>
                <item label="娱乐" current="true"></item>
                <item label="财经"></item>
                <item label="科技" id="tabitem4"></item>
                <item label="时尚"></item>
                <item label="汽车"></item>
            </tabbar>
        </header>
        <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>
            <content style="background:red">
                <label>时尚</label>
            </content>
            <content style="background:brown">
                <label>汽车</label>
            </content>
        </contents>
    </page>
</imag>

说明:通过设置current属性来设置当前的TabbarItem,其中$('tabitem4').current=true是用脚本动态修改。

● Tabbar切换的onchange事件

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>Tabbar</label>
            </center>
        </title>
        <header>
            <tabbar>
                <item label="头条" onchange="hint('头条');"></item>
                <item label="体育" onchange="hint('体育');"></item>
                <item label="娱乐" onchange="hint('娱乐');"></item>
                <item label="财经" onchange="hint('财经');"></item>
                <item label="科技" onchange="hint('科技');"></item>
                <item label="时尚" onchange="hint('时尚');"></item>
                <item label="汽车" onchange="hint('汽车');"></item>
            </tabbar>
        </header>
        <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>
            <content style="background:red">
                <label>时尚</label>
            </content>
            <content style="background:brown">
                <label>汽车</label>
            </content>
        </contents>
    </page>
</imag>

● 动态添加TabbarItem

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        var i = 0;
        function addTabbarItem() {
        var item = $C('<tabbar-item><item onclick="$(\'contents\').showContent(' + i + ')"><label>tabb' + i + '</label></item></tabbar-item>');
            $('tabbar').add(item);
            i++;
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>添加TabbarItem</label>
            </center>
            <right>
                <button onclick="addTabbarItem()">添加</button>
            </right>
        </title>
        <header>
            <tabbar id="tabbar"></tabbar>
        </header>
        <contents id="contents">
            <content>
                <label>content1</label>
            </content>
            <content>
                <label>content2</label>
            </content>
            <content>
                <label>content3</label>
            </content>
        </contents>
    </page>
</imag>

● 移除TabbarItem

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        var i = 0;
        function removeTabbarItem() {
            $('tabbar').remove($('tab' + i));
            i++;
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>移除TabbarItem</label>
            </center>
        </title>
        <header>
            <tabbar id="tabbar" controlContents="false">
                <item id="tab0" onclick="hint('头条')"><label>头条</label></item>
                <item id="tab1" onclick="hint('体育')"><label>体育</label></item>
                <item id="tab2" onclick="hint('娱乐')"><label>娱乐</label></item>
                <item id="tab3" onclick="hint('财经')"><label>财经</label></item>
                <item id="tab4" onclick="hint('科技')"><label>科技</label></item>
            </tabbar>
        </header>
        <content>
            <button onclick="removeTabbarItem()">移除TabbarItem</button>
        </content>
    </page>
</imag>

点击按钮移除相应的TabbarItem。

示例下载

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