zoukankan      html  css  js  c++  java
  • EUI RadioButton,RadioButtonGroup实现多选项按钮

     

    官网单选框教程:http://developer.egret.com/cn/github/egret-docs/extension/EUI/controls/radioButton/index.html

     

    这里和官网教程不一样,官网是在代码里设置RadioButtonGroup,以及RadioButton的value值。

    这里是在exml中源码里设置。

    一 自动创建的RadioButtonGroup

    RadioButtonGroup不能在exml里拖动创建,也不能在exml源码里创建。因为wing没提供...

    一个exml上摆放的多个RadioButton,未指定groupName情况下,会为他们自动创建一个唯一RadioButtonGroup。

     

     

    若需要手动为这些RaidoButton分组,则需要在exml源码里设置groupName属性。

    下面代码为两个RadioButton分别指定groupName为“a”和“b”,相当于创建了两个RadioButtonGroup。

    <e:RadioButton id="rd1" label="单选框" x="71" y="117" value="1" groupName="a"/>
    <e:RadioButton id="rd2" label="单选框" x="70" y="174" value="2" groupName="b"/>

     

    二 监听单选事件

    因为exml上没有RadioButtonGroup,所以只能监听任意一个RadioButton,调用RadioButton.group值来获取RadioButtonGroup。

    private rd1:eui.RadioButton;
    public childrenCreated(){
         this.rd1.group.addEventListener(egret.Event.CHANGE, this.onChange, this);
    }
        
    private onChange(e:egret.Event){
          var rbGroup:eui.RadioButtonGroup = e.target;
          console.log(rbGroup.selectedValue);  //点击的RadioButton对象的value值
          console.log(rbGroup.selection);      //点击的RadioButton对象
    }

     

    RadioButton的value值需要在exml源码里设置。

    若没有手动设置value值,则会自动将label值作为value值。

    下面代码为两个RadioButton设置value值为“1”和“2”。

    <e:RadioButton id="rd1" label="单选框" x="71" y="117" value="1"/>
    <e:RadioButton id="rd2" label="单选框" x="70" y="174" value="2"/>

     

    三 设置RadioButton皮肤

    可直接在快捷面板中设置正常、按下等皮肤

     

  • 相关阅读:
    SpreadJS V13.0发布,聚焦表单设计与数据交互,让您的工作效率突飞猛进!
    springboot---redis缓存的使用
    springboot logback日志的使用
    Https与Http的区别以及Https的解说
    maven的使用解说
    Spring SpringMVC myBatis(简称SSM)理解
    抽象类与接口的区别
    Hadoop综合大作业
    hive基本操作与应用
    熟悉HBase基本操作
  • 原文地址:https://www.cnblogs.com/gamedaybyday/p/6247375.html
Copyright © 2011-2022 走看看