toggle组件

<span component="$UI/system/components/justep/button/toggle"
  class="x-toggle"
  xid="toggle3">
</span>

• 典型dom结构2

<span component="$UI/system/components/justep/button/toggle"
  class="x-toggle" xid="toggle8"
  bind-ref="data1.ref('status')"
  ON="是" OFF="否"
  checkedValue="1">
</span>

三. 样式

• x-toggle

组件标识class，基础的样式定义

• x-toggle-lg

大号的toggle样式

• x-toggle-sm

中号的toggle样式

• input-sm

小号的toggle样式

四. 属性

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

• name

组件name，跟html中的name属性相同，相同name的Radio为一组，选中是互斥的

• label

组件显示名称，包括两部分：on: 选中名称 off: 未选中名称

• checked

是否选中

• type

组件类型，取值范围：checkbox/radio;

• checkedvalue

选中后的value，checkedValue如果设置了，选中后是这个值，否则是null或undefined，如果没有设置，选中后是true，没有选中是false

• bind-ref

数据感知的绑定表达式

• disabled

禁用

五. 方法

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

• set

void set (json arg)
设置属性值

>参数

arg 属性值对 结构如下：
{
“disabled” : 禁用，
“label” : 显示名，包括两部分：on: 选中名称 off: 未选中名称；
“checked” : 是否选中
“name” : 组件name，等价于html中的name属性，相同name的Radio为一组，选中是互斥的
“type” : 类型，checkbox/radio
}

> 返回值

void

//设置toggle的；label属性
this.comp('toggle').set(label:{on:'开',off:'关'})

• get

Object get (String name)
获得input属性值

> 参数

name:

>返回值

Object

//获得toggle组件的属性值
 this.comp('toggle').get('label');

六. 事件

public void onChange (object event)[回调型事件]值变化事件

>参数

object event

event结构如下：

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

>例

Model.prototype.toggleChange = function(event) {
	alert(" 新值是：" + event.value);
};

七. 操作

• (无)

八. 案例

1、toggle组件实现文字显示效果

(1) toggle组件显示文字

• 通过设置toggle组件的label属性，实现显示字体和不显示字体。

代码示例：

<span component="$UI/system/components/justep/button/toggle"
  class="x-toggle" xid="toggle1"
  ON="测试开" OFF="测试关">
</span>

(2) toggle组件不显示文字

• 通过对toggle组件的label属性赋值，在源码中对ON和OFF赋空值，实现不显示文字的效果。

代码示例：

<span component="$UI/system/components/justep/button/toggle"
  class="x-toggle" xid="toggle3"
  ON=" " OFF=" ">
</span>

2、toggle控制密码是否显示明文

• 通过js操作password组件的属性，实现密码的密文和明文的却换。

代码示例：

Model.prototype.toggle2Change = function(event) {
	var toggleValue = this.comp("toggle2").val();
	if (toggleValue) {
		$(".text").attr({
		  "component" : "$UI/system/components/justep/input/input",
		  "type" : "text"
		});
	} else {
		$(".text").attr({
		  "component" : "$UI/system/components/justep/input/password",
		  "type" : "password"
		});
	}
};

<input component="$UI/system/components/justep/input/password"
  class="form-control pull-left x-edit text"
  xid="password1" style="width:80%;"/>
<span component="$UI/system/components/justep/button/toggle"
  class="x-toggle pull-left" xid="toggle2" ON="abc" OFF="***"
  onChange="toggle2Change"/>

3、toggle像checkbox一样显示data中的数据

• 通过设置toggle组件的属性，实现像checkbox一样的效果。

代码示例：

<span component="$UI/system/components/justep/button/toggle"
  class="x-toggle" xid="toggle8"
  bind-ref="data1.ref('status')" ON="是" OFF="否"
  checkedValue="1">
</span>

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

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