Preview
Video Player
00:00
00:00
Plugin Files
6:27What makes a plugin work? What files are usually used?
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