CheckBox 组件

Package	laya.ui
类	public class CheckBox
Inheritance	CheckBox Button Component Sprite Node EventDispatcher Object

1、CheckBox 组件显示一个小方框，该方框内可以有选中标记，CheckBox 组件还可以显示可选的文本标签，默认该标签位于 CheckBox 右侧。

2、CheckBox 使用 dataSource 赋值时的的默认属性是：selected。

3、CheckBox 继承自 Button，所以使用起来基本与《LayaAir UI 组件 # Button》无异。

Property（属性）
dataSource : * ，[override] 数据赋值，通过对UI赋值来控制UI显示逻辑。简单赋值会更改组件的默认属性，使用大括号可以指定组件的任意属性进行赋值。

Method
CheckBox(skin:String = null, label:String) ，创建一个新的 CheckBox 组件实例。skin:String (default = null) — 皮肤资源地址。label:String — 文本标签的内容。

默认checkbox 资源

1、CheckBox 组件的选择框图片是 CheckBox 组件的皮肤（skin），图片资源命名通常是 check、checkbox或以check_为前缀。

2、CheckBox 组件资源通常是由三态或两态的 skin 图片组成，最上面第一个小框为未选中状态，中间的小框为鼠标悬停的状态，底部小框为选中时状态。

3、使用方式与《LayaAir UI 组件 # Button》雷同。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(600, 400, Laya.WebGL);
Laya.stage.bgColor = "#FFF";//设置舞台背景颜色//资源路径-复选框皮肤路径，这里使用系统提供的comp图集中的checkbox.png
var skin_checkbox = "comp/checkbox.png";
//加载系统默认的图集资源，加载成功后执行onLoad回调方法
Laya.loader.load("res/atlas/comp.atlas", Laya.Handler.create(this, onLoaded));
function onLoaded() {//创建第1个复选框var checkbox_1 = add_checkbox("Java");checkbox_1.pos(30, 10);//设置checkbox的坐标位置//创建第2个复选框var checkbox_2 = add_checkbox("Android");checkbox_2.selected = true;//设置为默认选中状态checkbox_2.pos(30, 50);//设置checkbox的坐标位置//创建第3个复选框var checkbox_3 = add_checkbox("LayaBox");checkbox_3.pos(30, 90);//设置checkbox的坐标位置
}//添加复选框组件。labelText 为复选框旁边的显示文本
//因为 CheckBox 继承在 Button，所以使用复选框与Button组件基本一致
function add_checkbox(labelText){var checkbox = new Laya.CheckBox(skin_checkbox);//创建 CheckBox 实例checkbox.label = labelText;//设置文本标签内容checkbox.labelSize = 20;//label文本字体大小Laya.stage.addChild(checkbox);//添加到舞台上显示return checkbox;
}

自定义组件皮肤

1、操作与《LayaAir UI 组件 # Button》中的自定义按钮资源基本一致。

2、自己 PS 一张复选框的皮肤图片，尺寸没有强制要求，建议小尺寸，且等分。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(600, 400, Laya.WebGL);
Laya.stage.bgColor = "#FFF";//设置舞台背景颜色//资源路径-复选框皮肤路径，使用自定义皮肤,bin 目录下
var skin_checkbox = "ui/checkbox_myself.png";
//加载皮肤成功后执行onLoad回调方法
Laya.loader.load(skin_checkbox, Laya.Handler.create(this, onLoaded));
function onLoaded() {//创建第1个复选框var checkbox_1 = add_checkbox("Java");checkbox_1.pos(30, 10);//设置checkbox的坐标位置//创建第2个复选框var checkbox_2 = add_checkbox("Android");checkbox_2.selected = true;//设置为默认选中状态checkbox_2.pos(30, 50);//设置checkbox的坐标位置//创建第3个复选框var checkbox_3 = add_checkbox("LayaBox");checkbox_3.pos(30, 90);//设置checkbox的坐标位置
}//添加复选框组件。labelText 为复选框旁边的显示文本
//因为 CheckBox 继承在 Button，所以使用复选框与Button组件基本一致
function add_checkbox(labelText){var checkbox = new Laya.CheckBox(skin_checkbox);//创建 CheckBox 实例checkbox.label = labelText;//设置文本标签内容checkbox.labelSize = 20;//label文本字体大小Laya.stage.addChild(checkbox);//添加到舞台上显示return checkbox;
}

