radioGroup组件,表单单选组件。

目录

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

一. 综述

radioGroup组件,表单单选组件,用于表单中的单选

组件路径:/UI2/system/components/justep/select

组件标识:$UI/system/components/justep/select/radioGroup

二. DOM结构

  • 典型的dom结构
<span component="$UI/system/components/justep/select/radioGroup"
  class="x-radio-group" xid="radioGroup1" bind-ref="data2.ref('fValue')"
    bind-itemset="data1" bind-itemsetLabel="ref('fName')"
      bind-itemsetValue="ref('fName')"/>

三. 样式

  • x-radio-group

组件标识class

  • x-radio-group-lg,x-radio-group-sm,x-radio-group-xs

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

  • x-radio-group-vertical

排列方式

四. 属性

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

  • disabled
[boolean]禁用

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

  • bind-itemset
[string]显示项的数据绑定,通常指向Data组件

  • bind-itemsetValue
[string]itemset中表示数据的列

  • bind-itemsetLabel
[string]itemset中显示的列

  • itemStyle
[string]项上增加的样式

  • itemClass
[string]项上增加的class

五. 方法

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

  • 构造方法

new RadioGroup(cfg)
动态创建radioGroup组件

> 参数

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

> 返回值

radioGroup组件

> 例:

//在当前页面的parent节点下创建radioGroup组件
var radioGroup = new RadioGroup({
    "xid" : "demoRadioGroup",
    "bind-itemset" : "data1.datas",
    "bind-itemsetValue" : "ref('fValue')",
    "bind-itemsetLabel" : "ref('fLabel')",
    "parentNode" : this.getElementByXid("parent")
});
  • set

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

> 参数

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

> 返回值

void

> 例:

//设置radioGroup的disabled属性
this.comp("radioGroup1").set({
    "disabled":true,
})
  • get

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

> 参数

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

> 返回值

object

> 例:

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

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

> 参数

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

> 返回值

void

> 例:

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

六. 事件

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

event结构如下:

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

七. 操作

  • (无)

八. 案例

1、radioGroup的使用

  • 添加在radioGroup的class属性x-radio-group-vertical

代码示例:

<span component="$UI/system/components/justep/select/radioGroup"
   class="x-radio-group x-radio-group-vertical"
       xid="showRadioGroup" bind-ref="data2.ref('fValue')" bind-itemset="data1"
           bind-itemsetLabel="ref('fName')" bind-itemsetValue="ref('fName')"/>

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

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