Preview
Video Player
00:00
00:00
Exploring Plugin Options
6:26Most 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.
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