Use the following code to create a basic inputEx MenuField.
var menuItems = [
{
text:'America',
submenu:{
itemdata:[
{text:'United States of America',value:'Us'},
{text:'Canada',value:'Ca'}
]
}
},
{
text:'Europe',
submenu:{
itemdata:[
{
text:'Western Europe',
submenu:{
itemdata:[
{text:'France',value:'Fr'},
{text:'United Kingdom',value:'Uk'},
{text:'Germany',value:'De'}
]
}
},
{
text:'Eastern Europe',
submenu:{
itemdata:[
{text:'Poland',value:'Pl'},
{text:'Czech Republic',value:'Cz'},
{text:'Slovakia',value:'Sk'}
]
}
}
]
}
},
{
text:'Africa',
submenu:{
itemdata:[
{text:'Senegal',value:'Sn'},
{text:'Madagascar',value:'Mg'}
]
}
}
];
new Y.inputEx.MenuField({
parentEl: 'container1',
name: 'country',
label: 'Your Country:',
menuItems: menuItems
});
Menu triggered on hover, displayed below the text invite, etc.
var menuItems2 = [
{
text:'America',
submenu:{
itemdata:[
{text:'United States of America',value:'Us'},
{text:'Canada',value:'Ca'}
]
}
},
{
text:'Europe',
submenu:{
itemdata:[
{
text:'Western Europe',
submenu:{
itemdata:[
{text:'France',value:'Fr'},
{text:'United Kingdom',value:'Uk'},
{text:'Germany',value:'De'}
]
}
},
{
text:'Eastern Europe',
submenu:{
itemdata:[
{text:'Poland',value:'Pl'},
{text:'Czech Republic',value:'Cz'},
{text:'Slovakia',value:'Sk'}
]
}
}
]
}
},
{
text:'Africa',
submenu:{
itemdata:[
{text:'Senegal',value:'Sn'},
{text:'Madagascar',value:'Mg'}
]
}
}
];
var div = Y.one('#container2');
var f = new Y.inputEx.MenuField({
parentEl: 'container2',
name: 'country',
label: 'Your Country:',
required: true,
typeInvite: 'Hover this text to select a country',
menuTrigger: 'mouseover',
menuPosition: ['tr','br'],
menuItems: menuItems2
});
var logDiv = inputEx.cn('div', null, null, "Log :");
div.appendChild(logDiv);
f.on('updated', function(value) {
logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value;
logDiv.appendChild(inputEx.cn('br'));
});
var button1 = inputEx.cn('button', null, null, "SetValue with 'Fr' (France)");
div.appendChild(button1);
Y.one(button1).on('click' ,function() {
f.setValue("Fr");
});
var button2 = inputEx.cn('button', null, null, "SetValue with empty string");
div.appendChild(button2);
Y.one(button2).on('click' ,function() {
f.setValue('');
});
var button3 = inputEx.cn('button', null, null, "GetValue");
div.appendChild(button3);
Y.one(button3).on('click' ,function() {
alert(f.getValue());
});
var button4 = inputEx.cn('button', null, null, "Clear");
div.appendChild(button4);
Y.one(button4).on('click' ,function() {
f.clear();
});