"HTML" was retired on January 6, 2020. You are now viewing the recommended replacement.
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
What makes a plugin work? What files are usually used?
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 you saw in the last video,
there are jQuery plugins for
0:00
many different user interface needs.
0:03
Some are simple, and do just one thing.
0:05
Others are really a full suite of tools,
like jQuery UI,
0:08
which solves dozens of common
web application problems.
0:11
jQuery plugins vary in what they can do.
0:16
But many plugins follow a basic pattern,
0:19
that once you master can make it easy for
you to add interactivity to your site.
0:21
Most plugins include the following,
a CSS file.
0:27
This file includes all of the formatting
information that controls the look
0:32
of whatever html the plugin
adds to the page.
0:35
For example,
0:39
with the Light Box plugin, the CSS file
controls the look of navigation buttons,
0:40
the frame around the photo, and usually
the placement of the photo on the page.
0:44
A JavaScript file.
0:50
The plugin's program is in JavaScript,
and each plugin will have its
0:51
own JavaScript file that you
use in combination with jQuery.
0:56
Images.
1:01
Some plugins also include images.
1:02
Icons, for example.
1:05
That might appear as part of
the interface of that plugin.
1:06
Now not all plugins use images, nor
do all plugins include a CSS file.
1:10
But every plugin has a JavaScript file.
1:15
Lets take a look at the plugin we'll
be using in this section of the course.
1:18
For this section of the course, I'll
introduce you to a jQuery plugin that lets
1:23
you animate transitions between pages.
1:27
When you click a link to visit
another page on your site.
1:30
Instead of simply unloading one page and
1:32
reloading another,
this plugin lets you add visual effects.
1:34
Such as fading out one page, and
then fading in the incoming page.
1:38
Unfortunately, the plugin's name,
Animsition, is pretty hard to pronounce.
1:43
I guess it's a combination
of animation and transition.
1:48
I'll just be calling it
the animated transition plugin for
1:52
the rest of this course.
1:54
As you can see, this plugin offers a wide
variety of choices of animation effects.
1:56
Fade, flip, zoom, rotate.
2:01
Before we get into how to use this plugin,
let me take you through the steps of
2:04
downloading the plugin, and show you
the kinds of files that you'll be using.
2:08
You don't need to follow along if
you don't want to at this part.
2:12
Because in a minute I'll have you
open a workspace on this page.
2:15
And we'll take a look at the files and
how they're organized for our project.
2:18
You'll notice here at the top of the page
is a link to download the plugin
2:22
from GitHub.
2:26
GitHub is an online site for
sharing projects nad managing code
2:27
using the file version
control system know as git.
2:31
Many free and
open-source projects are hosted on GitHub.
2:34
And you'll frequently find
jQuery plugins hosted there.
2:37
If you haven't used GitHub before,
let's take a quick look.
2:42
This is the view for a single project,
or what's called a repository in Git.
2:46
This list here is all the files for
the project.
2:51
However, most of these
files you won't need.
2:54
Some are configuration files for Git.
2:57
Other files I used with front-end
development tools like Grunt and OJS.
2:59
The SRC folder here stands for Source.
3:04
And in this case represents
the actual JavaScript file and
3:06
CSS file that the author
uses to create the plugin.
3:10
But it's not the files you'll use.
3:14
I know that's a bit confusing, but
this Dist folder here, stands for
3:16
Distribution, which means the files
that the author is distributing.
3:21
And these are where
the files we want are kept.
3:25
Unfortunately, each plugin author
organizes their files in different ways.
3:28
So the GitHub repositories for another
jQuery plugin might not look like this.
3:33
How do we get the files?
3:38
Well, if we click these links,
we just see the files,
3:39
we don't actually download them.
3:43
However, on the main page for
3:44
the repository,
you'll find a Download ZIP button.
3:46
Clicking this button downloads
the complete contents of the repository.
3:50
Digging into this a bit, you'll see that
we've got all the files we saw on GitHub.
3:57
In particular the Dist folder contains
CSS and JavaScript, or JS, folders.
4:01
Here's how I like to
organize my plugin files.
4:08
I'll change the name of the Dist file
to Animsition, the name of the plugin.
4:11
I also moved the files out of the CSS and
4:16
js folders so all of the plugin
files just sit in one folder.
4:19
You don't have to do it this way, however.
4:23
You can leave them in
folders the way they come.
4:25
I just think.
Think this is simpler.
4:28
You'll see there are also
different versions of the files.
4:30
The .min files are minified files, files
that are made smaller by stripping out
4:33
extra whitespace and
using other compression tricks.
4:38
Unfortunately, you can't really read and
understand minified files.
4:42
So if you want to learn more about how
the CSS or JavaScript was written for
4:45
this plugin or you want to change it,
4:50
then you might want to hold on to
the non-minified versions as well.
4:52
However, when adding these
to your website, and
4:56
to your web pages,
you'll want to use the minified versions.
4:59
They will load more quickly, and your
site will be faster for your visitors.
5:02
I'll then bring this folder over to my
project, and put it in the JS folder.
5:07
It's a good idea to keep all of the files
for a plugin together, in a single folder.
5:11
If you spread the plugin
files across your site.
5:16
For example you move the plugin's .CSS
file to your site's .CSS folder, and
5:18
the plugin's JavaScript file to
your site's JavaScript folder.
5:23
It'll be harder to update the plugin,
or remove it from your site.
5:27
Remember, these are jQuery plugins, so
we also need the jQuery library for
5:32
a plugin to work.
5:36
You can get that from the jQuery site, or
5:37
use one of the many CDNs, or Content
Delivery Networks, that host jQuery.
5:39
If you're still not familiar with jQuery,
see the teacher's notes for
5:44
links to other Treehouse courses
that can help you learn.
5:48
Now let's open Workspaces on this page,
and look at the files for this project.
5:51
You can also download the project files.
5:58
Look under the Downloads tab.
6:00
All of the files for
this course are there, and
6:01
you can use your own text
editor to follow along.
6:04
Okay, this project has three web pages,
a CSS folder.
6:07
An img folder for images and a js folder
for our JavaScript files and plugin files.
6:11
Inside the js folder
is also a jquery file.
6:17
The plugin uses this library file for
all of its magic.
6:20
In the next video lets
put this plugin to use.
6:24
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