JQuery: Novice to Ninja- P8 doc

Resizable Elements The jQuery UI library contains a Resizable plugin as part of its interaction function ality.. The Resizable plugin makes elements that you select able to be resized

Trang 1

Licensed to JamesCarlson@aol.com

We’ve named our function stylesheetToggle, and called it twice: once when the

document first loads, and again whenever we resize You’ll notice that we only

need to pass the function’s name to the resize event handler; since we are not de

claring a function here, we have no need for the the functionkeyword, or any curly

braces or parentheses

Resizable Elements

The jQuery UI library contains a Resizable plugin as part of its interaction function

ality The Resizable plugin makes elements that you select able to be resized by

adding a small handle to the bottom corner of the element This can be stretched

around with the mouse (much like your operating system’s windows) Like all

jQuery UI components, it’s highly configurable and easy to use If you downloaded

the full jQuery UI library earlier, you’ll already have the class ready to go Otherwise,

you’ll need to head back to the download builder and include the Resizable com

ponent—which will also require the core library and a theme

Using the Resizable component in its most basic form is very easy We simply select

the element or elements we want to modify, and call the resizable function:

Trang 2

If we run this on our StarTrackr! site, we’re in for some unusual results: every

paragraph element instantly becomes resizable!

It’s a lot of fun to see this in action: suddenly our whole web page becomes malleable

By default, the Resizable interaction adds small handles in the bottom-right corners

of the elements These are styled in the jQuery UI style sheet, so have a look in there

if you’re interested in changing the way they look The default handles are illustrated

in Figure 3.7

Figure 3.7 Resizable paragraphs Now let’s look at a simple situation where this functionality is very handy: resizing

textarea elements

Resizable textarea

Sometimes providing a usable interface can conflict with the desire to keep a design

balanced and beautiful But thanks to jQuery, we can have our cake and eat it

too—and justify our way through those tricky client walk-throughs

One area where form and function often clash is in HTML form design This is partly

because users to your site will often have wildly different requirements For example,

if you’re providing an area for feedback, users will either want to write nothing, a

little, or a lot To strike a balance you could start a small textarea, but make it

resizable Therefore, the users with a lot to say will feel as if you’re letting them say

it Here’s how we can go about doing this using jQuery UI’s Resizable functionality:

Trang 3

This makes all our textareaelements resizeable, just like we did with the paragraph

elements The effect is shown in Figure 3.8 However, we’ve specified a few new

parameters to improve the feel, and to show the Resizable component’s flexibility

It has a plethora of configuration options, which you can explore in more detail on

the jQuery UI documentation site.13

Figure 3.8 Resizable textarea

We’ve also constrained how far the element can be stretched by specifying the

minHeight, minWidth, and maxHeight properties You’ll notice that we’ve omitted

the maxWidth property in favor of the containment parameter: this lets you specify

a container restricting the resizable element You can use either a jQuery selector

as the parameter or the special keyword parent to refer to the resizable element’s

parent element

We’ve also used the grid option to confine the resizable object to steps of a certain

size For some reason, this seems to add a nice feel to the resizing interaction The

13 http://docs.jquery.com/UI/API/1.7/Resizable

Trang 4

grid is specified as an array containing two elements: the horizontal grid size and

the vertical grid size

One other parameter you’ll want to look into is the handlesparameter This specifies

which sides of the element the handles will be attached to and, consequently, in

which directions the element can be stretched The parameter accepts the following

options: n, e, s, w, ne, se, sw, nw, and all You can specify any number of these by

separating them with a comma For example, { handles : 'n', 'se'}adds handles

to the top and bottom-right of the element

It’s common to see this kind of functionality built into input pages where content

length will vary significantly

Pane Splitter

Despite the disclaimer message functionality we’ve provided, our client’s legal team

is still worried about the possible repercussions that might extend from failing to

properly outline the company’s terms and conditions The problem, from a design

and usability perspective, is that there are pages and pages of terms and conditions

divided into many subsections—yet they need to be prominently displayed on the

home page Perhaps a splitter could help us out

A splitter is a UI component that divides multiple areas on a page in a way that al

lows users to resize elements; this way, users are able to decide how much space

they want to allot each area Splitters are commonplace in desktop applications,

and with the explosion of Rich Internet Applications, they’re making their way onto

the Web We can build on our experience with the Resizable component to simulate

