Virtual Developer Workshop: Containerized Development with Docker
jQuery UI Classifications
jQuery UI is classified into four different categories. This classification is based on what category the UI feature falls under.
These features help the developer in implementing functionalities that improve the user interactions on the web page. Some of the features are:
1. Draggable – Allows a particular HTML element to be dragged over the web page.
2. Droppable – Allows a particular HTML element to be dropped on to another element. The developer can also specify which elements can accept what.
3. Sortable – Makes a set of child elements sortable. The users can now drag drop the list items and create their own order.
This category would draw the interest of most web developers because it ingrains new UI elements. These UI elements solve most of the pain for developers as it reduces the size of code and eliminates messy logics. Below are some of the useful UI widgets provided by jQuery UI.
1. Dialog – To show pop ups and themed alerts
3. Accordion – Containers with expand and collapse options
4. Date picker
6. Progress bar
These features can be used to perform animations and make the client UI rich. The developer can include his animation effect while showing an element or popping up a dialog window or including some transition effects.
The utilities can be used to extend all the above mentioned categories like creating a new effect, a new widget or a new interaction feature. Also there is a feature called Position, which is used to alter the element positions in an easy and effective way. I haven’t explored the features under this category much.
Code Samples – Widgets
In this section I will provide the code samples for a couple of jQuery UI widgets.
This widget will assist the developer in implementing the auto complete functionality for a text box with minimum effort. Below is the sample code.
Date Picker Widget
Most web applications involve date fields and the developers can have hard time in accepting the input and validating it. The jQuery UI date picker widget simplifies the work to a great extent and provides a nice way for the users to select the dates.
On a generic note jQuery UI provides options to apply default, or your own themes to the widgets. I hope this article gives you a jump start with the jQuery UI component.