jQuery UI 1.6 The User Interface Library for jQuery phần 10 pptx

This chapter isn't going to end with a fun with example – the whole chapter is instead going to be written from a 'fun' perspective, so we can sit back, relax a little, and enjoy the sh

You should find when you run the page that you can move the boxes around, close your browser, run the page again, and see the boxes retain the order that you gave them:

Please note that that example does not run correctly in Opera and exhibits the same unusual placement of sorted items that occurred in some of the earlier connected-list examples in the chapter

We've finished off our tour of the interaction components of the library by looking

at the sortables component Like the other modules that we looked at before, it has

a wide range of properties and methods that allow us to configure and control its behavior and appearance in both simple and more complex implementations

We started the chapter off with a look at a simple, default implementation with no configuration to see the most basic level of functionality added by the component

We looked at some of the different elements that can be made sortable and added some basic styling to the page

Following this, we looked at the range of configurable properties that are exposed by the sortable API The list is extensive and provides a wide range of functionality that can be enabled or disabled with ease

We moved on to look at the extensive event model used by this component which gives us the ability to react to different events as they occur in any sort operation initiated by the visitor

Connected lists offer the ability to be able to exchange sortable items, giving our visitors the ability to move items between separate lists We saw the additional properties and events that are used specifically with connected sortable lists

In the last part of the chapter, we looked at the methods available for use with the sortables component and focused on the highly useful serialize method, and also had a quick look at its compatibility with other members of the jQuery UI library in the form of the sortable tabs example

UI Effects

So far, we've looked at a range of incredibly useful widgets and extension helpers All are easy to use, but some have had their subtle nuances which have required consideration and thought during their use Some of the components' APIs that we have looked at have been huge The effects of the library on the other hand are for the most part, extremely compact, with very few properties to learn and no methods

at all Using the effects is as simple as calling the effect's constructor and including maybe one or two properties if required

Each of the previous chapters has finished on a fun with section in which the API that

the chapter focuses on has been put to use in a functional, potentially useful, and

above all fun scenario This chapter isn't going to end with a fun with example – the

whole chapter is instead going to be written from a 'fun' perspective, so we can sit back, relax a little, and enjoy the show that the UI effect components can put on for us.The effects that we'll be looking at in this chapter are as follows:

The core effects file

Like the individual components themselves, the effects require the services of a separate core file which provides essential services to the effects, such as creating wrapper elements, and controlling the animations Most, but not all, of the effects have their own source file

All we need to do to use an effect is include the core file (effects.core.js) in the page before the effect's source file, and then forget about it Unlike the ui.core

js file however, the effects.core.js file has been designed to be used, in part, completely standalone

When using the core effect file on its own we can take advantage of color animations, such as smoothly changing the background color of an element into another color (and not just a snap change but a smooth morphing of one color into another), class transitions, and advanced easing animations

<div><label>Name: </label><input type="text"></div>

<div><label>Age: </label><input type="text"></div>

<div><label>Email: </label><input type="text"></div>

The animate method, as I'm sure you're aware, is part of jQuery rather than jQuery

UI, but the effects.core.js file extends the animate method by allowing it to specifically work with colors and classes

When the Submit <button> is clicked in this example, we simply use the animatemethod to apply a series of new CSS properties to the target elements These style properties are supplied to the method as the properties and values of a literal object

We also use a basic stylesheet in this example In another new page, add

the following;

div { margin-bottom:5px; }

label { display:block; width:100px; float:left; }

