Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using jQuery Plugins!
You have completed Using jQuery Plugins!
Preview
Most plugins are highly customizable. You can control how they look, how they behave and what they do simply by passing an object literal full of settings.
Related Videos
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
As I mentioned in the last video,
most plugins have the same file structure.
0:00
A CSS file, a JavaScript file,
and perhaps some images.
0:05
In addition, many plugins are added to
a web page following the same steps.
0:09
Most plugins are so easy to use,
that you simply set up your page,
0:13
select an element on the page,
and call the plugin method.
0:17
However, good plugins are powerful, and
0:21
let you customize how they work, simply
by setting different plugin options.
0:23
For most plugins,
you set options by simply passing
0:28
a JavaScript object literal
when you call the plugin.
0:32
A JavaScript object literal,
is simply a set of name value pairs.
0:35
In the case of a plugin, the options
object is made up of an option name and
0:41
a setting you want to provide for
that option.
0:45
Let's take a look,
let's start with the docs.
0:48
In fact, you should always start with the
documentation for any plugin you've found.
0:52
A good plugin will have
good documentation.
0:56
This animated transition plug ins website,
0:59
shows different examples of
the transition effects available.
1:02
On each page, if you scroll to the bottom,
you'll find an example
1:06
providing different options to the plugin,
which controls how it works.
1:09
Most plugins let you pass a JavaScript
object literal when you call the plugin.
1:14
An object literal is basically a set
of property names and property values.
1:19
And plugins use them to receive settings
that control how the plugin works.
1:23
If you're new to JavaScript object
literals, check the Teachers Notes for
1:28
a link to a video to
learn more about them.
1:31
Okay, this plugin has various
settings that you can control.
1:34
The first two options here let
you pick the type of transition
1:38
the plugin will use when loading a web
page or when exiting a web page.
1:41
Let's try two different
transition effects.
1:46
We'll make the page appear
to move out by sliding
1:48
toward the right side of
the browser window and
1:51
slide in from the right side of
the window when the page loads.
1:54
If you want to follow along,
launch the workspace for this page and
1:58
open the main.js file.
2:01
I'll start by adding an object literal
which is just a set of opening and
2:03
closing braces.
2:07
We're passing this object as
an argument to the plugin.
2:10
The plugin has different keywords for
the in and out transition effects.
2:14
To change the effect when the page loads,
2:19
we add an inClass property and
set its value to the effect we want.
2:21
In this case the effect is
called fade-in-right-lg.
2:28
LG means large.
2:31
How did I know that?
2:34
Well it's in the documentation for
the plugin.
2:35
As you can see,
each effect has its own page.
2:40
And if you scroll to
the bottom of the page,
2:43
you'll see the value you
must use to get that effect.
2:45
Let's add an outClass, now.
2:54
With JavaScript objects, you add
a comma after each property value pair.
2:57
Make sure you don't use a semicolon,
that's an easy mistake to make.
3:02
Let's see how this works.
3:06
I'll save the file, and
preview the workspace.
3:07
Cool, this is looking really good.
3:10
I think I'll leave it like it is.
3:12
You should feel free to look through
the plugin's documentation and
3:15
try different transition effects.
3:18
In the last video,
you added a class name to each link or
3:20
a tag that triggers the effect.
3:24
For example,
you added the animsition-link class
3:27
to each of the links in the top
navigation bar for the site.
3:32
That took a bit of work.
3:37
Especially when we had to add
it to every page on the site.
3:38
Fortunately, there's a simpler way.
3:42
I'll open the index.html page and
remove that class from each of the links.
3:45
Make sure you don't remove the animsition
class from the div tag at the top.
3:52
You need that to apply the plugin.
3:56
Okay, it's here in four different links.
3:59
I'll just remove the class from each.
4:02
Let's go back to the docs.
4:09
You can see that the plugin accepts
a property named linkElement.
4:11
You provide a CSS selector that the plugin
4:15
uses to identify which links
will trigger the effect.
4:18
In our case, all of the links in this
header element should trigger the effect.
4:22
I'll go back the main.js file and
add that option.
4:29
The linkElement property will
take any selector, in fact,
4:37
you could just type a, and then every link
on the page would trigger the effect.
4:41
It's a good idea to go through
the other pages in this project, and
4:47
remove the animsition-link class
from the links in those pages.
4:51
That's the team.html and work.html files.
4:56
But I'll leave that for you to do.
4:59
Let's add one last set of options.
5:02
You can control how quickly the effect
works by adjusting the speed
5:04
of the unloading and loading effects.
5:08
The plugin calls this the inDuration
property and the outDuration property.
5:12
You provide a number for
each of these properties.
5:18
The number represents the number
of milliseconds the effect
5:22
should take to complete.
5:25
In this case, the effect when the page
appears takes 1,000 milliseconds or
5:27
1 second.
5:32
But the page exits more quickly in
500 milliseconds or half a second.
5:33
Let's see how it works.
5:39
Save the files, and preview the workspace.
5:42
Cool, I'd recommend that you
practice a bit with this plugin.
5:46
Go to the documentation and find new
types of transitions and test them out.
5:50
Look at the other possible settings for
5:54
the plugin and see what happens
when you plug in different values.
5:56
Experiment and have fun.
6:00
All right, you now know the basics
of using nearly every jQuery plugin.
6:02
Each plugin is different but most follow
the same setup and configuration pattern.
6:06
In the next section,
we'll look at another plugin that sticks
6:12
elements to the top of the browser
window as a user scrolls the page.
6:15
You'll also learn how to plugin events,
6:19
to make your pages respond to
the actions of the plugin.
6:22
See you there.
6:25
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up