Pergola radio and check buttons

For a group of RadioButton instances you define an owner object (in this example the instance property radio of the panel, which acts as a placeholder). The properties options and selection are dynamically added to manage the state of the buttons. User Functions can be assigned to the buttons and/or to the owner object.

For a group of CheckBox instances you can define an owner object. The property checked (array) is dynamically added to manage the state of the check-boxes. User Functions can be assigned to the buttons and/or to the owner object.

View as standalone SVG

var radioButton1 = new pergola.RadioButton(),
    radioButton2 = new pergola.RadioButton(),
    checkBox1 = new pergola.CheckBox(),
    checkBox2 = new pergola.CheckBox();

radioButton1.build({
  owner : optionsPanel.radio,
  parent : optionsPanel.control,
  x : 60,
  y : 80,
  caption : {
    position : "right",
    text : {
      textNode : "Option 1",
      "pointer-events" : "none"
    }
  },
  isDefault : true
});

radioButton2.build({
  owner : optionsPanel.radio,
  parent : optionsPanel.control,
  x : 60,
  y : 108,
  caption : {
    position : "right",
    text : {
      textNode : "Option 2",
      "pointer-events" : "none"
    }
  }
});

checkBox1.build({
  owner : optionsPanel.check,
  parent : optionsPanel.control,
  x : 53,
  y : 140,
  checked : false,
  caption : {
    position : "right",
    text : {
      x : 34,
      y : 11,
      textNode : "Option 3",
      "pointer-events" : "none"
    }
  }
});

checkBox2.build({
  owner : optionsPanel.check,
  parent : optionsPanel.control,
  x : 53,
  y : 168,
  checked : false,
  caption : {
    position : "right",
    text : {
      x : 34,
      y : 11,
      textNode : "Option 4",
      "pointer-events" : "none"
    }
  }
});

Radio Button and Check-box