input { border:1px solid #000000; }

Save this as colorAnim.css in the styles folder When we view this page in our

browser, we should see that any fields left blank smoothly turn red when the Submit

<button> is clicked, while fields that are not empty smoothly turn green The most attractive however are when a field changes from red to green

The following screenshot shows the page once the Submit <button> has

of the file's use in the following example Create the following new file in your text editor:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">

<title>jQuery UI Class Animation Example</title>

</head>

<body>

<div><label>Name: </label><input type="text"></div>

<div><label>Age: </label><input type="text"></div>

<div><label>Email: </label><input type="text"></div>

//do nothing if empty or add pass class

($(this).val().length == 0) ? null : $(this).

//do nothing if not empty or add error class

($(this).val().length != 0) ? null : $(this).

Save this as classAnim.html The effects.core.js extends the jQuery addClassmethod by allowing us to specify a duration over which the new class name should

be applied instead of just switching it instantly We also use the switchClass

method of the effects.core.js file when the fields already have one of the

class names

Essentially, the page functions as it did before, although using this type of class transition allows us to use non-color-based style rules as well, so we could adjust widths, heights, or anything else controlled by CSS As in the previous example, we have a stylesheet attached This is essentially the same as in the previous example except with some styles for our two new classes Add the following selectors and rules to colorAnim.css:

.error { border:1px solid #ff0000; background-color:#ff9999; }

.pass { border:1px solid #00ff00; background-color:#ccffcc; }

Save the updated file as classAnim.css in the styles folder In the next screenshot,

we see the page after it has been interacted with:

Please note that at the time of writing, this example only works in Firefox

Advanced easing

The animate method found in standard jQuery has some basic easing capabilities built in, but for more advanced easing, you had to include an additional easing plug-in (ported to jQuery by GSGD)

The effect.core.js file however has all of these advanced easing options built right in so there is no need to include additional plugins We won't be looking at them in any real detail in this section, however, as we'll be using them in some of the examples later on in the chapter.

Highlighting

The highlight effect temporarily applies a light yellow coloring to any element that it's called on Let's put a simple example together so we can see the effect in action

In a new page in your text editor, add the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">

Save this as highlight.html The code which invokes the highlight effect takes the same familiar form as other library components The effect constructor is called and the actual effect is specified as a string argument in the constructor View the

example and click the Hint button The third button should briefly be highlighted:

The library files we needed for this example are listed below:

Additional effect parameters

Each of the effect constructors, as well as the parameter which dictates which effect

is actually applied, can take up three additional parameters which control how the effect functions All are optional, and consist of the following (in the listed order):

An object containing additional configuration properties

An integer representing in milliseconds the duration of the effect, or a string specifying one of slow, normal, or fast

A callback function that is executed when the effect ends

Let's add these additional parameters into our highlight example to clarify their usage Change the final <script> element in highlight.html so that it appears

The highlight effect has only one configurable property that can be used in the configuration object passed and that is the highlight color

The animation should now proceed much slower as we have set the duration to

2000 milliseconds (2 seconds) Note that this third parameter may also take a string representing the speed of the animation Our callback function, passed as the fourth and final argument, is perhaps the least useful callback in the history of JavaScript, but it does serve to illustrate how easy it is to arrange additional post-animation code

execution Here's how the page should look after the Hint button has been clicked:

<a href="#">Home</a><a href="#">About</a><a href="#">Help</a>

<a href="#">Products</a><a href="#">Services</a>

direction up Sets the direction of the bounce

distance 20 (pixels) Sets the distance of the first bounce

You'll notice when you run the example that the bounce effect has an ease-out easing feature built into it, so the distance of the bounce will automatically decrease as the animation transpires We also need a little CSS for this example Add the following styles in a new page:

to a smooth stop at the end of the animation)

Let's change the previous example so that it uses the shake effect instead of the bounce effect Change bounce.html so that it appears as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">

<a href="#">Home</a><a href="#">About</a><a href="#">Help</a>

<a href="#">Products</a><a href="#">Services</a>

This effect shares the same properties as the bounce effect, although the defaults are set slightly differently The properties are listed in the following table:

direction left Sets the direction of the shake

distance 20 (pixels)(pixels) Sets the distance of the shake

Transference

The transfer effect is different from the others in that it doesn't directly affect the targeted element Instead, it transfers the outline of a specified element to another specified element To see this effect in action, create the following page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">

Save this as transfer.html We've created a basic product listing for an imaginary

hardware retailer When the Buy <button> is clicked, the transfer effect will give the impression of the product being moved into the basket

Of course, a proper shopping cart application would be exponentially more

complex than this, but we do get to see the transfer effect and get to use the built-in callback function to do a little post-animation processing, so the exercise should still

be beneficial

We also need some CSS for this example, so create the following new stylesheet:

#container { width:607px; margin:0 auto; }

.ui-effects-transfer { border:2px solid #66ff66; }

Save this as transfer.css in the styles folder The key rule in our stylesheet is the one which targets the element that has a class of ui-effects-transfer This element is created by the control and together with our styling produces the actual effect

Run the file in your browser I think you'll agree that it's a nice effect which would add value to any page that it was used on Here's how it should look while the transfer is occurring:

The transfer effect has just two configurable properties, one of which is required and that we have already seen For reference, both are listed in the following table:

className ui-effects-transfer A new class to apply to the element the

transfer originates from

transferred to This property is mandatoryThe four effects that we've looked at so far all have one thing in common—they can only be used with the effect method The remaining effects can be used not only with the effect method, but also with the toggle, and the show/hide methods Let's take a look

//close the box on close icon click

$(".close").click(function() {

//shrink the box to nothing then append to closed list

$(this).parent().parent().effect("scale", { percent:0 }, "slow", function() {

$(this).appendTo("#hidden");

});

});

Save this file as scaling.html The percent property indicates the ending size

of the element the effect is applied to Here's how one of our boxes should look

in mid-scale:

There are several more properties that can be used with scale, which are as follows:

be a string specifying either both, vertical,

or horizontal

element to be scaledorigin ["middle","center"] Sets the vanishing point, used with

show/hide animations

I mentioned a little while ago that the effects that we're looking at now can be used with other methods The file in our previous example could be reconstructed to use the hide method instead:

//close the box on close icon click

$(".close").click(function() {

//shrink the box to nothing then append to closed list

$(this).parent().parent().hide("scale", { }, "slow", function() {

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">

<html lang="en">

<head>

<link rel="stylesheet" type="text/css" href="styles/explode.css"> <meta http-equiv="Content-Type" content="text/html;

As our example shows, the effect can be used with either simple CSS properties like coloured backgrounds and borders, or more complex implementations involving proper images:

Physicists sometimes speculate as to why the arrow of time seems to only point forwards They invariably ask themselves philosophical questions like 'why do we not see grenades spontaneously forming from a large cloud of debris?' (actually, the object is usually an egg but I don't think an egg-based example would have had the same impact!)

jQuery UI cannot help our understanding of entropy, but it can show us what a grenade spontaneously reassembling might look like Change the click handler in the previous function so that it appears as follows:

//show the image

$("#detonate").click(function() {

$("#theBomb").show("explode");

});

Save this variant as explodeShow.html The animation is the same except that it

is shown in reverse Like the other effects, explode can also make use of specific timings and callback functions

The puff effect

Similar to the explode effect but slightly more subtle is the puff effect which

causes an element to grow slightly before fading away Like explode there are few configuration options to concern ourselves with

Consider a page that has AJAX operations occurring on it It's useful to provide a loading image that shows the visitor that something is happening Instead of just hiding an image like this when the operation has completed, we can puff it out of existence instead Create the following page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">

is comprised of the following styles:

#loading { position:relative; top:100px; left:100px; }