checkbox组件，表单多选组件。

目录

一、综述
二、DOM结构
三、样式
四、属性
五、方法
六、事件
七、操作
八、案例

一. 综述

checkbox组件，表单多选组件，用于表单中的多选

组件路径：/UI2/system/components/justep/button

组件标识：$UI/system/components/justep/button/checkbox

二. DOM结构

  • 典型的dom结构1
<span component="$UI/system/components/justep/button/checkbox"
  class="x-checkbox" xid="checkbox1" name="sex" label="男"
   value="male"/>
  • 典型的dom结构2
<span component="$UI/system/components/justep/button/checkbox"
  class="x-checkbox" xid="checkbox1" bind-ref="data.ref('sex')"/>

三. 样式

  • x-checkbox

组件标识class，

  • x-checkbox-lg，x-checkbox-sm，x-checkbox-xs

尺寸样式，用于在页面的展现大小

四. 属性

组件具有公共属性，请参考组件公共属性

  • name
[string]组件name，等价于html中的name属性，相同name的checkbox为一组

  • label
[string]显示名

  • value
[string]在该属性值和checkedValue相同时，默认选中

  • checkedValue
[string]选中后的value，当bind-ref的值为checkedValue时checked=true

  • checked
[boolean]是否选中

  • bind-ref
[string]数据感知的绑定表达式

五. 方法

组件具有公共方法，请参考组件公共方法

  • 构造方法

new CheckBox(cfg)
动态创建checkbox组件

> 参数

cfg:[object]，构造checkbox的初始参数，参考组件属性

> 返回值

checkbox组件

> 例:

//在当前页面的parent节点下创建checkbox组件
var checkbox = new Checkbox({
    "class" : "x-checkbox",
    "xid" : "checkbox1",
    "name" : 'sex',
    "label" : "女",
    "value" : "female",
    "parentNode" : this.getElementByXid("parent")
});
  • set

void set({name:val})
设置组件的非只读属性。

> 参数

name:[string] 组件的非只读属性
val:[object] 属性值

> 返回值

void

> 例:

//设置checkbox的checked属性
this.comp("checkbox1").set({
    "checked":true,
})
  • get

object get(name)
获取组件的属性值

> 参数

name:[string] 组件的属性名，参考组件属性

> 返回值

object

> 例:

//获取checked属性值
var checked = this.comp("checkbox1").get("checked");
  • val

void val(val)
给组件赋值或者取值

> 参数

val:[string] 组件的属性值，可选参数，当不写时为取值

> 返回值

void

> 例:

//获取checkbox的值
var checked = this.comp("checkbox1").val();

六. 事件

  • void onChange(object event)选中状态变化触发事件

event结构如下：

{
    "source": 组件的js对象,
    "checked": 选中状态,
    "value": 对应的值,
    "bindingContext":组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明,
}

七. 操作

  • （无）

八. 案例

1、checkbox的使用

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443