JQuery UI
Most important additional requirement will be JQuery UI ( JQuery user interface ) which is a library of different widgets like Date picker ( Calendar ) , Slider , Spinner etc. To use JQuery UI, you must include JQuery. JQuery is the core library , JQuery UI is built on top of it.
In addition to basic JQuery library you need one more CSS file ( Style ) , known as Themes.
Download JQuery UI here
Here is the files required for JQuery UI
- JQuery
- JQuery UI
- JQuery UI CSS
- Additional Plug in files
Here is the sample code required to link to CDN
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/blitzer/jquery-ui.css" rel="stylesheet">
JQuery UI Themes
These are Thems you can configure or downloadDEMO of JQuery UI different Themes by user Selection
How to use Themes for JQuery UI components
Check different themes by using the dropdown list at right side of the above demo page. Once you select a theme from the list the changes will be shown and the URL of the CDN ( Content Delivery Network ) is displayed. Copy the URL and use it like this .<link href='https://code.jquery.com/ui/1.12.1/ themes/humanity/jquery-ui.css' rel='stylesheet'>
| Accordion | Expand and collapse sections of content |
| Calendar | Display calendar to select Month Year date |
| AutoComplete | completes words or strings as the user type |
| controlgroup | set of widgets for common control and theme |
| checkboxradio | checkbox radio buttons to themeable buttons |
| slider | Pointer to slide over a range to return data |
| draggable | Dragging element to different position by Mouse |
| droppable | Accepts draggable elements |
| dialog-box | Box to show message or take user inputs |
| menu | Navigational Menu & sub menu with easy positioning |
| progress bar | showing status or progress of any process |
| tabs | Grouping contents under different tabs with easy navigation |
| tooltip | Showing ( help )message on mouse over the element |
| selectable | Select multiple elements by using lasso or mouse & keyboard |
| resizable | Resizable elements with options |
JQuery
Video Tutorials on JQuery UI
This article is written by plus2net.com team.
| Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |
JQuery Video Tutorials