JQuery UI

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'>
AccordionExpand and collapse sections of content
CalendarDisplay calendar to select Month Year date
AutoCompletecompletes words or strings as the user type
controlgroupset of widgets for common control and theme
checkboxradiocheckbox radio buttons to themeable buttons
sliderPointer to slide over a range to return data
draggableDragging element to different position by Mouse
droppableAccepts draggable elements
dialog-boxBox to show message or take user inputs
menuNavigational Menu & sub menu with easy positioning
progress barshowing status or progress of any process
tabsGrouping contents under different tabs with easy navigation
tooltipShowing ( help )message on mouse over the element
selectableSelect multiple elements by using lasso or mouse & keyboard
resizableResizable elements with options
easings options

Video Tutorials on JQuery UI


* indicates required
Subscribe to plus2net


    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer