Button Widget
Buttons are a common user interface component in any application. Nedil JS button widget can be used to create multiple button widgets with different customization.

Usage
$.domLoaded(function() {
	
	$.get("#btn1").widget("button", CONFIG_PARAM_JSON);		
	
}
Conifiguring Options
NameTypeMust/OptionalDescription
textStringOptionalSets the text of a button. If not provided, innerText will be used
enabledBooleanOptionalTo enable or disable a button at the time of creation. default is true
iconJSONOptional To create button with icon in JSON format. Fields are explained below
NameTypeMust/OptionalDescription
srcStringOptionalPath to icon image
posStringOptionalPosition of the icon. Allowed values are "top"/"bottom"/"left"/"right"
widNumberOptionalWidth of the icon
htNumberOptionalHeight of the icon
eventJSONOptional Attaching events to the button. All allowed events can be listed with event name and handler
NameTypeMust/OptionalDescription
clickfunctionOptionalAn handler function
any event namefunctionOptionalAn handler function

Methods
NameDescription
disable()To disable the button widget
enable()To enable a disabled button widget

Button Widget Example
Various types of buttons are created using Nedil default button widget.
JS HTML
			$.domLoaded(function() {
			
				// simple button widget
				$.get("#btn1").widget("button");
				
				// button widget with click event
				$.get("#btn2").widget("button", {
					text : "Click Me!!!", 
					event : { 
						"click" : function() {
							alert("Hello World"); 
						} 
					}
				});
				
				//  disbaled button widget to showcase enable(), disable() methods
				var disBtn = $.get("#btn3").widget("button", {
					text : "Disabled", 
					enabled : false, 
					event : { 
						"click" : function() {
							alert("Hello World"); 
						} 
					}
				});	

				// icon button
				$.get("#btn4").widget("button", {
					text : "Big Icon",					
					icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
						pos : "left", 
						wid : 100,
						ht : 100
					}
				});

				$.get("#btn5").widget("button", {
					text : "Small Icon", 
					icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
						pos : "left", 
						wid : 50,
						ht : 50
					}
				});	


				$.get("#btn6").widget("button", {
					text : "Disabled Icon", 
					enabled : false, 
					icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
						pos : "left", 
						wid : 50,
						ht : 50
					}
				});

				$.get("#btn7").widget("button", {
					text : "Top Icon", 
					icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
						pos : "top", 
						wid : 50,
						ht : 50
					}
				});	


				$.get("#btn8").widget("button", {
					text : "Bottom Icon", 
					icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
						pos : "bottom", 
						wid : 50,
						ht : 50
					}
				});	

				$.get("#btn9").widget("button", {
					text : "Right Icon",  
					icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
						pos : "right", 
						wid : 50,
						ht : 50
					}
				});	

				// enable / disable buttons
				$.get("#toggle").on("click", function() {
					if(disBtn.enabled) {
						disBtn.disable();
					} else {
						disBtn.enable();
					}
				});
				
			});
					
	
<body>

		Default Button	<div id="btn1">Default</div>
		
		Button with Custom Text and Click Event		<div id="btn2"></div>	
		
		Disabled Button		<div id="btn3"></div>		
							<span id="toggle">Enable/Disable</span>
		
		Icon Button with Different Size		<div id="btn4"></div>	
											<div id="btn5"></div>
											<div id="btn6"></div>
		
		Icon Button with Position	<div id="btn7"></div>
									<div id="btn8"></div>
									<div id="btn9"></div>
			
</body>	
Result