我會嘗試回答您的備選問題。您可以創建一對元素 - 單選按鈕輸入和標籤 - 並根據需要附加到DOM。要創建,「男性」和「女性」按鈕,你可以這樣做:
var button1 = new RadioButtonInputElement();
button1.name = "sex";
button1.value = "male";
button1.attributes['id'] = "sex_male";
var button1_label = new LabelElement();
button1_label.attributes['for'] = button1.id;
button1_label.text="Male";
var button2 = new RadioButtonInputElement();
button2.name = "sex";
button2.value = "female";
button2.attributes['id'] = "sex_female";
var button2_label = new LabelElement();
button2_label.attributes['for'] = button2.id;
button2_label.text="Female";
使用new RadioButtonInputElement()
創建一個無線輸入;使用new LabelElement()
創建伴隨的標籤。
此代碼不是特別幹;如果你要生成很多這些,你可能需要將它重構成一個函數。事情是這樣的:
List createButtonWithLabel(name, value) {
var button = new RadioButtonInputElement();
button.name = name;
button.value = value;
button.attributes['id'] = "${name}_${value}";
var label = new LabelElement();
label.attributes['for'] = button.id;
label.text=value.toUpperCase();
return [button, label];
}
,然後用它是這樣的:
var form = new FormElement();
form.nodes.addAll(createButtonWithLabel('sex', 'male'));
form.nodes.addAll(createButtonWithLabel('sex', 'female'));
query('body').nodes.add(form);
這應該給你一個表格2個單選按鈕。
謝謝你的回答。我遵循,並可以看到它會起作用。但是,目標是使用web_ui來完成此操作,以避免在代碼中生成元素(這很單調乏味,而且還存在維護問題)。 –