The jQuery UI Effects & CSS Framework
In this chapter I describe two utility features that jQuery UI provides. The first is a set of enhancements to existing jQuery methods that can animate colors, changes in element visibility, and the application of CSS classes. The other feature is a set of CSS classes that to apply a jQuery UI theme to the rest of our HTML documents in order to create a consistent look across an entire web application. Table 35-1 provides the summary for this chapter.
Table 35-1. Chapter Summary
| Problem | Solution | Listing |
|---|---|---|
| Animate changes in color. | Use the enhanced animate method. | 1 |
| Animate the application of classes. | Use the enhanced addClass, removeClass and toggleClass methods and the switchClass method. | 2, 3 |
| Animate visibility transitions. | Use the enhanced show, hide and toggle methods. | 4 |
| Apply an effect without changing element visibility. | Use the effect method. | 5 |
| Style an element as a widget. | Use the widget container classes. | 6 |
| Apply rounded corners to an element. | Use the corner classes. | 7 |
| Apply the styles of a clickable widget to an element. | Use the interaction state classes. | 8 |
| Provide the user with cues about the state of an element. | Use the cue classes. | 9, 10 |
jQuery UI extends some core jQuery methods to animate different transitions for an element – this ranges from the animation of color changes through to the application of CSS classes. These can be valuable additions to a web application when used carefully, and to supplement these features, jQuery UI also defines some additional animation effects.
jQuery UI extends the jQuery animate method, which I described in Chapter 10, to add support for animating colors. You can animate one of several CSS properties that define an element’s colors. Table 35-2 describes the CSS properties that the animate method supports.
Table 35-2. CSS Properties Supported by the jQuery UI Animate Method
| Property | Description |
|---|---|
| backgroundColor | Sets the background color of the element. |
| borderTopColorborderBottomColorborderLeftColorborderRightColor | Sets the color for individual sides of the element border. |
| color | Sets the text color for the element. |
| outlineColor | Sets the color for the outline, used to emphasize the element. |
To animate colors, pass a map object as the argument to the animate method, detailing the properties to animate and the target values. Listing 35-1 contains an example.
Listing 35-1. Animating Colors
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.css"/>
<style type="text/css">
#animTarget {
background-color: white;
color: black;
border: medium solid black;
width: 200px; height: 50px;
text-align: center;
font-size: 25px;
line-height: 50px;
display: block;
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#animTarget").animate({
backgroundColor: "black",
color: "white"
})
})
});
</script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<div id=animTarget>
Hello!
</div>
<button>Animate Color</button>
</body>
</html>
I style the div element in this document so that it has an initial background color of white and a color of black. When the button in the document is clicked, I call the animate method, specifying that these properties be changed to black and white respectively. The transition from one color to another is done gradually and both properties are animated simultaneously. You can see the effect in Figure 35-1.
Figure 35-1. Animating colors
Tip Notice that I use the standard CSS property names in the style element – background-color, for example. But when specifying the same property in the map object, I switched to using camel case – backgroundColor. This allows me to specify the CSS property as a JavaScript object property without having to enclose the term in quotes.
In this example, I specified the colors I wanted using the CSS color shorthand values, black and white. There are shorthand values for a wide range of colors, but the animate method will also accept hexadecimal colors (#FFFFFF, for example) and RGB function colors, such as rgb(255, 255, 255).
Tip Aside from the support for the color properties, you can use the animate method just as I described in Chapter 10.
jQuery UI provides a convenient way of animating sets of CSS properties using classes. Rather than specify each property, you simply define properties and values in a class and tell jQuery UI to add the class to one or more elements. jQuery UI will animate the transition from one state to another. Listing 35-2 provides a demonstration.
Listing 35-2. Animating Using Classes
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.css"/>
<style type="text/css">
.elemClass {
background-color: white;
color: black;
border: medium solid black;
width: 200px; height: 50px;
text-align: center;
font-size: 25px;
line-height: 50px;
display: block;
margin-bottom: 10px;
}
.myClass {
font-size: 40px; background-color: black; color: white;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
if (this.id == "add") {
$("#animTarget").addClass("myClass", "fast")
} else {
$("#animTarget").removeClass("myClass", "fast")
}
})
});
</script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<div id=animTargetclass="elemClass">
Hello!
</div>
<button id="add">Add Class</button>
<button id="remove">Remove Class</button>
</body>
</html>
Once again, jQuery UI extends an existing jQuery method to add functionality. In this case, it is the addClass and removeClass methods that have been enhanced. I described the standard versions of these methods in Chapter 8. The jQuery UI versions do exactly the same thing: the second argument to the method to the duration and jQuery UI animates the transition from one class to the other.
In this example, I have defined a class called myClass, and there are buttons in the document that add and remove this class using the duration shorthand of fast. You can see the effect in Figure 35-2.
Figure 35-2. Animating elements using classes
Tip The standard CSS style cascading rules apply, which means that the properties in a class will only be applied if the class is the most specific for the target element or elements. In the previous example I styled the initial state of the element by id, but in this example I use a class so that my modifications have effect. See Chapter 3 for details of CSS style cascading.
jQuery UI also enhances the toggleClass method – this works in the same way as the standard toggleClass method that I described in Chapter 8, but takes a duration argument and animates the transition, just as in the addClass and removeClass example above.
In addition to enhancing some of the standard methods, jQuery UI also defines the switchClass method, which removes one class and adds another, animating the transition from one state to the other. Listing 35-3 contains a demonstration.
Listing 35-3. Using the switchClass Method
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.css"/>
<style type="text/css">
.elemClass {
border: medium solid black;
width: 200px; height: 50px;
text-align: center;
line-height: 50px;
display: block;
margin-bottom: 10px;
}
.classOne {
font-size: 25px; background-color: white; color: black;
}
.classTwo {
font-size: 40px; background-color: black; color: white;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#animTarget").switchClass("classOne", "classTwo", "fast")
})
});
</script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<div id=animTarget class="elemClass classOne">
Hello!
</div>
<button>Switch Class</button>
</body>
</html>
The arguments to the switchClass method are the class that should be removed, the class that should be added and the duration for the animation. In the example, my two classes define the same properties, but this need not be the case.
Using the jQuery UI Animations
jQuery UI includes a number of animation effects that can be applied to elements, much as with the core jQuery effects in Chapter 10. My recommendation is to use these effects sparingly. Animations applied carefully can be a genuine enhancement to the user experience – but all too often, they become a source of annoyance and frustration to the user. There are many different animation effects available, including blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, and slide.
Note In this chapter, I am going to show you how to apply these effects, but I am not going to get into the detail of each individual effect. There is a good summary of the effects and the settings that can be applied to some of them at http://docs.jquery.com/UI/Effects.
Using Effects to Show and Hide Elements
jQuery UI enhances the jQuery UI show, hide, and toggle methods to apply animation effects. I described the original versions of these methods in Chapter 10. To use the enhanced jQuery UI versions of these methods, provide additional arguments specifying the effect you want to use and the duration over which it should be applied. Listing 35-4 shows the use of these enhanced methods.
Listing 35-4. Using the Enhanced Show, Hide, and Toggle Methods
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.css"/>
<style type="text/css">
.elemClass {
font-size: 25px; background-color: white; color: black;
border: medium solid black; width: 200px; height: 50px;
text-align: center; line-height: 50px; display: block; margin-bottom: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
switch (this.id) {
case "show":
$("#animTarget").show("fold", "fast");
break;
case "hide":
$("#animTarget").hide("fold", "fast");
break;
case "toggle":
$("#animTarget").toggle("fold", "fast");
break;
}
})
});
</script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="toggle">Toggle</button>
<div id=animTarget class="elemClass">
Hello!
</div>
</body>
</html>
There are three buttons in this example and clicking them leads to the show, hide, or toggle methods being called. For all three buttons, I have specified that the fold animation should be applied, using the fast duration. These methods work just like their core jQuery counterparts, except that the transition is animated.
jQuery UI defines the effect method, which allows us to apply an animation to an element without having to show or hide it. When used with the right animation, this can be a useful way of drawing the user’s attention to an element in the document. Listing 35-5 contains an example.
Listing 35-5. Using the Effect Method
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.css"/>
<style type="text/css">
.elemClass {
font-size: 25px; background-color: white; color: black;
border: medium solid black; width: 200px; height: 50px;
text-align: center; line-height: 50px; display: block; margin-bottom: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#animTarget").effect("pulsate", "fast")
})
});
</script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<div id=animTarget class="elemClass">
Hello!
</div>
<button>Effect</button>
</body>
</html>
When the button in this example is clicked, the effect is applied in situ, without any permanent changes to visibility. In this case, I have used the pulsate effect, which causes the element to pulse on and off.
Using the jQuery UI CSS Framework
jQuery UI manages the appearance of widgets by applying a set of classes to elements that apply some complex CSS styles. Some of these classes are exposed to programmers so that elements that are not part of widgets can be styled in a consistent manner – I used some of these classes in the examples in Part IV of this book.
Using the Widget Container Classes
The three most basic classes in the CSS framework apply the core styles that are used on widgets. These classes are described in Table 35-3.
Table 35-3. jQuery UI Widget Container Classes
| Class | Description |
|---|---|
| ui-widget | Applied to overall container elements. |
| ui-widget-header | Applied to header container elements. |
| ui-widget-content | Applied to the content container element. |
These classes are applied to container elements – that is, those elements that contain all of the header and content elements (or, in the case of ui-widget, the outermost element). Listing 35-6 shows how to apply these classes.
Listing 35-6. Using the jQuery UI Widget Container Classes
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.css"/>
<style type="text/css">
body > div {float: left; margin: 10px}
</style>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<div>
<div>
Flowers
</div>
<div>
<div class="dcell">
<img src="peony.png"/><label for="peony">Peony:</label>
<input name="peony" value="0" />
</div>
</div>
</div>
<div class="ui-widget">
<div class="ui-widget-header">
Flowers
</div>
<div class="ui-widget-content">
<div class="dcell">
<img src="peony.png"/><label for="peony">Peony:</label>
<input name="peony" value="0" />
</div>
</div>
</div>
</body>
</html>
There are two sets of elements in this example, to one of which I have applied the container classes. You can see the effect in Figure 35-3.
Figure 35-3. Applying the jQuery UI Widget Container Classes
The next set of CSS framework classes lets us apply rounded corners to our widget-like elements. Table 35-4 describes the classes in this category.
Table 35-4. jQuery UI Widget Rounded Corner Classes
| Class | Description |
|---|---|
| ui-corner-all | Rounds all of the element’s corners. |
| ui-corner-bl | Rounds the bottom-left corner. |
| ui-corner-bottom | Rounds the bottom-left and bottom-right corners. |
| ui-corner-br | Rounds the bottom-right corner. |
| ui-corner-left | Rounds the top-left and bottom-left corners. |
| ui-corner-right | Rounds the top-right and bottom-right corners. |
| ui-corner-tl | Rounds the top-left corner. |
| ui-corner-top | Rounds the top-left and top-right corner. |
| ui-corner-tr | Rounds the top-right corner. |
These classes only take effect when an element has a background or margin, which means that they can be applied to the ui-widget-header and ui-widget-content classes, as shown in Listing 35-7.
Listing 35-7. Using the Rounded Corner Classes
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.css"/>
<style type="text/css">
body > div {float: left; margin: 10px}
</style>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<div>
<div>
Flowers
</div>
<div>
<div class="dcell">
<img src="peony.png"/><label for="peony">Peony:</label>
<input name="peony" value="0" />
</div>
</div>
</div>
<div class="ui-widget">
<div class="ui-widget-headerui-corner-top"style="padding-left: 5px">
Flowers
</div>
<div class="ui-widget-contentui-corner-bottom">
<div class="dcell">
<img src="peony.png"/><label for="peony">Peony:</label>
<input name="peony" value="0" />
</div>
</div>
</div>
</body>
</html>
In order to create an overall effect, I have rounded the top corners of the header element and the bottom corners of the content element. You can see the result in Figure 35-4. Notice that I have added a little padding to the header element – the rounded corners are applied within the element’s content box, which can require some additional space to avoid clipping content.
Figure 35-4. Applying rounded corners to elements
Using the Interaction State Classes
You can also apply CSS framework classes to show different interaction states, which allows to create elements that respond to user interaction in the same way that jQuery UI widgets do. Table 35-5 describes the classes available.
Table 35-5. jQuery UI Interaction Classes
| Class | Description |
|---|---|
| ui-state-default | Applies the default style for clickable widget. |
| ui-state-hover | Applies the style used when the mouse hovers over a clickable widget. |
| ui-state-focus | Applies the style used when a clickable widget has the focus. |
| ui-state-active | Applies the style used when a clickable widget is active. |
Listing 35-8 applies these four classes. Notice that I have applied padding to an inner span element in each case. The interaction state classes define padding values, and the easiest way to create spacing between the container element and the content is to target an inner element.
Listing 35-8. Applying the Interaction State Classes
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.css"/>
<style type="text/css">
body > div {float: left; margin: 10px}
span {padding: 10px; display: block}
</style>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<div class="ui-widgetui-state-defaultui-corner-all">
<span>Default</span>
</div>
<div class="ui-widgetui-state-hoverui-corner-all">
<span>Hover</span>
</div>
<div class="ui-widgetui-state-focusui-corner-all">
<span>Focus</span>
</div>
<div class="ui-widgetui-state-activeui-corner-all">
<span>Active</span>
</div>
</body>
</html>
You can see the effect of each class in Figure 35-5. Some of these states are similar in the jQuery UI theme that I am using, but you can use ThemeRoller (described in Chapter 17) to create a theme with increased state emphasis if required.
Figure 35-5. The effect of the interaction state classes
Some CSS framework classes allow us to provide the user with cues about the state of elements in the document. These classes are described in Table 35-6.
Table 35-6. jQuery UI Interaction Cue Classes
| Class | Description |
|---|---|
| ui-state-highlight | Highlights an element to draw the user’s attention. |
| ui-state-error | Emphasizes an element that contains an error message. |
| ui-state-disabled | Applies the disabled style to an element (but doesn’t actually disable the element itself). |
Listing 35-9 shows the use of the highlight and disabled cues.
Listing 35-9. Using the jQuery UI highlight Class
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.css"/>
<style type="text/css">
body > div {float: left; margin: 10px}
span {padding: 10px; display: block}
</style>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<div class="ui-widget">
<div class="ui-widget-header ui-corner-top" style="padding-left: 5px">
Flowers
</div>
<div class="ui-widget-content ui-corner-bottom">
<div class="dcell">
<img src="peony.png"/><label for="peony">Peony:</label>
<input name="peony" value="0" />
</div>
</div>
</div>
<div class="ui-widgetui-state-highlight ui-corner-all">
<div class="ui-widget-header ui-corner-top" style="padding-left: 5px">
Flowers
</div>
<div class="ui-widget-content ui-corner-bottom">
<div class="dcell">
<img src="peony.png"/><label for="peony">Peony:</label>
<input name="peony" value="0" />
</div>
</div>
</div>
<div class="ui-widgetui-state-disabled">
<div class="ui-widget-header ui-corner-top" style="padding-left: 5px">
Flowers
</div>
<div class="ui-widget-content ui-corner-bottom">
<div class="dcell">
<img src="peony.png"/><label for="peony">Peony:</label>
<input name="peony" value="0" />
</div>
</div>
</div>
</body>
</html>
You can see the effect of the classes in Figure 35-6. Notice that I have also applied the ui-corner-all style when using the ui-state-highlight class. This class applies a border, which will be shown with square corners by default. If the child elements have rounded corners, then you need to round the corners of the highlighted element as well.
Figure 35-6. Applying the highlight cue class
Listing 35-10 shows the use of the error state.
Listing 35-10. Using the Error Cue
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="jquery-2.0.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.css"/>
<style type="text/css">
body > div {float: left; margin: 10px; padding: 20px}
</style>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<div class="ui-state-error">
Oops! Something went wrong.
</div>
</body>
</html>
You can see the effect in Figure 35-7.
Figure 35-7. Using the error cue class
Summary
In this chapter, I described the enhancements that jQuery UI provides for animating transitions for color, visibility. and CSS classes. These are useful features, but they must be used with caution to avoid bombarding the user with distracting and annoying effects. I also described the principle classes of the jQuery UI CSs framework, which allows us to style elements in a way that is consistent with jQuery UI widgets, allowing us to extend the appearance of our jQuery UI theme to the rest of our HTML documents.