a simple splitter that contains a “Table of Contents” in one pane and StarTrackr!’s

“Terms and Conditions” content in the other The widget’s appearance is shown in

Figure 3.9

Trang 5

Figure 3.9 A horizontal pane splitter For now we’ll focus solely on the resizing functionality Dynamically loading each

section’s content into the panes will be covered in plenty of detail in Chapter 5

Our splitter will consist of two divelements, representing each pane, nested inside

of a containing element that has fixed dimensions We’ll encase the table of contents

in a block-level element, so that when the user resizes the panes the text won’t wrap

and mess up our nested list:

⋮

We’ll now add some simple styles in a new splitter.css style sheet You can see that

we’ve fixed the height of the containing div, and made the child elements each

consume 50% of the width by default You could change this to specify different

values if it was necessary to start with an alternative to a 50:50 split If you need to

use a CSS border, you’ll have to specify your widths in pixels and make sure they

all add up:

Trang 6

chapter_03/21_horizontal_pane_splitter/splitter.css

Next, our jQuery code To create a horizontal splitter, we make the first element

resizable and specify an east-facing handle—so only the right edge of the div will

be resizable

If you were to run the example with only a simple resizablestatement, you’d notice

that we’re almost there: the two elements act somewhat like a split pane—except

that the right element’s width remains constant rather than expanding to fill the

Trang 7

remaining space when you drag the handle To take care of that, we’re going to have

to do some calculations inside the resizable widget’s resize function This is an

event handler that fires as the component is being resized:

Every resizing will now also trigger a change in the second element’s width A bit

of basic math helps us work out what the widths should be: we take the parent

container’s width (that is, the total width), then subtract the first div’s outerWidth

The outerWidth function is a useful way to grab the total width of an element, in

cluding any padding and borders (it can also include margins if you pass it the op

tional parameter true) Perhaps unsurprisingly, there’s a corresponding outerHeight

function as well

Having calculated how much space is left to use up, we’re almost ready to set the

first element’s width There’s just one remaining catch: if the second divhas borders

or padding, we need to take these into consideration Unfortunately the outerWidth

function is read-only, so we’re unable to use it to set the total height

To calculate how much of the element’s width consists of borders and padding, we

need to subtract the element’s outerWidthfrom its width Subtracting that from the

remainingSpace variable gives us exactly how many pixels wide the second div

needs to be—and we can complete our horizontal splitter

Trang 8

JavaScript Variables

The line var remainingSpace = $(this).parent().width()

$(this).outerWidth(); assigns the result of the calculation to a variable called remainingSpace From now on in our code, we can simply write

remainingSpace whenever we need to access this value

The following line (var divTwo = $(this).next();) is performing a very

similar function, except that this time we’re assigning a jQuery selection to a

variable (divTwo) This can subsequently be used like any other jQuery selection

Using variables like this helps to make your code more readable, as you can keep each line as concise as possible It also makes your code more efficient; retrieving

a value from a variable is much quicker for JavaScript than figuring out the value

in the first place

If we then wanted to have a go at implementing a vertical splitter, there’s little to

change: our pane elements stack on top of each other (rather than side by side), and

our resizable call uses a south-facing handle instead of an east-facing one The code

is also almost identical—but now we’re interested in the element’s heights, not

widths:

These simple splitters are quite useful, require very little code, and will be suitable

for many purposes But if you require complex splitter behavior, such as multiple

split panes or nested panes, head over to the plugin repository and check out the

jQuery Splitter plugin

Trang 9

That’s How We Scroll And Animate

What a chapter! We’ve mastered animation, scrolling, and resizing, and seen how

chaining can help us easily write succinct, powerful functionality in a readable and

natural manner We’re starting to apply our jQuery knowledge to create some great

effects However, what’s important to concentrate on as you move through the book

is not the effects themselves, but the underlying concepts that we use to implement

them

Even the most complex-looking effects tend to come out of a few simple actions

chained together cleverly It’s up to you to sit down, think up some ideas, and try

to implement them for yourself

Trang 10

Chapter

4

Images and Slideshows

There’s no more fooling around now With the basics well and truly under our belts,

we already have unlimited potential to create some world-class effects Our client

is over the moon; we’ve given him his “Web 2.0,” and now his questionable startup

has found favor with several of the big social networking sites He’s asked us to add

