logo

iMAG移动应用开发指南

Title

标题栏控件

标签

标签名 描述 说明 子标签
title 标题栏标签 显示页面标题栏

属性

属性名 取值 描述
style String
title样式,包括:

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式
addLeft(widget:Widget) widget:Widget对象 None 在title中居左增加widget
addCenter(widget:Widget) widget:Widget对象 None 在title中居中增加widget
addRight(widget:Widget) widget:Widget对象 None 在title中居右增加widget
remove(widget:Widget) widget:Widget对象 None 移除title中的对应的widget
clear() None None 清空title中所有的widget
contains(widget:Widget) widget:Widget对象 Boolen 判断title中是否含有某个widget

Left

title的子标签

标签名 描述 说明
left title居左对齐标签 left中的内容居左对齐

Center

title的子标签

标签名 描述 说明
center title居中对齐标签 center中的内容居中对齐

Right

title的子标签

标签名 描述 说明
right title居右对齐标签 right中的内容居右对齐

标签示例

● 标题栏默认样式

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>默认样式</label>
            </center>
        </title>
    </page>
</imag>

效果:

center中的label是标题文本内容,会居左显示。标题栏默认会显示成蓝底白字的样式,样式可以自己设置。

● 设置颜色背景

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title style="background:gray">
            <center>
                <label>颜色背景</label>
            </center>
        </title>
        <content>
        </content>
    </page>
</imag>

效果:

● 设置图片背景

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title style="background:mmfooter_bg.png repeat-x;">
            <center>
                <label>图片背景</label>
            </center>
        </title>
        <content>
        </content>
    </page>
</imag>

效果:

说明:为了适配不同屏幕,title的图片背景最好是设置成一个长条通过repeat-x来横向拉伸。

● 标题栏按钮

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
       <title>
            <center>
                <label>标题栏按钮</label>
            </center>
            <right>
                <button onclick="hint('标题按钮')">按钮</button>
            </right>
        </title>
        <content>
        </content>
    </page>
</imag>

说明:标题栏上的按钮默认没有边框,可以自己设置按钮的边框和背景。

● 返回按钮

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
       <title>
           <left>
                <button role="back"/>
            </left>
            <center>
                <label>返回按钮</label>
            </center>
        </title>
        <content>
        </content>
    </page>
</imag>

说明:iOS上默认总会有返回按钮,而Android由于有物理返回键,默认没有返回按钮。如果要在Android上也显示返回按钮,需要在left标签中加一个button,并且设置属性role="back",用来标识这是一个返回按钮。

● 设置返回按钮文字

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <left>
                <button role="back">返回</button>
            </left>
            <center>
                <label>设置返回按钮文字</label>
            </center>
        </title>
        <content>
        </content>
    </page>
</imag>

说明 :返回按钮默认只显示箭头,可以在button里加上文字。

● 设置按钮颜色

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title style="background:purple;tint-color:green">
            <left>
                <button role="back">返回</button>
            </left>
            <center>
                <label>设置按钮颜色</label>
            </center>
            <right>
                <button>按钮</button>
            </right>
        </title>
        <content>
        </content>
    </page>
</imag>    

说明 :可以通过tint-color来统一设置标题栏上按钮的颜色。

按钮颜色也可以分别设置,如:

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title style="background:purple;">
            <left>
                <button role="back" style="color:green,darkgreen"></button>
            </left>
            <center>
                <label>设置按钮颜色</label>
            </center>
            <right>
                <button style="color:green,darkgreen">按钮</button>
            </right>
        </title>
        <content>
        </content>
    </page>
</imag>    

style="color:green,darkgreen",其中darkgreen是选中的颜色。

● 图片返回按钮

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <left>
                <button role="back" style="width:40;height:34;background:title_back_normal.png,title_back_selected.png"/>
            </left>
            <center>
                <label>图片返回按钮</label>
            </center>
        </title>
        <content>
        </content>
    </page>
</imag>

说明 :这里最好是设置button的width和height,以适配不同屏幕,但设置的宽高要和图片本身的宽高成比例。

● 在返回按钮上加事件

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
       <title>
           <left>
                <button role="back" onclick="hint('点击返回按钮');$page.close()" style="width:40;height:34;background:title_back_normal.png,title_back_selected.png"/>
            </left>
            <center>
                <label>在返回按钮上加事件</label>
            </center>
        </title>
        <content>
        </content>
    </page>
</imag>

说明 :可以在返回按钮上设置onclick事件,这样在点击返回按钮时会先调用JS脚本,要注意的是在JS脚本末尾要加上$page.close()来关闭当前页。

示例下载

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