Button

简介

Button是按钮控件。当该控件被触碰到时，能够触发相应的事件。

Sample

演示Button控件触发tap事件的效果，当Button被按下时，控件的文本将更换为after。

控件布局

layout

Button控件的bingtap属性设置为onBtn，控件文本设置为Before。

JS 代码

Button触发的事件函数如下：

    onBtn : function(event){
        // 设定控件的文本内容，并更新
        this.setData({button1 : {value : 'after',refresh: true}}); 
    }

效果

sample效果

Button 属性

公共属性

  • 控件类型

    默认 button，且不可改动。

  • 透明度

    设置背景颜色的透明度，范围： 0 ~ 255。也可以在背景颜色中设定。

    注：当背景图片的设定不为空时，将自动设置为 0。

名称

  • 控件名称

    设定控件的名称。

    在JS脚本中，可根据控件名称来指定控件，并对其进行设定或操作。

设计

  • 控件锁定

    选项：True/False

    设定该控件是否锁定。

    如果设定值为True,则设计器中无法移动该控件。

  • 是否隐藏控件

    选项：True/False

    设定该控件是否需要隐藏。

    如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。

    当控件已隐藏时，可通过在工程管理器中点击来选中该控件。

调用属性

  • bindtap

    绑定tap事件，如果设定值为onTap时，当button控件被按下(即触碰)到时，将调用JS脚本中的Page对象中的onTap函数。

图片

  • 背景图片

    设定控件的背景图片，不支持缩放，且居中显示。

外观

  • 背景颜色

    设定背景颜色，设定背景颜色的ARGB值。

    可打开颜色选择器，通过颜色选择器修改RGB值。

    Alpha值(即透明度)，可以直接修改设定值 或 修改透明度的值。背景颜色的透明度与属性透明度的值会自动保持一致。

  • 点击图片

    设定当button被按下时，显示的图片

  • 前景色

    设定控件中文本内容的颜色，设定值为ARGB值。

    可打开颜色选择器，通过颜色选择器修改设定RGB值。

    Alpha值(即透明度)需要通过手动修改设定。

    当字体为点阵字体时（自带字体库均为点阵字体），alpha值设定无效。当字体为ttf字体时，alpha值有效

  • 显示图片

    设定当button不处于按下状态时，显示的图片

位置属性

  • x坐标点

    设定 控件的左上角 相对于 父控件的左上角 的横坐标。

  • y坐标点

    设定 控件的左上角 相对于 父控件的左上角 的纵坐标。

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度

文本

  • 控件文本

    设定控件上显示的文本内容。当字体选项为asc 点阵字体时，无法显示非英文字符。

  • 文本对齐

    选项 : TopLeft/TopMiddle/TopRight/CenterLeft/CenterMiddle/CenterRight/BottomLeft/BottomMiddle/BottomRight

    设定文本内容在控件中的对齐方式。

  • 字体

    设定文本字体。

    自带点阵字体，字体大小为16，不可更改，否则会显示错误。

    如果想要设定其他字体，请先在字体库中添加对应的ttf文件。

  • 字体大小

    设定文本内容的字体大小。

长按功能

  • 间隔(毫秒)

    设定当使能长按为True，且使能单次为Flase时，触发tap事件的时间间隔

  • 使能单次

    选项： True/False

    设定当使能长按为True时，Tap事件是否仅触发一次。

  • 使能长按

    选项: True/False

    设定控件时候能够长按。

setData

  • 控件自有属性

    属性名 类型 描述 注解
    text String Button控件文本
    norImg Object Button控件默认显示图片
    downImg Object Button控件按下时显示图片

  • setData 设置更改属性示例

    示例代码 注解
    this.setData({button1 : 'Button'}) 将 id 为 button1 的 Button 控件文本设置为 Button
    this.setData({button1 : {value : 'Button'}}) 将 id 为 button1 的 Button 控件文本设置为 Button
    this.setData({button1 : {norImg ：'nor.png'}}) 将 id 为 button1 的 Button 控件默认显示图片设置为 nor.png
    this.setData({button1 : {downImg ：'down.png'}}) 将 id 为 button1 的 Button 控件按下时显示图片设置为 down.png