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