jQuery UI Introduction

Previous Next

jQuery UI is an official companion library built on top of jQuery core. Where jQuery core gives you DOM manipulation, events, effects and AJAX, jQuery UI adds a set of ready-made, themeable, accessible widgets (accordion, tabs, dialog, datepicker, slider, tooltip, autocomplete), low-level interactions (draggable, droppable, resizable, selectable, sortable) and extra easings/effects that plain jQuery doesn't ship with.

Why jQuery UI?

Building a good date picker, a drag-and-drop sortable list, or an accessible modal dialog from scratch takes real effort: keyboard navigation, ARIA attributes, cross-browser quirks, animation timing. jQuery UI packages all of that into a single, consistent API so you can drop in $('#el').draggable() or $('#el').datepicker() and get a working, themeable widget immediately.

1) Including jQuery UI via CDN


<!-- 1. jQuery UI's CSS theme (after Bootstrap, before your own styles) -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- 2. jQuery core FIRST -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 3. jQuery UI SECOND (it extends jQuery, so order matters) -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

Try it Yourself »

Order matters: jQuery core must load before jQuery UI, because jQuery UI attaches its widgets (.draggable, .dialog, etc.) onto the existing $.fn object.

2) A first taste - one full widget end-to-end


$(function(){
  // turn a plain text input into a calendar picker
  $('#uiIntroDateDemo').datepicker();

  // turn a plain div into a draggable box
  $('#uiIntroDragDemo').draggable();
});

Try it Yourself »

ThemeRoller & swappable CSS themes

Every jQuery UI widget is styled purely through CSS classes like ui-widget, ui-state-default and ui-corner-all. The jquery-ui.css file you load from the CDN is just one "theme" - jQuery's official ThemeRoller tool lets you generate a completely different-looking stylesheet (colors, borders, fonts) using the exact same class names, so you can restyle every widget on your site by swapping one CSS file, without touching your JavaScript or markup. This tutorial series uses the default "base" theme; building a custom theme is outside the scope of these pages.

Live Demo

Below are two tiny, fully working jQuery UI widgets right on this page - a draggable box and a datepicker input. Each of the following tutorial pages goes deep into one interaction or widget at a time.

Drag me

Pick a date:

Topics in this section

This jQuery UI subsection covers the following interactions and widgets, one per page:

Tip: jQuery UI's CSS classes (ui-widget, ui-corner-all, ...) can clash visually with other frameworks like Bootstrap. Load jQuery UI's stylesheet after Bootstrap's, as shown above, so its widget styles take precedence for the elements you initialize.

Previous Next