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 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