Use the following code to create a basic inputEx MenuField.
| 1 | var menuItems = [ |
| 2 | { |
| 3 | text:'America', |
| 4 | submenu:{ |
| 5 | itemdata:[ |
| 6 | {text:'United States of America',value:'Us'}, |
| 7 | {text:'Canada',value:'Ca'} |
| 8 | ] |
| 9 | } |
| 10 | }, |
| 11 | { |
| 12 | text:'Europe', |
| 13 | submenu:{ |
| 14 | itemdata:[ |
| 15 | { |
| 16 | text:'Western Europe', |
| 17 | submenu:{ |
| 18 | itemdata:[ |
| 19 | {text:'France',value:'Fr'}, |
| 20 | {text:'United Kingdom',value:'Uk'}, |
| 21 | {text:'Germany',value:'De'} |
| 22 | ] |
| 23 | } |
| 24 | }, |
| 25 | { |
| 26 | text:'Eastern Europe', |
| 27 | submenu:{ |
| 28 | itemdata:[ |
| 29 | {text:'Poland',value:'Pl'}, |
| 30 | {text:'Czech Republic',value:'Cz'}, |
| 31 | {text:'Slovakia',value:'Sk'} |
| 32 | ] |
| 33 | } |
| 34 | } |
| 35 | ] |
| 36 | } |
| 37 | }, |
| 38 | { |
| 39 | text:'Africa', |
| 40 | submenu:{ |
| 41 | itemdata:[ |
| 42 | {text:'Senegal',value:'Sn'}, |
| 43 | {text:'Madagascar',value:'Mg'} |
| 44 | ] |
| 45 | } |
| 46 | } |
| 47 | ]; |
| 48 | |
| 49 | new inputEx.MenuField({ |
| 50 | parentEl: 'container1', |
| 51 | name: 'country', |
| 52 | label: 'Your Country:', |
| 53 | menuItems: menuItems |
| 54 | }); |
| view plain | print | ? |
Menu triggered on hover, displayed below the text invite, etc.
| 1 | var menuItems2 = [ |
| 2 | { |
| 3 | text:'America', |
| 4 | submenu:{ |
| 5 | itemdata:[ |
| 6 | {text:'United States of America',value:'Us'}, |
| 7 | {text:'Canada',value:'Ca'} |
| 8 | ] |
| 9 | } |
| 10 | }, |
| 11 | { |
| 12 | text:'Europe', |
| 13 | submenu:{ |
| 14 | itemdata:[ |
| 15 | { |
| 16 | text:'Western Europe', |
| 17 | submenu:{ |
| 18 | itemdata:[ |
| 19 | {text:'France',value:'Fr'}, |
| 20 | {text:'United Kingdom',value:'Uk'}, |
| 21 | {text:'Germany',value:'De'} |
| 22 | ] |
| 23 | } |
| 24 | }, |
| 25 | { |
| 26 | text:'Eastern Europe', |
| 27 | submenu:{ |
| 28 | itemdata:[ |
| 29 | {text:'Poland',value:'Pl'}, |
| 30 | {text:'Czech Republic',value:'Cz'}, |
| 31 | {text:'Slovakia',value:'Sk'} |
| 32 | ] |
| 33 | } |
| 34 | } |
| 35 | ] |
| 36 | } |
| 37 | }, |
| 38 | { |
| 39 | text:'Africa', |
| 40 | submenu:{ |
| 41 | itemdata:[ |
| 42 | {text:'Senegal',value:'Sn'}, |
| 43 | {text:'Madagascar',value:'Mg'} |
| 44 | ] |
| 45 | } |
| 46 | } |
| 47 | ]; |
| 48 | |
| 49 | var div = YAHOO.util.Dom.get('container2'); |
| 50 | |
| 51 | var f = new inputEx.MenuField({ |
| 52 | parentEl: 'container2', |
| 53 | name: 'country', |
| 54 | label: 'Your Country:', |
| 55 | required: true, |
| 56 | typeInvite: 'Hover this text to select a country', |
| 57 | menuTrigger: 'mouseover', |
| 58 | menuPosition: ['tr','br'], |
| 59 | menuItems: menuItems2 |
| 60 | }); |
| 61 | |
| 62 | var logDiv = inputEx.cn('div', null, null, "Log :"); |
| 63 | div.appendChild(logDiv); |
| 64 | f.updatedEvt.subscribe(function(e,params) { |
| 65 | var value = params[0]; |
| 66 | logDiv.innerHTML += "Updated at "+(new Date())+" with value "+value; |
| 67 | logDiv.appendChild(inputEx.cn('br')); |
| 68 | }); |
| 69 | |
| 70 | var button1 = inputEx.cn('button', null, null, "SetValue with 'Fr' (France)"); |
| 71 | div.appendChild(button1); |
| 72 | YAHOO.util.Event.addListener(button1, "click" ,function() { |
| 73 | f.setValue("Fr"); |
| 74 | }); |
| 75 | var button2 = inputEx.cn('button', null, null, "SetValue with empty string"); |
| 76 | div.appendChild(button2); |
| 77 | YAHOO.util.Event.addListener(button2, "click" ,function() { |
| 78 | f.setValue(''); |
| 79 | }); |
| 80 | |
| 81 | var button3 = inputEx.cn('button', null, null, "GetValue"); |
| 82 | div.appendChild(button3); |
| 83 | YAHOO.util.Event.addListener(button3, "click" ,function() { |
| 84 | alert(f.getValue()); |
| 85 | }); |
| 86 | |
| 87 | var button4 = inputEx.cn('button', null, null, "Clear"); |
| 88 | div.appendChild(button4); |
| 89 | YAHOO.util.Event.addListener(button4, "click" ,function() { |
| 90 | f.clear(); |
| 91 | }); |
| view plain | print | ? |