JQuery UI TABS

Introduction:

A single content area with multiple panels, each associated with a header in a list.

jQuery UI Basic Draggable

Introduction:

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

JQuery UI Spinner

Introduction:

The Spinner, or number stepper widget, is perfect for handling all kinds of numeric input. It allows users to type a value directly, or modify an existing value by spinning with the keyboard, mouse or scrollwheel. When combined with Globalize, you can even spin currencies and dates in a variety of locales.

Spinner wraps a text input with two buttons to increment and decrement the current value. Key events are added so that the same incrementing and decrementing can be done with the keyboard. Spinner delegates to Globalize for number formatting and parsing.

JQuery UI Slider

Introduction:

Drag a handle to select a numeric value.The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.

JQuery UI Progressbar

Introduction

Display status of a determinate or indeterminate process.

JQuery UI Button

Introduction:

Enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles.Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.

JQuery UI Selectable

Introduction:

Use the mouse to select elements, individually or in a group.Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.

jQuery UI Resizable

Introduction:

Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.

JQuery UI Droppable

Introduction:

Enable any DOM element to be droppable, a target for draggable elements.

Jquery UI Menu

Introduction:

A menu with the default configuration, disabled items and nested menus. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.

Dialog in jquery UI

Introduction:

The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.

Datepicker in jQuery

Introduction:

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.
By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.

jQuery UI Basic Autocomplete

Introduction:

Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
Any field that can receive input can be converted into an Autocomplete, namely, <input> elements, <textarea> elements, and elements with the contenteditable attribute.
By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

jQuery UI Basic Accordion

Introduction:

Convert a pair of headers and content panels into an accordion.
Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures.
The panels can be activated programmatically by setting the active option.