Applying a Theme to Non-jQuery UI Components - J Query

Problem
Other page components— like content boxes, buttons, and toolbars— are sitting next to jQuery UI widgets and have similar types of interactions and behaviors, but their designs don’t match.

Solution

You can assign Framework classes to non-jQuery UI elements to apply the same theme as Theme Roller-styled elements. (As a bonus, those elements will automatically update when you apply an updated ThemeRoller theme.)
In the previous two recipes we used ThemeRoller to create and download a theme and then wrote a few CSS rules to override default theme styles and make it more closely match our finished design. Now we’ll take it another step further and apply Framework classes to elements in our project so that they coordinate with the jQuery UI widgets and the theme we created.

Step 1: Review available Framework classes to identify those you can apply to your components

Framework classes are part of the jQuery UI theme stylesheet you download when you create a theme in ThemeRoller. They’re named according to their purpose and apply theme styles like background colors and textures, border and font colors, rounded corners, and icons. Framework classes are built into jQuery UI widgets, but they may also be applied to any other elements—like custom widgets you’ve developed or extended from a third party—to achieve a consistent look and feel across your site or application.
The following is an overview of the classes that make up the framework, the styles applied by each, and general rules for referencing them in your own code.
Layout helper classes hide content or fix common structural issues, like completely wrapping a container around floated child elements:

  • ui-helper-hidden
    Applies display: none. Content hidden this way may not be accessible to screen readers.
  • ui-helper-hidden-accessible
    Positions an element off the page so that it’s not visible but is still accessible to screen readers.
  • ui-helper-reset
    Removes inherited padding, margin, border, outline, text decoration, and liststyle; sets line-height to 1.3 and font-size to 100 percent.
  • ui-helper-clearfix
    Forces nonfloated container elements to completely wrap around floated child elements.
    Widget container classes should only be applied to the elements for which they’re named because their child links will inherit styles from them:
  • ui-widget
    Applies the theme’s font family and size on the entire widget and explicitly sets the same family and 1em font size to child form elements to force inheritance.
  • ui-widget-header
    Applies bold font.
  • ui-widget-content
    Applies border color, background color and image, and text color.

Interaction states style clickable elements—like buttons, accordion headers, and tabs— to provide the appropriate state feedback as the user interacts with them; each class applies border color, background color and image, and text color. The -hover, -focus, and -active classes are intended to replace their CSS pseudo class counterparts (:hover, :active, :focus) and must be assigned to an element with client-side scripting.
State classes were designed this way to avoid style conflicts and added selector complexity that occurs when pseudo classes are built into the CSS. (If pseudo classes are necessary for your project, you can add them to your override stylesheet as described in Recipe (Overriding jQuery UI Layout and Theme Styles).)

  • .ui-state-default
  • .ui-state-hover
  • .ui-state-focus
  • .ui-state-active

Interaction cues style content to convey feedback in the form of highlight or error messaging, disabled form elements, or visual hierarchy. All apply border color, background color and image, and text color:
.ui-state-highlight
Assign this class to temporarily highlight a component.
.ui-state-error
Assign this class to any components that contain error messaging.
.ui-state-error-text
Applies only the “error” text and icon colors without the background.
.ui-state-disabled
Styles a form element to appear disabled using low opacity and therefore works alongside other classes used to style the element. The element is still usable when this class is applied; to disable functionality, use the disabled form element attribute.
.ui-priority-primary
Assign this class to a button when its action takes priority over another (i.e., Save over Cancel). Applies bold text.
.ui-priority-secondary
Assign this class to a button when its action is secondary to another (i.e., Cancel).
Applies normal font weight and reduced opacity.
Icon classes provide additional feedback in the form of directional arrows and informational symbols, like an x or a trash can to mark a button that deletes. An icon is applied to an element with two classes:
.ui-icon
Base class that sets the element’s dimensions to a 16-pixel square, hides any text, and sets the Theme Roller-generated icon sprite image as a background.
.ui-icon-[type]
Where “type” is a descriptor for the icon graphic that will be displayed. Type can be a single word (ui-icon-document, ui-icon-print) or a combination of words, numbers, and shorthand; for example, .ui-icon-carat-1-n will display a single caret symbol that points north, and .ui-icon-arrow-2-e-w will display a double arrow icon that points east-west.jQuery UI provides a full suite of Framework icons (Figure (jQuery UI includes a full set of themed icons in a single sprite image; their interaction states are previewable in ThemeRoller)).

jQuery UI includes a full set of themed icons in a single sprite image; their interaction states are previewable in ThemeRoller

Figure : (jQuery UI includes a full set of themed icons in a single sprite image; their interaction states are previewable in ThemeRoller)

