1
00:00:00,025 --> 00:00:04,463
[SOUND] Hi, I'm Dave.

2
00:00:04,463 --> 00:00:09,040
Welcome to Using jQuery Plugins.

3
00:00:09,040 --> 00:00:12,860
jQuery plugins let you add interactive
page elements like sliders,

4
00:00:12,860 --> 00:00:16,210
pop up photo galleries,
animated navigation bars,

5
00:00:16,210 --> 00:00:20,760
calculators, calendars, video backgrounds,
and more to your web pages.

6
00:00:20,760 --> 00:00:23,862
All of this without doing
a lot of programming yourself.

7
00:00:23,862 --> 00:00:26,690
jQuery plugins leverage
the power of jQuery,

8
00:00:26,690 --> 00:00:30,100
the most popular JavaScript
library in the world.

9
00:00:30,100 --> 00:00:34,300
jQuery simplifies common JavaScript
tasks such as selecting and

10
00:00:34,300 --> 00:00:36,590
manipulating page elements, sending and

11
00:00:36,590 --> 00:00:41,290
receiving data using Ajax, and adding
engaging visual effects to a web page.

12
00:00:42,460 --> 00:00:46,450
jQuery is a very powerful tool but,
by itself, it doesn't do anything.

13
00:00:46,450 --> 00:00:49,760
You have to write your own programs
using jQuery's commands and

14
00:00:49,760 --> 00:00:52,280
methods to get anything done.

15
00:00:52,280 --> 00:00:56,510
Fortunately, many talented designers and
developers have already written

16
00:00:56,510 --> 00:01:00,570
thousands of useful, and sometimes not so
useful, programs that use

17
00:01:00,570 --> 00:01:05,410
jQuery to improve the user interface and
functionality of websites.

18
00:01:05,410 --> 00:01:08,970
In this course, I'll show you
how to use a few useful plugins.

19
00:01:08,970 --> 00:01:14,350
But more importantly, I'll show you the
basic structure that most plugins follow.

20
00:01:14,350 --> 00:01:16,870
So when you find a new
plugin you want to try out,

21
00:01:16,870 --> 00:01:19,810
you'll know the basics of
adding it to your webpages.

22
00:01:19,810 --> 00:01:24,130
In addition, I'll give you a few tips for
finding and selecting plugins.

23
00:01:24,130 --> 00:01:27,100
But before we do that,
let me show you a few examples so

24
00:01:27,100 --> 00:01:30,090
you can see what jQuery plugins can do.

25
00:01:30,090 --> 00:01:32,930
jQuery plugins can be simple or complex.

26
00:01:32,930 --> 00:01:35,190
They can add just one
new feature to a page or

27
00:01:35,190 --> 00:01:37,940
dozens of features to an entire website.

28
00:01:37,940 --> 00:01:41,880
J calculator is a simple jQuery
plugin that adds a calculator

29
00:01:41,880 --> 00:01:43,670
to a text input field.

30
00:01:43,670 --> 00:01:46,620
Click in the field and
a basic calculator appears.

31
00:01:46,620 --> 00:01:51,140
You can add numbers together, multiply,

32
00:01:52,450 --> 00:01:56,060
subtract, and divide and
the results appear in the form field.

33
00:01:57,520 --> 00:02:02,150
The jQuery adaptive modal plugin makes
it easy to create visually exciting

34
00:02:02,150 --> 00:02:03,270
modal dialog boxes.

35
00:02:04,740 --> 00:02:09,310
You can turn any link into a trigger for
opening a dialog box on a page.

36
00:02:09,310 --> 00:02:11,351
The modal dialogue can
include form fields, and

37
00:02:11,351 --> 00:02:14,524
even content that gets
loaded from another webpage.

38
00:02:14,524 --> 00:02:18,486
If you have really long
lists of information,

39
00:02:18,486 --> 00:02:23,464
like a directory of employees,
businesses, services,

40
00:02:23,464 --> 00:02:28,036
you can use the jQuery ListNav
plugin to make it easy to

41
00:02:28,036 --> 00:02:32,423
locate items that start
with a particular letter.

42
00:02:36,265 --> 00:02:37,622
When you hover over a letter,

43
00:02:37,622 --> 00:02:41,000
the plugin even shows you the number
of items that begin with that letter.

44
00:02:42,540 --> 00:02:44,938
If you really wanna add
excitement to a web page,

45
00:02:44,938 --> 00:02:48,715
the Vide plugin lets you add video
backgrounds to any web page.

46
00:02:48,715 --> 00:02:57,430
Another common user interface
device is the Lightbox.

47
00:02:57,430 --> 00:02:59,450
There are many versions of this plugin,
but

48
00:02:59,450 --> 00:03:03,340
the original Lightbox plugin
is still an excellent choice.

49
00:03:03,340 --> 00:03:06,080
Click an image and
a larger version appears on the page.

50
00:03:07,900 --> 00:03:12,330
You can group images together to
create a set that users navigate by

51
00:03:12,330 --> 00:03:14,792
clicking forward and back buttons.

52
00:03:20,312 --> 00:03:23,930
But plugins aren't just limited
to single effects like these.

53
00:03:23,930 --> 00:03:27,464
Some plugins offer a wide set of features
intended to simplify building web

54
00:03:27,464 --> 00:03:28,260
applications.

55
00:03:31,483 --> 00:03:36,039
JQuery UI is a sister project of jQuery
itself and provides a complete framework

56
00:03:36,039 --> 00:03:39,830
of user interface widgets,
effects, and interactions.

57
00:03:39,830 --> 00:03:44,135
It makes it easy for you to add drag and
drop functionality, add tabbed panels,

58
00:03:44,135 --> 00:03:46,780
a date picker, dialogue boxes,
and a lot more.

59
00:03:53,382 --> 00:03:57,505
In fact, it gives you many of the tools
you'll need to build highly interactive

60
00:03:57,505 --> 00:03:59,170
web applications.

61
00:03:59,170 --> 00:04:01,980
The plugins we've just
looked at are all free, but

62
00:04:01,980 --> 00:04:04,050
not all plugins come without a price.

63
00:04:04,050 --> 00:04:07,670
In some cases, you'll find plugins
that offer a simpler free version and

64
00:04:07,670 --> 00:04:10,330
a fancier more complete
version that costs money.

65
00:04:10,330 --> 00:04:13,510
There are literally thousands
of plugins to choose from.

66
00:04:13,510 --> 00:04:17,830
In the next video, I'll talk about
how to find good jQuery plugins.

67
00:04:17,830 --> 00:04:18,330
See you there.