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
Visit JQuery UI CDN
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">
Keep this code above the <script>JQuery Code</script> and before the end of <BODY> tag
JQuery UI Themes
These are Thems you can configure or download
DEMO 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
« easings options
« JQuery
Video Tutorials on JQuery UI
JQuery UI date picker Calendar formats & collecting user selected value with minimum maximum range
VIDEO
How to interlink two Calendars to select start date and end date by user in JQuery UI datepicker
VIDEO
Dialog box using JQuery UI to display message and take user inputs
VIDEO
JQuery UI Autocomplete to suggest the user as they type with available options from array - Part-1
VIDEO
JQuery UI autocomplete to get user options as source from MySQL database table part-3
VIDEO
JQuery UI progress bar to display status and reading and setting the values with DEMO
VIDEO
JQuery UI autocomplete to get record details from MySQL database on selection of option- part-2
VIDEO
Textarea counter to restrict user entered text with progress bar to show the length
VIDEO
This article is written by plus2net.com team.
plus2net.com