Jquery plugins
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share
  • 564 views

 

Statistics

Views

Total Views
564
Views on SlideShare
476
Embed Views
88

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 88

https://bcourses.berkeley.edu 87
http://blog.tusharv.in 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jquery plugins Presentation Transcript

  • 1. jQuery Plugins
  • 2. JavaScript is like lumber
  • 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. 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. jQuery plugin
  • 6. Refresher
  • 7. Add jQuery to the <head> <script  src="http://code.jquery.com/jquery.min.js"></script>
  • 8. Refresher $ (“.headline”).doSomething();
  • 9. Refresher $ (“.headline”).doSomething();
  • 10. Refresher $ (“.headline”).doSomething(); jQuery
  • 11. Refresher $ (“.headline”).doSomething(); jQuery
  • 12. Refresher CSS selector $ (“.headline”).doSomething(); jQuery
  • 13. Refresher CSS selector $ (“.headline”).doSomething(); jQuery
  • 14. Refresher CSS selector $ (“.headline”).doSomething(); jQuery jQuery command
  • 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. For plugins, add code AFTER jQuery <script  src="http://code.jquery.com/jquery.min.js"></script>   <script  src="jquery.fancybox.pack.js"></script>
  • 17. Plugins create new jQuery Methods build into jQuery proper $("#mybox").fadeOut();   ! $("#mybox").hide();   ! $("#mybox").css("color",  "blue");
  • 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. Fancy Box
  • 20. Fancy Box $(".fancybox").fancybox(); <a  href="image.jpg"  class="fancybox">Link  to  an  image</a>
  • 21. jQuery Plugin Parameters $(".fancybox").fancybox({});
  • 22. jQuery Plugin Parameters $(".fancybox").fancybox({}); curly brackets
  • 23. jQuery Plugin Parameters $(".fancybox").fancybox({   ! ! ! ! });
  • 24. jQuery Plugin Parameters $(".fancybox").fancybox({   ! ! ! ! }); Options go here
  • 25. jQuery Plugin Parameters $(".fancybox").fancybox({   ! :"<h1>Hello  World</h1>",        content                    width   :  400,       :  300,      height                           ! });