May 08, 2021 jQuery UI
This section describes the jQuery UI topic.
The jQuery UI platform contains two subffics: the Widget Framework and the CSS Framework.
All jQuery UI plug-ins allow developers to seamlessly integrate UI widgets into the look and feel of their websites or applications. Each plug-in defines styles through CSS and contains two layers of style information: the standard jQuery UI CSS framework style and the specific plug-in style.
The jQuery UI CSS framework provides semantically represented classes that indicate the role of elements within a widget, such as a title, content, or clickable area. T
hese are consistent across all widgets, and a clickable tab (tab), accordion (collapse panel), or button (button) all have
ui-state-default
class to indicate that they are clickable. W
hen the user hovers over these elements, the class
ui-state-hover
and when elected,
ui-state-active
The consistency of these classes makes elements in all parts with similar roles or interactive states appear consistent.
The CSS frame style is encapsulated in a separate file
ui.theme.css
T
his file was
modified by the ThemeRoller
application. F
rame styles contain only properties that affect appearance and perception, as long as they are colors, background images, icons, and so on. S
o these are "safe" styles that do not affect the functionality of the plug-in. T
his separation means that developers
theme.css
and feel by modifying colors and images in the theme file.
Since future plug-ins or bug fixes will be available, they can be used with the theme without modification.
Because frame styles only cover appearance and perception, you also need to include specific plug-in style sheets that include all the additional structural style rules that make widgets functional, such as dimensions, margins, margins, positioning, and floating. T
he style sheet for each
themes/base
and is named with the plug-in, such as "jquery.ui..css".
These styles must be carefully edited because they, together with scripts, provide frame style overlays.
We encourage all developers to create jQuery plug-ins, and the jQuery UI CSS framework makes it easier for end users to customize themes and use plug-ins.
Here are three general ways to topic jQuery UI plug-ins:
ui.theme.css
and an image folder containing all the necessary background images and
images
This method is the earliest way to create and maintain themes, but it limits customization to the options available in ThemeRoller.
ui.theme.css
or the style sheet for any standalever plug-in. F
or example, you can easily adjust the corner radius of all buttons to a different value than other UI components, or change the path with custom settings for icon genie. W
ith a little style range, you can even use multiple themes in one UI at the same time.
For ease of maintenance, it is recommended to
ui.theme.css
and images.