参考 createRadio()

createRadio()

创建一个单选按钮元素。

参数是可选的。如果传递了一个字符串，如 let myRadio = createSelect('food')，那么每个单选选项将 有 "food" 作为其 name 参数：<input name="food"></input>。 如果传递了一个现有的 <div></div> 或 <span></span> 元素，如 let myRadio = createSelect(container)， 它将 成为单选按钮的父元素。

单选按钮扩展了 p5.Element 类，增加了一些 有用的方法来管理选项：

  • myRadio.option(value, [label]) 向菜单添加一个选项。 第一个参数，value，是一个字符串，设置选项的 值和标签。第二个参数，label，是可选的。如果提供，它设置显示的标签为 value。如果一个选项 的 value 已经存在，其标签将被更改��返回其值。
  • myRadio.value() 返回当前选中选项的 值。
  • myRadio.selected() 返回当前选中的 选项。
  • myRadio.selected(value) 选择给定的选项并将 它作为一个 HTMLInputElement 返回。
  • myRadio.disable(shouldDisable) 如果传递 true 则启用整个单选按钮，如果传递 false 则禁用它。

示例

let myRadio;

function setup() {
createCanvas(100, 100);

// Create a radio button element and place it
// in the top-left corner.
myRadio = createRadio();
myRadio.position(0, 0);
myRadio.size(60);

// Add a few color options.
myRadio.option('red');
myRadio.option('yellow');
myRadio.option('blue');

// Choose a default option.
myRadio.selected('yellow');

describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.');
}

function draw() {
// Set the background color using the radio button.
let g = myRadio.value();
background(g);
let myRadio;

function setup() {
createCanvas(100, 100);

// Create a radio button element and place it
// in the top-left corner.
myRadio = createRadio();
myRadio.position(0, 0);
myRadio.size(50);

// Add a few color options.
// Color values are labeled with
// emotions they evoke.
myRadio.option('red', 'love');
myRadio.option('yellow', 'joy');
myRadio.option('blue', 'trust');

// Choose a default option.
myRadio.selected('yellow');

describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.');
}

function draw() {
// Set the background color using the radio button.
let myRadio;

function setup() {
createCanvas(100, 100);

// Create a radio button element and place it
// in the top-left corner.
myRadio = createRadio();
myRadio.position(0, 0);
myRadio.size(50);

// Add a few color options.
myRadio.option('red');
myRadio.option('yellow');
myRadio.option('blue');

// Choose a default option.
myRadio.selected('yellow');

// Create a button and place it beneath the canvas.
let btn = createButton('disable');
btn.position(0, 100);

// Call disableRadio() when btn is pressed.
btn.mousePressed(disableRadio);

describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.');

语法

createRadio([containerElement])
createRadio([name])
createRadio()

参数

containerElement
对象:

容器 HTML 元素，可以是 <div></div> 或 <span></span>。

name
字符串:

分配给每个选项的 <input></input> 元素的 name 参数。

Returns

p5.Element: 新的 p5.Element 对象。
Notice any errors or typos? Please let us know. Please feel free to edit src/dom/dom.js and open a pull request!

相关参考