General Demos & Documentation
NedilJS APIs are explained with demos in the Documentation page. This page contains only demos and explanation of Nedil Default Widgets.
Theming / Styling in Nedil Default Widgets
As of now, there are no direct theming options available in Nedil JS. To customize the style or to create a new theme, change the styles in Nedil_Widget.css file directly. All CSS class names are named with widget name to identify what classes are used by a particular widget.
Default Nedil Widgets
Nedil JS supports more than dozen of default widgets to make highly user friendly interfaces. All default widgets are configurable with lot of options.

Default widgets are explained with examples under "demo" page.
Nedil JS + Nedil Widgets
To use Nedil Widgets, order of loading should be Nedil.js, Nedil_Widget.css and Nedil_Widget.js and Nedil Widgets images directory should be placed at the same location of Nedil_Widget.css
HTML
						<head>

							
							<script type="text/javascript" src="PATH_TO/Nedil.js"></script>
							
							
							<link rel="stylesheet" type="text/css" href="PATH_TO/Nedil_Widget.css" />
							
							
							<script type="text/javascript" src="PATH_TO/Nedil_Widget.js"></script>
							
						</head>
Usage Nedil Widgets
Widgets are created using Nedil.Widget. It should be applied to HTML elements in Nedil Objects. All the matched HTML elements will be converted to Nedil Custom Widgets.
JS
			$.domLoaded(function() {
			
				// Create #btn1 into WIDGET with configuration from CONFIG_JSON
				$.get("#btn1").widget("WIDGET_NAME", CONFIG_JSON);
				
			}