Widgets Creation
Widgets
Drop Down Widget
Dropdown is a common user interface. Drop down Nedil widget is capable of generating it's content from JSON or Select HTML element.

Basic Usage 
$.domLoaded(function() {
	
	$.get("#drp").widget("dropdown", CONFIG_JSON );	
	
}
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
NameTypeMust/OptionalDescription
sourceString/JSONMustLoads the drop down from the source content. if the source is an ID of select element, drop down is loaded with the corresponding options elements. Else JSON input can be provided. JSON has two values
nameDescription
textText of the particular option
valueValue of the particular option
nameStringOptionalName of the Element
onchangefunctionOptionalon change event will be called when the value is changed. Value of selected option is passed as parameter.
enabledBooleanOptionalif false, makes the dropdown disabled
dimJSONOptionalSets dimension of the dropdown
NameDescription
widWidth of the dropdown
htHeight of the dropdown
posJSONOptionalSets position of the dropdown
NameDescription
xHorizontal Position
yVertical Position

Methods
NameDescription
enable()Enables the dropdown
disable()Disables the dropdown

DropDown Widget Examples Example 1
JS HTML 
			$.domLoaded( function() {

				$.get("#parent1").widget("dropdown", {
					source : [{ value : "1",  text : "First"},
							  { value : "2", text : "Second"},
							  { value : "3",  text : "Third" },
							  { value : "4",  text : "Fourth" },
							  { value : "5",  text : "Fifth", selected : true},
							  { value : "6",  text : "Sixth" },
							  { value : "7",  text : "Seventh"},
							  { value : "8",  text : "Eight" },
							  { value : "9",  text : "Ninth" }],		
					dim : { wid : 200},

					name : "Location",
					onchange : function(val) {
						alert("Selected Value is " + val);
					}
				});	
				
				$.get("#parent2").widget("dropdown", {
					source : "#sour",		
					dim : { wid : 200}
				});	

			});
		<h4>JSON Input with onchange event</h4>

		<div id="parent1"></div>
		
		<h4>Select HTMLElement Input</h4>
		<div id="parent2"> 
			<select id="sour">
				<option value="tn">TamilNadu</option>
				<option value="py" selected="selected">Pondicherry</option>
				<option value="kr">Kerala</option>
				<option value="ap">Andhra Pradesh</option>
				<option value="ka">Karnataka</option>
			</select>
		</div>
Result
Example 2
JS HTML 
			$.domLoaded( function() {
				
				var tab;
				
				tab = $.get("#parent2").widget("dropdown", {
					source : "#sour",		
					dim : { wid : 200},
					enabled : false
				});	
				
				$.get("#sel1").on("click", function() {
					tab.enable();
				});				
				
				$.get("#sel2").on("click", function() {
					tab.disable();
				});				

			});
		<h4>Enable and Disable Functions</h4>
		<input type="button" value="Enable" id="sel1" />
		<input type="button" value="Disable" id="sel2" />
		
		<br/>
		<br/>
		<div id="parent2"> 
			<select id="sour">
				<option value="tn">TamilNadu</option>
				<option value="py" selected="selected">Pondicherry</option>
				<option value="kr">Kerala</option>
				<option value="ap">Andhra Pradesh</option>
				<option value="ka">Karnataka</option>
			</select>
		</div>
Result