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.

new inputEx.MenuField({ parentEl: 'container2', name: 'country', label: 'Your Country:', required:true, menuTrigger: 'mouseover', // open menu on hover instead of click menuPosition: ['tr','br'], // syntax : ['popup corner','invite corner'] menuItems: menuItems2 });