in some “stuff” that really cooks: “image galleries, slideshows, fading effects—the

works!” And why not? We have the tools, and we have the talent!

It would be a fairly boring Internet (at least visually) without images; much of the

content we receive on our web-based travels is in the form of pictures and design

elements such as borders, icons, and gradients that help to define our interaction

with a web page When we combine all of these elements with a healthy dose of

jQuery, we start to see some vibrant and startling effects emerge As well as the

bog-standard components we’ve come to know and love, jQuery provides the means for

implementing some less common, relatively new effects and features that would

be difficult to do in JavaScript alone

Trang 11

Our client wants Web 2.0, so let’s give him the quintessential Web 2.0 effect: the

lightbox A lightbox—a term borrowed from photography—is used is to display

full-sized versions of an image thumbnail in a modal dialog Typically, the entire

background becomes darker to indicate that it’s been disabled The user must interact

with the image (by hitting a close button, for example) to continue working on the

page

Custom Lightbox

Lightboxes are very common these days, and many feature some very complex

functionality: animations, transitions, as well as the ability to display video, or to

load content via Ajax As always, there are some excellent plugins available that

do all this, and we’ll be visiting one of them in the next section—but for the moment,

we’ll build our own lightbox

Why build our own? For our example, we just want a basic image view without any

fanciness, and the kilobytes that fanciness costs us We’ll also have the chance to

look under the hood and see how this type of functionality is implemented

Our lightbox will be extremely simple: any HTML link that has a class name of

lightbox will, when clicked, pop up the image file that the link points to The

picture will be centered on the screen, and the surrounding areas will be disabled

and darkened as a visual cue The effect is demonstrated in Figure 4.1

Let’s start with the HTML links They’re just tags pointing at image files with a

lightbox class, so we can target them in our jQuery:

When the image is displayed, we want the entire screen to go dark How do we do

this? The easiest way is to add a large div to the page that’s as tall and wide as the

screen itself Inside that div, we’ll add another divinto which we’ll load the image

Trang 12

Figure 4.1 Our lightbox effect The styling for the overlay is quite straightforward: 100% height and width, and

a black background Later, we’ll fade the opacityof the element to give it its shadowy

appearance One other trick is to add a spinning loader image to the center of this

element When we start loading the image the spinner will display as part of the

background It will appear to vanish when the image loads, but in reality it will

simply be hidden behind the image:

chapter_04/01_lightbox/lightbox.css

Trang 13

Next, we add a clickhandler to our lightbox links When they’re clicked, we’ll add

the dark overlay element, the image container, and the image itself The container

isn’t strictly necessary for our bare-bones example, but is helpful when you want

to extend the lightbox’s functionality, such as adding borders, descriptions, or Next

and Previous buttons:

The overlay is positioned at the top of the screen, and quickly faded from invisible

to 50% opacity to provide the background effect The lightbox container is added

to the page and immediately hidden, awaiting the loading of our image The image

is added to the container, and its src attribute is set to the location of the image

Trang 14

(extracted from the link’s href) To do this we use jQuery’s powerful attr method,

which can be used to retrieve or set any attribute of a DOM element When called

with only one parameter (such as $(this).attr('href')), it returns the value of

that attribute With a second parameter (for instance, $('<img />').attr('src',

…), it sets the attribute to the value provided

Then we attach a few event handlers to the image One of these events is new to us:

load It’s a close cousin to the ready event, but fires when an element (in this case

our image) is 100% loaded

Quick Element Construction

Creating new elements is very satisfying, and a task you’ll have to do frequently

There’s an alternative way to set up a new jQuery object, which involves passing

an object as the second parameter The object contains all of the attributes and settings you want the new item to have For example:

jQuery has a bit of smarts in how it reacts to the properties you set If you give it

an event, it will bind the provided handler to the event (as we’ve done with load and click) If you use a jQuery method name like text, html, or val, it will use the jQuery methods to set the property Everything else will be treated as an attri

bute, as done with the src property The end result is the same jQuery object as the one we constructed before, but if you’re comfortable with JavaScript object notation, you might prefer this method of element construction

Finally, we add a return false; to prevent the default behavior of the HTML link from occurring Otherwise, the user would navigate away from our page and to the

image itself

Now let’s have a look at the positionLightbox function:

Định dạng
Số trang	15
Dung lượng	920,97 KB