값 선택기(Value Picker)로서의 메뉴(Menu)
Menu 컨트롤을 단순 값 선택기로 사용할 수 있습니다. ComboBox 컨트롤을 확장하여, ComboBox에서와 같이 컨트롤의 selectedValue 속성에 변수를 바인딩할 수 있습니다.
예시: selectedIndexChanged 이벤트를 사용하여 메뉴의 헤더를 업데이트하고 현재 값을 표시합니다:
HTML
<div id="valuePicker"></div>Javascript
import * as input from '@mescius/wijmo.input';
function init() {
let valuePicker = new input.Menu('#valuePicker', {
// update header to show current selection
selectedIndexChanged: (sender) => {
if (sender.selectedIndex > -1) {
sender.header = `Tax: <b>${sender.selectedItem.header}</b>`;
}
},
//
// populate menu after hooking up the selectedIndexChanged event
displayMemberPath: 'header',
selectedValuePath: 'value',
itemsSource: [
{ header: 'Exempt', value: 0 },
{ header: '1%', value: 0.01 },
{ header: '5%', value: 0.05 },
{ header: '8.5%', value: 0.085 },
{ header: '10%', value: 0.10 },
{ header: '20%', value: 0.20 }
],
selectedValue: 0.085
});
}