logo

iMAG移动应用开发指南

Grid

网格布局控件

标签

标签名 描述 说明 子标签
grid 网格标签 网格布局,以网格形式来展示内容 item

属性

属性名 取值 描述
id 文本 id编码
style 样式
grid样式,包括:
cols 整数,>0,默认为3 网格列数
items 数组 获取grid中所有item的数组,只读

方法

方法名 参数 返回值 描述
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:GridItem对象 None 为grid添加一个item
remove(item:Object) item:GridItem对象 None 移除grid的一个item
clear() None None 移除grid中所有的item

GridItem

网格项

标签名 描述 说明
item 网格项子标签 grid的子标签,用来展示网格的一项内容

属性

属性名 取值 描述
id 文本 id编码
style 样式
grid-item样式,包括:
icon 文件名 网格项图标
badge 文本 网格项提示内容
href URL地址 下个页面的链接地址
target _self:当前窗口打开
_blank:新窗口打开,默认值
页面打开方式
confirm 文本 确认提示框信息,页面跳转或执行onclick脚本前提示是否要执行操作。
用"|"分割时"|"前面是标题,后面是内容。
onclick Javascript脚本 点击时触发的脚本

方法

方法名 参数 返回值 描述
css(name:String) name:样式名称 String 根据样式名称得到样式的值
css(name:String, value:String)
name:样式名称
value:样式值
None 设置单个样式
css(style:String) style:样式文本,多个样式用分号分隔 None 设置多个样式
css(style:Object) style:样式对象,键值对形式 None 设置多个样式
add(widget:Object) widget:Widget对象 None 为item添加一个widget控件
remove(widget:Object) widget:Widget对象 None 移除item的一个widget控件
clear() None None 移除item中所有的widget控件
contains(widget:Object) widget:Widget对象 Boolean 判断item中是否包含某一widget控件

标签示例

● 默认网格

<grid>
    <item icon="tab_weixin_normal.png"><label>微信</label></item>
    <item icon="tab_address_normal.png"><label>通信录</label></item>
    <item icon="tab_find_frd_normal.png"><label>找朋友</label></item>
    <item icon="tab_settings_normal.png"><label>设置</label></item>
</grid>

效果:

● 带提示的网格

<grid>
    <item icon="tab_weixin_normal.png"><label>微信</label></item>
    <item icon="tab_address_normal.png" badge="100"><label>通信录</label></item>
    <item icon="tab_find_frd_normal.png"><label>找朋友</label></item>
    <item icon="tab_settings_normal.png" badge="NEW"><label>设置</label></item>
</grid>

效果:

● 带链接的网格

<grid>
    <item icon="tab_weixin_normal.png" href="tab_weixin.html"><label>微信</label></item>
    <item icon="tab_address_normal.png" href="tab_address.html"><label>通信录</label></item>
    <item icon="tab_find_frd_normal.png" href="tab_find_frd.html"><label>找朋友</label></item>
    <item icon="tab_settings_normal.png" href="tab_settings.html"><label>设置</label></item>
</grid>

效果:

● 带确认提示的网格

<grid>
    <item icon="tab_weixin_normal.png" confirm="确认进入微信页面?" href="tab_weixin.html"><label>微信</label></item>
    <item icon="tab_address_normal.png" confirm="确认进入通信录页面?" href="tab_address.html"><label>通信录</label></item>
    <item icon="tab_find_frd_normal.png" confirm="确认进入找朋友页面?" href="tab_find_frd.html"><label>找朋友</label></item>
    <item icon="tab_settings_normal.png" confirm="确认进入设置页面?" href="tab_settings.html"><label>设置</label></item>
</grid>

效果:

● 设置网格列数

<grid cols="4">
    <item icon="tab_weixin_normal.png"><label>微信</label></item>
    <item icon="tab_address_normal.png"><label>通信录</label></item>
    <item icon="tab_find_frd_normal.png"><label>找朋友</label></item>
    <item icon="tab_settings_normal.png"><label>设置</label></item>
</grid>

效果:

● 设置网格行距

<grid style="vertical-spacing:50">
    <item icon="tab_weixin_normal.png"><label>微信</label></item>
    <item icon="tab_address_normal.png"><label>通信录</label></item>
    <item icon="tab_find_frd_normal.png"><label>找朋友</label></item>
    <item icon="tab_settings_normal.png"><label>设置</label></item>
</grid>

效果:

● 动态新增网格项

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function addItem() {
            var item = $C('<grid-item><item icon="tab_weixin_normal.png"><label>新增项</label></item></grid-item>');
            $('grid').add(item);
        }
    ]]>
    </script> 
    <page>
       <title>
            <center>
                <label>新增网格项</label>
            </center>
        </title>
        <content draggable="true">
            <button onclick="addItem()">addItem()</button>
            <grid id="grid">
                <item icon="tab_weixin_normal.png"><label>微信</label></item>
                <item icon="tab_address_normal.png"><label>通信录</label></item>
                <item icon="tab_find_frd_normal.png"><label>找朋友</label></item>
                <item icon="tab_settings_normal.png"><label>设置</label></item>
            </grid>
        </content>
    </page>
</imag>

动态新增网格的item,注意这里xml根节点是grid-item

示例下载

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