Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
What are jQuery Plugins, what can they do and why you should be using them.
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
[SOUND] Hi, I'm Dave.
0:00
Welcome to Using jQuery Plugins.
0:04
jQuery plugins let you add interactive
page elements like sliders,
0:09
pop up photo galleries,
animated navigation bars,
0:12
calculators, calendars, video backgrounds,
and more to your web pages.
0:16
All of this without doing
a lot of programming yourself.
0:20
jQuery plugins leverage
the power of jQuery,
0:23
the most popular JavaScript
library in the world.
0:26
jQuery simplifies common JavaScript
tasks such as selecting and
0:30
manipulating page elements, sending and
0:34
receiving data using Ajax, and adding
engaging visual effects to a web page.
0:36
jQuery is a very powerful tool but,
by itself, it doesn't do anything.
0:42
You have to write your own programs
using jQuery's commands and
0:46
methods to get anything done.
0:49
Fortunately, many talented designers and
developers have already written
0:52
thousands of useful, and sometimes not so
useful, programs that use
0:56
jQuery to improve the user interface and
functionality of websites.
1:00
In this course, I'll show you
how to use a few useful plugins.
1:05
But more importantly, I'll show you the
basic structure that most plugins follow.
1:08
So when you find a new
plugin you want to try out,
1:14
you'll know the basics of
adding it to your webpages.
1:16
In addition, I'll give you a few tips for
finding and selecting plugins.
1:19
But before we do that,
let me show you a few examples so
1:24
you can see what jQuery plugins can do.
1:27
jQuery plugins can be simple or complex.
1:30
They can add just one
new feature to a page or
1:32
dozens of features to an entire website.
1:35
J calculator is a simple jQuery
plugin that adds a calculator
1:37
to a text input field.
1:41
Click in the field and
a basic calculator appears.
1:43
You can add numbers together, multiply,
1:46
subtract, and divide and
the results appear in the form field.
1:52
The jQuery adaptive modal plugin makes
it easy to create visually exciting
1:57
modal dialog boxes.
2:02
You can turn any link into a trigger for
opening a dialog box on a page.
2:04
The modal dialogue can
include form fields, and
2:09
even content that gets
loaded from another webpage.
2:11
If you have really long
lists of information,
2:14
like a directory of employees,
businesses, services,
2:18
you can use the jQuery ListNav
plugin to make it easy to
2:23
locate items that start
with a particular letter.
2:28
When you hover over a letter,
2:36
the plugin even shows you the number
of items that begin with that letter.
2:37
If you really wanna add
excitement to a web page,
2:42
the Vide plugin lets you add video
backgrounds to any web page.
2:44
Another common user interface
device is the Lightbox.
2:48
There are many versions of this plugin,
but
2:57
the original Lightbox plugin
is still an excellent choice.
2:59
Click an image and
a larger version appears on the page.
3:03
You can group images together to
create a set that users navigate by
3:07
clicking forward and back buttons.
3:12
But plugins aren't just limited
to single effects like these.
3:20
Some plugins offer a wide set of features
intended to simplify building web
3:23
applications.
3:27
JQuery UI is a sister project of jQuery
itself and provides a complete framework
3:31
of user interface widgets,
effects, and interactions.
3:36
It makes it easy for you to add drag and
drop functionality, add tabbed panels,
3:39
a date picker, dialogue boxes,
and a lot more.
3:44
In fact, it gives you many of the tools
you'll need to build highly interactive
3:53
web applications.
3:57
The plugins we've just
looked at are all free, but
3:59
not all plugins come without a price.
4:01
In some cases, you'll find plugins
that offer a simpler free version and
4:04
a fancier more complete
version that costs money.
4:07
There are literally thousands
of plugins to choose from.
4:10
In the next video, I'll talk about
how to find good jQuery plugins.
4:13
See you there.
4:17
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