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(); });