Draggable

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.

Refer following links for usage:

Droppable

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

Refer following links for usage:

Resizable

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

Refer following links for usage:

Selectable

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.

Refer following links for usage:

Sortable

Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.

Refer following links for usage:

Accordion

Displays collapsible content panels for presenting information in a limited amount of space. Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

Refer following links for usage:

Menu

Themeable menu with mouse and keyboard interactions for navigation. 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.

Refer following links for usage:

Tabs

single content area with multiple panels, each associated with a header in a list. Click tabs to swap between content that is broken into logical sections.

Refer following links for usage:

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.

Refer following links for usage:

Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try

Refer following links for usage:

Buttons

Enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles.

Refer following links for usage:

Select Menu

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.

Refer following links for usage:

Checkbox & Radio Buttons

Enhances standard checkbox and radio input element to themeable buttons with appropriate hover and active styles.

Refer following links for usage:

Slider

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.

Refer following links for usage:

Progressbar

Display status of a determinate or indeterminate process.

Refer following links for usage:

Spinner

Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.

Refer following links for usage:

Dialogs

Open content in an interactive overlay. 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.

Refer following links for usage:

Tooltips

Customizable, themeable tooltips, replacing native tooltips. Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

Refer following links for usage: