What is jquery ui all css

jQuery UI by Eric Sarrion

Get full access to jQuery UI and 60K+ other titles, with a free 10-day trial of O’Reilly.

There are also live events, courses curated by job role, and more.

Chapter 1. Introduction to jQuery UI

jQuery UI is a set of plug-ins for jQuery that add new functionalities to the jQuery core library. In this chapter, we will install the jQuery UI library and briefly examine its content. The following chapters will detail each of the jQuery UI features.

jQuery UI Installation

You can download the library at http://jqueryui.com. Click the Stable link. This leads directly to a ZIP file containing the sources, examples, and documentation for jQuery UI. Once the file is downloaded, transfer the contents to a jqueryui directory.

This jqueryui directory now contains the following:

• A css subdirectory containing the CSS files associated with jQuery UI. You will see that jQuery UI handles CSS themes to give a custom look to the interface elements it manages. For example, the display of sliders may be different from one theme to another, as well as other items like calendars and tabs.
• A js subdirectory containing the JavaScript files for jQuery UI. This directory contains a compressed file of all jQuery UI features and the jQuery library file.
• A development-bundle subdirectory containing various subdirectories—demos (jQuery UI sample files), docs (files containing the jQuery UI documentation), themes (files for each of the CSS themes associated with jQuery UI), and ui (jQuery UI JavaScript files).
• An index.html file that allows you to view some of the features of jQuery UI in a browser.

Overview of jQuery UI

For an overview of jQuery UI, open the index.html file in a browser (Figure 1-1).

Figure 1-1. jQuery UI home page

In this file, you can see the different features that jQuery UI adds (Figure 1-2), including the following:

• Accordion menus
• Autocompletion mechanism for input fields
• Buttons and checkboxes of the nicest aspects
• A tabs mechanism to facilitate the display in the page
• Dialog boxes that are superimposed on top of the page
• Custom icons
• Sliders
• Calendars
• Progress bars

Figure 1-2. jQuery UI home page: list of components

These are all possibilities that we will discuss later in the book. We will also consider other mechanisms such as drag-and-drop, new visual effects, CSS theme files, and more.

What Is a CSS Theme?

What are the CSS themes we talked about earlier? To find out, just download a new customized version of jQuery UI, depending on the chosen theme. For that, go to http://jqueryui.com/download, which displays the page shown in Figure 1-3.

Choose the UI lightness theme from the list on the right, then retrieve the ZIP file for jQuery UI associated with this theme by clicking the Download button. This ZIP file contains the same directory, but the CSS files included in css directory are adapted to the new theme. To see the look of this theme, view the new index.html file included in the queryui directory (this file will have overwritten the previous one). An example of a theme is shown in Figure 1-4.

Each theme provides a unique combination of background colors, fonts, and other screen elements. If we look at the css directory, we see two subdirectories containing each of the themes that we have downloaded:

• smoothness is the default theme downloaded with jQuery UI
• ui-lightness is the theme we just downloaded from the http://jqueryui.com/download page.

Figure 1-3. Download of the jQuery UI with theme customization

Which Files Should We Include in Our HTML Pages?

In the previous sections, we have seen that jQuery UI is made up of different CSS and JavaScript files. In addition, some files are compressed, while others are not. Hence the question: which files should we include in our HTML pages to make use of jQuery UI?

Uncompressed Files

Uncompressed files are located in the development-bundle directory, under the jQuery UI installation directory (jqueryui).

Figure 1-4. The ui-lightness theme

JavaScript files

The ui directory (located under development-bundle) contains the JavaScript files. The jquery.ui.core.js file includes the basic features (mandatory), while other files will be included only if required. The file ending in custom.js (e.g., jquery-ui-1.8.16.custom.js) brings together all the JavaScript files and eliminates the need to include each separately. The minified directory (located under ui) contains the same files in compressed format.

CSS files

The themes directory (located under development-bundle) contains the CSS files. It consists of various directories, each containing themes (e.g., the base, smoothness, and ui-lightness directories). Each theme includes an images directory and other CSS files.

The jquery.ui.core.css file contains basic functionality (required), while other files will be included only if they are required. The jquery.ui.theme.css file contains the definition of the theme itself (required).

The jquery.ui.base.css file includes all of the files in the development-bundle directory except jquery.ui.theme.css. The jquery.ui.all.css file includes all files (that is to say, jquery.ui.base.css and jquery.ui.theme.css).

Finally, the file ending with custom.css (e.g., jquery-ui-1.8.16.custom.css) includes all CSS files and eliminates the need to include each separately (it is identical to jquery.ui.all.css, except that it includes other files via CSS directives, while custom.css physically includes every line of all files).

Sample HTML page including uncompressed files

Here we want to display a simple page with two tabs. The main JavaScript file will be jquery.ui.tabs.js and the main CSS file will be jquery.ui.tabs.css. The main page will include the following base files:

The jquery.js file is here at the same level as the jqueryui directory. This file is the standard jQuery JavaScript file.

The core.js file is mandatory, while the tabs.js file requires the inclusion of widget.js (as indicated in the tabs.js file).

The core.css file is mandatory, as is the theme.css file. The tabs.css file contains specific tabs definitions.

Now that we have the basic building blocks for the page, let’s create and label two tabs and place some text in each. The following code goes directly below the previous code that calls the base files.

The result of this script (an HTML page with two tabs) is shown in Figure 1-5.

Figure 1-5. Our first program using jQuery UI

Источник

CSS Framework

The following is a list of the class names used by jQuery UI. The classes are designed to create a visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller. The class names are split between ui.core.css and ui.theme.css, depending on whether styles are fixed and structural, or themeable (colors, fonts, backgrounds, etc) respectively.

Layout Helpers

• .ui-helper-hidden : Hides content visually and from assistive technologies, such as screen readers.
• .ui-helper-hidden-accessible : Hides content visually, but leaves it available to assistive technologies.
• .ui-helper-reset : A basic style reset for DOM nodes. Resets padding, margins, text-decoration, list-style, etc.
• .ui-helper-clearfix : Applies float wrapping properties to parent elements.
• .ui-front : Applies z-index to manage the stacking of multiple widgets on the screen. See the page about stacking elements for more details.

Widget Containers

• .ui-widget : Class to be applied to the outer container of all widgets. Applies font-family and font size to widgets.
• .ui-widget-header : Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons.
• .ui-widget-content : Class to be applied to content containers. Applies content container styles to an element and its child text, links, and icons. (can be applied to parent or sibling of header).

Interaction States

• .ui-state-default : Class to be applied to clickable button-like elements. Applies «clickable default» container styles to an element and its child text, links, and icons.
• .ui-state-hover : Class to be applied on mouseover to clickable button-like elements. Applies «clickable hover» container styles to an element and its child text, links, and icons.
• .ui-state-focus : Class to be applied on keyboard focus to clickable button-like elements. Applies «clickable focus» container styles to an element and its child text, links, and icons.
• .ui-state-active : Class to be applied on mousedown to clickable button-like elements. Applies «clickable active» container styles to an element and its child text, links, and icons.

Interaction Cues

• .ui-state-highlight : Class to be applied to highlighted or selected elements. Applies «highlight» container styles to an element and its child text, links, and icons.
• .ui-state-error : Class to be applied to error messaging container elements. Applies «error» container styles to an element and its child text, links, and icons.
• .ui-state-error-text : An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons.
• .ui-state-disabled : Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element.
• .ui-priority-primary : Class to be applied to a priority-1 button in situations where button hierarchy is needed.
• .ui-priority-secondary : Class to be applied to a priority-2 button in situations where button hierarchy is needed.

Icons

States and images

• .ui-icon : Base class to be applied to an icon element. Sets dimensions to a 16px square block, hides inner text, and sets background image to the «content» state sprite image. Note: ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default ‘s icon color.

Icon types

After declaring a ui-icon class, you can follow up with a second class describing the type of icon. Icon classes generally follow a syntax of .ui-icon—.

For example, a single triangle icon pointing to the right looks like this: .ui-icon-triangle-1-e . ThemeRoller provides the full set of CSS framework icons in its preview column. Hover over them to see the class name.

Misc Visuals

Corner Radius helpers

• .ui-corner-tl : Applies corner-radius to top left corner of element.
• .ui-corner-tr : Applies corner-radius to top right corner of element.
• .ui-corner-bl : Applies corner-radius to bottom left corner of element.
• .ui-corner-br : Applies corner-radius to bottom right corner of element.
• .ui-corner-top : Applies corner-radius to both top corners of element.
• .ui-corner-bottom : Applies corner-radius to both bottom corners of element.
• .ui-corner-right : Applies corner-radius to both right corners of element.
• .ui-corner-left : Applies corner-radius to both left corners of element.
• .ui-corner-all : Applies corner-radius to all 4 corners of element.

Overlay & Shadow

• .ui-widget-overlay : Applies 100% width & height dimensions to an overlay screen, along with background color/texture, and screen opacity.
• .ui-widget-shadow : Class to be applied to overlay widget shadow elements. Sets box-shadow x & y offset, blur radius and color.

jQuery UI 1.13

Other Versions

Источник