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
- JQuery UI date picker Calendar formats & collecting user selected value with minimum maximum range
- How to interlink two Calendars to select start date and end date by user in JQuery UI datepicker
- Dialog box using JQuery UI to display message and take user inputs
- JQuery UI Autocomplete to suggest the user as they type with available options from array - Part-1
- JQuery UI autocomplete to get user options as source from MySQL database table part-3
- JQuery UI progress bar to display status and reading and setting the values with DEMO
- JQuery UI autocomplete to get record details from MySQL database on selection of option- part-2
- Textarea counter to restrict user entered text with progress bar to show the length
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