# inputEx - MenuField Usage

## Basic MenuField creation

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 inputEx.MenuField({ parentEl: 'container1', name: 'country', label: 'Your Country:', menuItems: menuItems });

## Test with more options

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 = YAHOO.util.Dom.get('container2'); var f = new 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.updatedEvt.subscribe(function(e,params) { var value = params[0]; 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); YAHOO.util.Event.addListener(button1, "click" ,function() { f.setValue("Fr"); }); var button2 = inputEx.cn('button', null, null, "SetValue with empty string"); div.appendChild(button2); YAHOO.util.Event.addListener(button2, "click" ,function() { f.setValue(''); }); var button3 = inputEx.cn('button', null, null, "GetValue"); div.appendChild(button3); YAHOO.util.Event.addListener(button3, "click" ,function() { alert(f.getValue()); }); var button4 = inputEx.cn('button', null, null, "Clear"); div.appendChild(button4); YAHOO.util.Event.addListener(button4, "click" ,function() { f.clear(); });