获取选中状态

selected : Boolean ，设置与获取按钮的选中状态。如果值为true，表示该对象处于选中状态，否则该对象处于未选中状态。

1、上面的例子中已经示范了设值 selected=true 即可让复选框默认选中，同理也可以使用 selected 属性获取选取状态。

//初始化引擎，设置宽高并开启WebGL渲染模式
Laya.init(600, 400, Laya.WebGL);
Laya.stage.bgColor = "#FFF";//设置舞台背景颜色
var label_show;//标签对象//资源路径-复选框皮肤路径，自定义皮肤，位于 bin 目录下
var skin_checkbox = "ui/checkbox_myself.png";
//加载皮肤成功后执行onLoad回调方法
Laya.loader.load(skin_checkbox, Laya.Handler.create(this, onLoaded));
function onLoaded() {//创建复选框var checkbox = add_checkbox("LayaBox");checkbox.pos(30, 10);//设置checkbox的坐标位置showLabel();checkbox.on(Laya.Event.CLICK, this, function () {//为复选框绑定单击事件if( checkbox.selected == true){label_show.text = "已选中";} else {label_show.text = "未选中";}});
}//添加复选框组件。labelText 为复选框旁边的显示文本
//因为 CheckBox 继承在 Button，所以使用复选框与Button组件基本一致
function add_checkbox(labelText) {var checkbox = new Laya.CheckBox(skin_checkbox);//创建 CheckBox 实例checkbox.label = labelText;//设置文本标签内容checkbox.labelSize = 20;//label文本字体大小Laya.stage.addChild(checkbox);//添加到舞台上显示return checkbox;
}//显示一个标签
function showLabel(){label_show = new Laya.Label();//创建标签对象label_show.fontSize = 40;//设置标签字体为20pxlabel_show.color = "#CC6633";//字体颜色白色label_show.pos(30,50);//标签显示位置Laya.stage.addChild(label_show);//添加到舞台
}

更多内容可以参考官网：https://ldc.layabox.com/doc/?nav=zh-js-2-3-2

LayaAir UI 组件 # CheckBox 复选框相关推荐

Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框
1.Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目配置项类型说明 boxLabel String 紧靠复选框的文字描述 boxLabelAl ...
Android基础入门教程——2.3.5.RadioButton(单选按钮)Checkbox(复选框)
Android基础入门教程--2.3.5.RadioButton(单选按钮)&Checkbox(复选框) 标签(空格分隔): Android基础入门教程本节引言: 本节给大家带来的是Ando ...
js checkbox复选框实现单选功能
本文仅供学习交流使用,demo下载见文末 js checkbox复选框实现单选功能 <script type="text/javascript">$(":ch ...
checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
android勾选控件_Android中CheckBox复选框控件使用方法详解
CheckBox复选框控件使用方法,具体内容如下一.简介 1. 2.类结构图二.CheckBox复选框控件使用方法这里是使用java代码在LinearLayout里面添加控件 1.新建Linea ...
js获取checkbox复选框获取选中的选项
分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数. js实现: var form = document. ...
checkbox取值 php_php获取checkbox复选框的内容
由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. 复选二复选三复选 ...
html5复选框控制按钮状态,HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件...
本篇教程探讨了HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < ...
html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
Flutter Checkbox 复选框
Flutter 复选框有两种:一是精简版Checkbox复选框 ,二是自带标题和副标题CheckboxListTile复选框参数详解属性说明 Checkbox 复选框 value 是否选中此 ...

LayaAir UI 组件 # CheckBox 复选框

CheckBox 组件

默认checkbox 资源

自定义组件皮肤

获取选中状态

LayaAir UI 组件 # CheckBox 复选框相关推荐

最新文章

热门文章