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.
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:
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).)
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:
Assign this class to temporarily highlight a component.
Assign this class to any components that contain error messaging.
Applies only the “error” text and icon colors without the background.
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.
Assign this class to a button when its action takes priority over another (i.e., Save over Cancel). Applies bold text.
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:
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.
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)).
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:
All four corners
Overlay and shadow classes can be used to add depth and dimension to a site or application:
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.
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:
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)).
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)).
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).
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)).
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:
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:
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.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.