jQuery UI also provides a framework to create UI components known as widgets, which use CSS rules to define things such as a widget's width, height, margins, padding, and the positioning of the HTML elements that they are built from.
Here is a simple example to illustrate the difference between a layout and the look and feel of a component.
A developer created a jQuery UI widget called SimpleWidget
, which uses a div
tag as its container.
jQuery UI uses simple naming conventions so that the widget layout CSS rules and the look and feel (theme) CSS rules remain separate. This way, you can apply different themes to the same widget without having to change the layout CSS rules that are specific to the widget itself. jQuery UI also provides a default theme that supplies sensible defaults.
The widget produces the following in HTML:
<div id="firstSimpleWidget" class="ui-simplewidget ui-widget ui-helper-reset">This is SimpleWidget...