Introduction to jquery jquery UI Overview

The basic usage of jquery is described earlier, and the jquery UI is a set of JavaScript libraries that provide abstract, customizable GUI controls and animation effects. Based on the JQuery JavaScript function library, it can be used to construct interactive Web applications.

Its basic skills can be:

Interaction

Drag (draggable) – Lets the element be dragged with the mouse.

Drag-and-drop (droppable) – allows the control to accept other elements dragged in.

Resize (resizable) – Enables elements to resize.

Selection (selectable) – Provides a number of advanced element selection features.

Sort (sortable) – make lists easier to sort.

Control item

All of the controls for the JQuery UI can customize the theme style.

Accordion Menu (accordion) – an accordion-like retractable control.

Auto-Complete (AutoComplete) – Automatically completes the text bar based on user input.

Button – enhances the appearance of the button, turning the radio and check controls into button patterns.

Date selector (DatePicker) – The Advanced Date selection tool.

dialog box (Dialog) – Displays a dialog box at the top of the page.

Menu – Displays a multi-hierarchy menu.

Progress bar (ProgressBar) – Dynamic and static progress indicator bar.

slider Bar (Slider) – fully customizable sliders with various functions.

Fine-Tuning Selector (Spinner) – Digital trimmer input bar up and down control.

Page Check (Tabs) – a tab switch control that allows you to load content inline or dynamically.

ToolTip (Tooltip) – Pop-up prompt box.

Effect

Color Animation-animation effect that produces a color transition.

Switch class, add class, remove class, switch class– to make the element style changes on the page have animation effect.

Effects (effects) – Various effects (display, drop down, explode, fade in, and so on).

Toggle (Toggle) – Toggle effect switch.

Hide, show – Use the effect above.

Tools

Position (Position) – Sets the position (alignment) of the target element according to another element.

The following figure is a few UI components using the JQuery UI