In ThemeRoller you can preview their default and hover interaction states by hovering over an icon in the widget example column, and you can mouse over an icon to see its class name.
Corner radius helper classes apply rounded corners to a subset or all corners of a container. The last segment of the corner class name indicates where the corner will appear, as noted here:
.ui-corner-tl
Top left
.ui-corner-tr
Top right
.ui-corner-bl
Bottom left
.ui-corner-br
Bottom right
.ui-corner-top
Both top
.ui-corner-bottom
Both bottom
.ui-corner-right
Both right
.ui-corner-left
Both left
.ui-corner-all
All four corners
Overlay and shadow classes can be used to add depth and dimension to a site or application:
.ui-widget-overlay
Applies 100 percent width and height dimensions, background, and opacity to the modal screen, a layer that sits between a modal dialog and the page content that is commonly used to make page content appear temporarily disabled while the modal is showing.
.ui-widget-shadow
Applies background, corner radius, opacity, top/left offsets to position the shadow behind a widget, and shadow thickness (similar to border width).
Because these Framework classes apply theme styles to jQuery UI widgets and can be used to style any component on your page, we can use them throughout an interface to create a uniform appearance. In this recipe, we’ll review how to assign three types of Framework classes:

  • Clickable state classes, including .ui-state-default, .ui-state-hover,and .ui-state-active
  • A corner class, .ui-corner-all
  • An interaction cue class for disabling a form element, .ui-state-disabled

Step 2: Apply clickable-state Framework classes

Let’s continue refining the look of our travel reservations application.
After applying a theme we created in ThemeRoller and modifying default styles with override rules, the interface of our travel application’s flight selector is almost done: the clickable elements in our jQuery UI widgets have a consistent appearance—by default, the tabs and datepicker buttons are all dark gray with a glassy texture.
But our Search for Flights submit button doesn’t conform to this design and instead looks like a standard, unstyled browser button (Figure (Our interface is nearly complete, except for the unstyled Search for Flights button)).

Our interface is nearly complete, except for the unstyled Search for Flights button)

Figure : (Our interface is nearly complete, except for the unstyled Search for Flights button)

We want it to look more like our polished theme style.
To make the search button look like other clickable elements in our travel application, we’ll assign the Framework classes that set clickable state styles—.ui-statedefault,.ui-state-hover, and .ui-state-active—to the button markup and then write a short jQuery script to apply the styles when the user interacts with the button.
We’ll also apply rounded corners with the same radius value set for the tabs and datepicker widget.
First, let’s assign the default state class to the button so that it matches the other clickable elements. We’ll simply write (or copy from the theme stylesheet) ui-defaultstateinto the button’s class attribute:

Other clickable elements like our tabs have rounded corners, so we’ll add roundedcorners to all sides of the button and append ui-corner-all to the class attribute:

With these quick additions to the markup, we’ve applied our default theme style for clickable elements to the search button and also made it “themeable”—later if we decide to create and apply a new theme to our travel application widget, the search button will pick up the default clickable and corner styles from the new stylesheet.
Finally, let’s apply the hover and mousedown (active) states to provide visual feedback to users when they’re interacting with the button (Figure (Three Framework classes are used to assign clickable states)).

Three Framework classes are used to assign clickable states

Figure : (Three Framework classes are used to assign clickable states)

To update the button’s appearance on hover and mousedown, we’ll write a small jQuery script. Since we’ve already downloaded and included the latest version of the jQuery core library in our page and have already initialized the widget plugins on DOM ready, we’ll append a function to the DOM ready block that toggles the state classes assigned to our search button. As noted in the following script block, the hover event contains two functions—the first removes the default state class and adds the hover state on mouse over, and the second reverses these class assignments on mouse out— and the mousedown event replaces the default and hover state classes with the active class:

Ultimately, our button will look like the one inFigure (Our final design with theme classes applied to the Search button).

Our final design with theme classes applied to the Search button

Figure :(Our final design with theme classes applied to the Search button)

Now that the button is styled to match our application, we can conditionally add an interaction cue class, ui-state-disabled, to provide visual feedback when the button is disabled (see Figure (Add the ui-state-disabled state to make a form element appear disabled)).

Add the ui-state-disabled state to make a form element appear disabled

Figure : (Add the ui-state-disabled state to make a form element appear disabled)

For example, let’s assume all fields in our flight reservation form are required for submission. In this case, the search button should appear disabled until the user enters a valid entry for every field; when the form is complete, we’ll enable the button for sub mission.
To apply a disabled appearance to our search button, we’ll append the Framework class ui-state-disabled to our default button. (Both classes are necessary to create the final appearance because the disabled state styles simply reduce the default button’s opacity.)

Applying the disabled state class only changes the appearance of the button and does not affect its functionality; it’s still capable of accepting user input to submit the form.
To ensure that the button is actually disabled, be sure to add the disabled attribute and value to the button markup:

Discussion

Framework classes are designed to be reused throughout an application, and as such they provide developers with a ready set of classes for styling related components in an application, like our travel application’s Search for Flights button, or even your own widgets. Because Framework classes are named according to their purpose, applying them to component parts of a custom widget is fairly intuitive:

  • Clickable state classes can be added to buttons, links, or other elements that require a hover or active state.
  • Corner classes can be applied to any element with block properties.
  • Layout helpers can be used throughout the layout structure for fixing float containers or toggling content visibility.
  • Interaction cue classes can be assigned to elements that must convey visual priority or error messaging.

Adding Framework classes to non-jQuery UI elements also makes them themeable; if you decide to edit and download an updated theme using ThemeRoller, the new theme will automatically also apply your styles to those elements.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics