jQuery Plugins
JavaScript is like lumber
•
•
•
•
•
•
•
•

Just add 2x4's™
Simple assembly, only straight cuts required
Makes any width you desire by the length of ...
FREE!
•
•
•
•
•
•
•
•

Just add 2x4's™
Simple assembly, only straight cuts required
Makes any width you desire by the leng...
jQuery plugin
Refresher
Add jQuery to the <head>

<script	
  src="http://code.jquery.com/jquery.min.js"></script>
Refresher

$ (“.headline”).doSomething();
Refresher

$ (“.headline”).doSomething();
Refresher

$ (“.headline”).doSomething();
jQuery
Refresher

$ (“.headline”).doSomething();
jQuery
Refresher
CSS selector

$ (“.headline”).doSomething();
jQuery
Refresher
CSS selector

$ (“.headline”).doSomething();
jQuery
Refresher
CSS selector

$ (“.headline”).doSomething();
jQuery

jQuery command
For plugins, add code AFTER
jQuery
<script	
  src="http://code.jquery.com/jquery.min.js"></script>	
  
<script	
  src="jqu...
For plugins, add code AFTER
jQuery
<script	
  src="http://code.jquery.com/jquery.min.js"></script>	
  
<script	
  src="jqu...
Plugins create new jQuery
Methods build into jQuery proper
$("#mybox").fadeOut();	
  
!

$("#mybox").hide();	
  
!

$("#my...
Plugins create new jQuery
Methods build into jQuery proper
$("#mybox").fadeOut();	
  
!

$("#mybox").hide();	
  
!

$("#my...
Fancy Box
Fancy Box
$(".fancybox").fancybox();

<a	
  href="image.jpg"	
  class="fancybox">Link	
  to	
  an	
  image</a>
jQuery Plugin Parameters

$(".fancybox").fancybox({});
jQuery Plugin Parameters

$(".fancybox").fancybox({});
curly brackets
jQuery Plugin Parameters
$(".fancybox").fancybox({	
  
!
!
!
!

});
jQuery Plugin Parameters
$(".fancybox").fancybox({	
  
!
!
!
!

});

Options go here
jQuery Plugin Parameters
$(".fancybox").fancybox({	
  
!

:"<h1>Hello	
  World</h1>",	
  
	
  	
  	
  content	
   	
   	
 ...
Upcoming SlideShare
Loading in...5
×

Jquery plugins

628

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
628
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery plugins

  1. 1. jQuery Plugins
  2. 2. JavaScript is like lumber
  3. 3. • • • • • • • • Just add 2x4's™ Simple assembly, only straight cuts required Makes any width you desire by the length of wood Comfortable, ergonomic design Strong and very durable Made of maintenance-free structural resin Lifetime manufacturer's warranty Sand color jQuery JavaScript Library
  4. 4. FREE! • • • • • • • • Just add 2x4's™ Simple assembly, only straight cuts required Makes any width you desire by the length of wood Comfortable, ergonomic design Strong and very durable Made of maintenance-free structural resin Lifetime manufacturer's warranty Sand color jQuery JavaScript Library
  5. 5. jQuery plugin
  6. 6. Refresher
  7. 7. Add jQuery to the <head> <script  src="http://code.jquery.com/jquery.min.js"></script>
  8. 8. Refresher $ (“.headline”).doSomething();
  9. 9. Refresher $ (“.headline”).doSomething();
  10. 10. Refresher $ (“.headline”).doSomething(); jQuery
  11. 11. Refresher $ (“.headline”).doSomething(); jQuery
  12. 12. Refresher CSS selector $ (“.headline”).doSomething(); jQuery
  13. 13. Refresher CSS selector $ (“.headline”).doSomething(); jQuery
  14. 14. Refresher CSS selector $ (“.headline”).doSomething(); jQuery jQuery command
  15. 15. For plugins, add code AFTER jQuery <script  src="http://code.jquery.com/jquery.min.js"></script>   <script  src="jquery.fancybox.pack.js"></script>
  16. 16. For plugins, add code AFTER jQuery <script  src="http://code.jquery.com/jquery.min.js"></script>   <script  src="jquery.fancybox.pack.js"></script>
  17. 17. Plugins create new jQuery Methods build into jQuery proper $("#mybox").fadeOut();   ! $("#mybox").hide();   ! $("#mybox").css("color",  "blue");
  18. 18. Plugins create new jQuery Methods build into jQuery proper $("#mybox").fadeOut();   ! $("#mybox").hide();   ! $("#mybox").css("color",  "blue"); New totally awesome jQuery method $("#mybox").fancybox();
  19. 19. Fancy Box
  20. 20. Fancy Box $(".fancybox").fancybox(); <a  href="image.jpg"  class="fancybox">Link  to  an  image</a>
  21. 21. jQuery Plugin Parameters $(".fancybox").fancybox({});
  22. 22. jQuery Plugin Parameters $(".fancybox").fancybox({}); curly brackets
  23. 23. jQuery Plugin Parameters $(".fancybox").fancybox({   ! ! ! ! });
  24. 24. jQuery Plugin Parameters $(".fancybox").fancybox({   ! ! ! ! }); Options go here
  25. 25. jQuery Plugin Parameters $(".fancybox").fancybox({   ! :"<h1>Hello  World</h1>",        content                    width   :  400,       :  300,      height                           ! });
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×