jQuery UI Chinese Reference Manual

According to the "jQuery UI Chinese Reference Manual", jQuery UI is a set of user interface interactions, special effects, widgets and themes built on the jQuery JavaScript library. Whether you're creating a highly interactive web application or just adding a date picker to a form control, jQuery UI is a perfect choice. jQuery UI contains many widgets that maintain state, so it is slightly different from the typical jQuery plug-in usage pattern.

jQuery UI is a set of JavaScript libraries that provide abstract, customizable theme GUI controls and animation effects. Based on the jQuery JavaScript library, it can be used to build interactive Internet applications. It was officially made public in September 2007 in an article by John Lessig on the jquery.com blog. The latest version requires jQuery 2.1.1 or newer.

Tips: Before you start learning jQuery UI, you need to have HTML, CSS, JavaScript Basics.

Advantages and disadvantages of jQuery UI:

Advantages:

1. Simple and easy to use, inherits the easy-to-use features of jQuery, provides a highly abstract interface, and improves website ease-of-use in the short term Usability.

2. It is light and fast. The components are relatively independent and can be loaded on demand to avoid wasting bandwidth and slowing down the opening speed of web pages.

3. Advanced standards, supporting WAI-ARIA, and providing progressive enhancement through standard XHTML code to ensure accessibility in low-end environments.

4. Strong support, Google provides CDN content distribution network support for publishing code.

Disadvantages:

1. The code is not robust enough: it lacks comprehensive test cases, some components have many bugs, and cannot meet the requirements of enterprise-level product development.

2. Insufficient architecture planning: lack of coordination of APIs between components and lack of help for cooperative use.

3. Fewer controls: Compared with mature products such as Dojo, YUI, and Ext JS, there are fewer available controls and cannot meet the functional requirements of complex interfaces.

Tips: Our jQuery UI tutorial will help you learn step by step how to master and use jQuery UI. If you have any questions, please go to PHP Chinese websitejQuery UI Ask your questions in the community and enthusiastic netizens will answer them for you.

jQuery UI functions

Take version 1.9.0 as an example.

Interaction

• Draggable – allows elements to be dragged with the mouse.

• Droppable – allows the control to accept other dragged elements.

• Resizable – Make the element resizable.

• Selectable – Provides advanced selection capabilities for a large number of elements.

• Sortable – Makes the list easier to sort.

Controls

• All jQuery UI controls can be customized with theme styles.

• Accordion Menu (Accordion) – Accordion-like scalable controls.

• Autocomplete – Automatically complete text fields based on user input.

• Button – Enhance the appearance of buttons and transform radio and check controls into button styles.

• Datepicker – an advanced date selection tool.

• Dialog – displays a dialog box at the top of the page.

• Menu - displays a multi-level structured menu.

• Progress bar (Progressbar) – dynamic and static progress indicator bar.

• Slider – a completely customizable slider with various functions.

• Spinner - Numerical spinner input field for up and down control.

• Tabs – Tab switching control, which can embed or dynamically load content.

• Tooltip - Pop-up prompt box.

Effect

• Color Animation – produces an animation effect of color transition.

• Switch Class, add Class, remove Class, switch Class – to have animation effects when the style of elements on the page changes.

• Effects – various effects (display, drop-down, explosion, fade in, etc.).

• Toggle – Toggle effect switch.

• Hide, Show - Use the above effects.

Tools

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

Content covered by this jQuery UI tutorial manual

This jQuery UI tutorial manual covers all basic to advanced knowledge of jQuery UI, including jQuery UI entry, jQuery UI master, jQuery UI component library and other knowledge .

Tips: Each chapter of this tutorial contains many jQuery UI examples. You can directly click the "Run Example" button to view the results online or directly use the online editor. test. These examples will help you better understand and use jQuery UI.

Other jQuery UI related learning reference resources

In addition to the knowledge expansion on the right side of this page, the following resources are also selected for everyone

• Dugu Jiujian (6)_jQuery video tutorial