toggle组件是常用的按钮组件。

目录

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

一. 综述

toggle组件是平台封装的一个常用的按钮控件。可以切换按钮的开关状态。

组件路径:/UI2/system/components/justep/button/toggle
组件标识:$UI/system/components/justep/button/toggle

二. DOM结构

  • 典型dom结构1
<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: [String] 属性名称,取值范围:”disabled”、”label”、”checked”、”name”、”type”

>返回值

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-on

 

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

代码示例:

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

(2) toggle组件不显示文字

toggle-off

 

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

代码示例:

<span component="$UI/system/components/justep/button/toggle"
  class="x-toggle" xid="toggle3"
  ON=" " OFF=" ">
</span>
2、toggle控制密码是否显示明文

password-1

password2

 

 

  • 通过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中的数据

toggl

  • 通过设置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