logo

iMAG移动应用开发指南

Contents

内容组控件,多个content的组

标签

标签名 描述 说明 子标签
contents 内容组标签 多个content的组,可以切换在content之间

属性

属性名 取值 描述
id String id编码
contents Array 得到Content的数组。只读属性,仅在Javascript中使用

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式
showContent(index:Integer) index:content的索引 None 显示指定的content
add(content:Object) content:Content对象 None 添加一个content
remove(content:Object) content:Content对象 None 移除一个content
clear() None None 移除contents中所有的content

控件详解

Content控件可以单独使用也可以放在Contents里使用。
Contents里包含的多个Content默认只会显示一个,可以调用showContent()方法在Content之间切换。
设置了current="true"Content将会被显示,如果没有设置current属性则默认显示第一个Content

标签示例

● 多个content

<contents>
    <content>
        <button style="width:120">按钮0</button>
    </content>
    <content current="true">
        <button style="width:120">按钮1</button>
    </content>
    <content>
        <button style="width:120">按钮2</button>
    </content>
</contents>

多个content默认会显示第一个,但由于这个例子中第二个content设置了current="true"属性,所以会显示第二个content。

脚本示例

● 切换content

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>切换content</label>
            </center>
        </title>
        <header>
            <row>
                <button onclick="$('contents').showContent(0)" style="align:center">Content0</button>
                <button onclick="$('contents').showContent(1)" style="align:center">Content1</button>
                <button onclick="$('contents').showContent(2)" style="align:center">Content2</button>
            </row>
        </header>
        <contents id="contents">
            <content style="background:red">
                <button style="width:120">按钮0</button>
            </content>
            <content current="true" style="background:blue">
                <button style="width:120">按钮1</button>
            </content>
            <content style="background:green">
                <button style="width:120">按钮2</button>
            </content>
        </contents>
    </page>
</imag>

效果:

这个例子展示了如何通过showContent()方法来动态切换多个Content。

● 动态添加Content

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function addContent(index, color) {
            var content = $C('<content style="background:' + color + '">' +
                   '<button style="width:120">按钮' + index + '</button>' +
                '</content>');
            $('contents').add(content);
            $('contents').showContent(index);
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>添加content</label>
            </center>
        </title>
        <header>
            <row>
                <button onclick="addContent(0, 'red')" style="align:center">Add Content0</button>
                <button onclick="addContent(1, 'blue')" style="align:center">Add Content1</button>
                <button onclick="addContent(2, 'green')" style="align:center">Add Content2</button>
            </row>
        </header>
        <contents id="contents">
        </contents>
    </page>
</imag>

通过add()方法动态添加content。

示例下载

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