How to use the jquery UI theme

The topic is not a new concept. When you use cascading style sheet (CSS) styles and classes to design the appearance of your Web site, you are likely to have used some topics. By using the framework's standardized design approach, you can reduce your workload and the amount of code you need to write.

The JQuery UI has now become the industry standard for the theme implementation. While there are other options, such as Dojo (coupled with Dijit) or Ext JS, the JQuery UI combines themes with widgets, which are elements that users need to use when interacting with date selectors or buttons. The internal workings of a file that makes up the JQuery UI theme is CSS and JavaScript. However, the thought process and standardization that has been incorporated into CSS and JavaScript use makes the JQuery UI an excellent platform for building the site's appearance.

Basic knowledge

This article assumes that you are familiar with the Document Object Model (DOM) and how it establishes relationships between HTML elements.

You should also be familiar with CSS, especially CSS3, because it is the current popular Web browser (and JavaScript), with the highest frequency and the most supported CSS standards. This scripting language binds DOM elements together with CSS at run time, providing a complete user experience for the JQuery UI (and its themes and widgets).

Note that widgets receive their relationships from the DOM with other HTML elements and use CSS to receive styles that use defined classes, as described earlier. Events and functions are implemented through JavaScript, and JavaScript is responsible for manipulating the DOM at run time and specifying various CSS styles.

JQuery creates and implements widgets based on the needs or requests of Web site applications. Also note that you can delete widgets, but doing so will only remove the appearance changes generated by widgets.

JQuery UI Themes

The JQuery UI platform consists of two sub frames: Widget framework and CSS framework, which contains widgets Factory and a common set of widgets. Widget Factory provides the basis for all JQuery UI widgets, including those common widgets contained in the Widget collection. When you create a widget, you can either start from any of the common widgets in the collection or create from scratch. Once you know where your favorite widgets are, you can open them in your favorite editor and view the code. In the editor, you can either modify the code to generate a custom widget (using any other widget as the starting point), or you can create a widget using a similar structure.

JQuery UI Theme Folder structure

Download any topic from the JQuery UI platform before continuing to view the various files and their contents. The downloaded ZIP file contains three folders: CSS, JS, and Development-bundle. The Development-bundle folder contains a folder called Themes, which is used to save the JQuery UI theme in development. The Themes folder also contains a folder called the selected/downloaded theme (such as the UI lightness), and a folder named base. The base folder contains the starting point for your own topic. The base folder is downloaded, regardless of whether or not a theme is selected.

The CSS folder contains a folder named the theme you downloaded. This theme folder contains a CSS file that contains CSS tags that apply to all components or widgets. However, the Development-bundle folder also contains a Themes/[theme-name] folder (where [Theme-name] is the actual name of the selected theme) that contains the CSS files that are applied individually to each component or widget. This structure makes it easy to find and modify the subject's changes. Figure 1 shows the structure of the theme folder.

Figure 1. Structure of theme Folders

All the files in the [Theme-name] folder are not listed in Figure 1, but all of the most important files are listed. JQUERY.UI.ALL.CSS files Import jquery.ui.base.css and jquery.ui.theme.css files, it is easy to import files using only jquery.ui.all.css file files. The Jquery.ui.base.css file imports Jquery.ui.core.css files and all other components and widget files from the same folder (not shown in Figure 1). The Jquery.ui.core.css file contains common classes that are shared among all widget files. It provides a basic CSS class for all jQuery UI widgets (in the subject) and provides common visibility and layout for widgets. The last important file is the Jquery.ui.theme.css file, which provides all the widgets in the topic and the common look and behavior shared by the subject itself.