Your SlideShare is downloading. ×
Jquery plugin development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Jquery plugin development

2,127
views

Published on

This is a step by step tutorial for jQuery plugin development. This tutorial will help any guys to develop jQuery plugin, with good knowledge in code jQuery.

This is a step by step tutorial for jQuery plugin development. This tutorial will help any guys to develop jQuery plugin, with good knowledge in code jQuery.

Published in: Technology, Art & Photos

3 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total Views
2,127
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
53
Comments
3
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery plugin development phpXperts seminar – 2010 DHAKA.
  • 2. Ziaul Haq Zia Sr. Web Application Developer. Liveoutsource Ltd. www.jquerygeeek.com twitter.com/jquerygeek facebook.com/jquerygeek About me
  • 3. What is jQuery plugin ?  jQuery method.  Run as jQuery core method.  Easy to re-use
  • 4. Let’s see some jQuery plugins ……
  • 5. Some plugins  Image Slider http://workshop.rs/projects/coin-slider/
  • 6. Some plugins  Photo gallery http://leandrovieira.com/projects/jquery/lightbox/
  • 7. Some plugins  Anything Slider http://css-tricks.com/anythingslider-jquery-plugin/
  • 8. Some plugins  Tool tip (qTip) http://craigsworks.com/projects/qtip/
  • 9. Some plugins  UI Tab http://jqueryui.com/demos/tabs/
  • 10. Plugins Directory  Thousands of plugins are ready, look here… http://plugins.jquery.com/
  • 11.  jgTab Similar to ‘UI Tab’, right ???
  • 12.  jgTab But, at this time we are going to develop this together.
  • 13. Let’s enjoy…!!  This is pretty simple.
  • 14. HTML Body <div id="wrapper"> <div id="tabs"> <ul> <li>Tab One</li> <li>Tab Two</li> <li>Tab Three</li> </ul> <div>I am first tab’s content,....</div> <div>I am tab two's content ....</div> <div>I am the final content.....</div> </div> </div>
  • 15. Let’s start together …  Let’s set the plugin name as : jgTab
  • 16. Start with new method  Add new method to jQuery.fn (prototype) jQuery.fn.jgTab = function() { // Here will be our plugin’s stuffs };
  • 17. Execute the method  Wrap it up with a self executing closure. (function(){ jQuery.fn.jgTab = function() { // Here will be our plugin’s stuffs }; })()
  • 18. Protect our plugin  Passing jQuery object to avoid conflict (function($){ $.fn.jgTab = function() { // Here will be our plugin’s stuffs }; })(jQuery)
  • 19. (function($){ $.fn.jgTab = function() { return this.each(function() { // Code to work on each item }); }; })(jQuery) Iterate the objects  Returns jQuery object for each element
  • 20. Let’s have a look at our template (function($){ $.fn.jgTab = function() { return this.each(function() { // Code to work on each item }); }; })(jQuery);
  • 21. Our Plugin’s core code // Collect selector’s object var masterObj = $(this); // Collect tab element’s object var subObj = $('ul li', masterObj); // Collect content element’s object var contentObj = $('div', masterObj);
  • 22. Our Plugin’s core code var masterObj = $(this); var subObj = $('ul li', masterObj); var contentObj = $('div', masterObj); // Hide All the content elements contentObj.hide();
  • 23. Our Plugin’s core code var masterObj = $(this); var subObj = $('ul li', masterObj); var contentObj = $('div', masterObj); contentObj.hide(); // Setting initial tab position var intSelected = 0; // Show initial tab’s content contentObj.eq(intSelected).show(); // Applying ‘selected’ class for initial tab subObj.eq(intSelected).addClass('selected');
  • 24. Our Plugin’s core code var masterObj = $(this); var subObj = $('ul li', masterObj); var contentObj = $('div', masterObj); contentObj.hide(); var intSelected = 0; contentObj.eq(intSelected).show(); subObj.eq(intSelected).addClass('selected'); // Clicking on a tab will trigger this action subObj.click( function(){ // Related codes go here });
  • 25. Our Plugin’s core code subObj.click( function(){ // Hide all content elements and remove ‘selected’ class contentObj.hide(); subObj.removeClass('selected'); });
  • 26. Our Plugin’s core code subObj.click( function(){ contentObj.hide(); subObj.removeClass('selected'); // Collecting the position of clicked tab var currentTab = subObj.index($(this)); // Opening related content and applying 'selected' class. contentObj.eq(currentTab).show(); $(this).addClass('selected'); });
  • 27. Plugin is ready to use  Now we will put plugin’s core code to our plugin template.  And saving it as jquery.jgTab.js  It’s ready to run.  Let’s enjoy 
  • 28. HTML Body Part <div id="wrapper"> <div id="tabs"> <ul> <li>Tab One</li> <li>Tab Two</li> <li>Tab Three</li> </ul> <div>I am first tab’s content....</div> <div>I am tab two's content.....</div> <div>I am the final content.....</div> </div> </div>
  • 29. jgTabStyle.css #wrapper{ padding: 5px; border: 1px solid #999999; width: 400px; } #tabs{ background-color:#CCCCCC; padding: 15px; } #tabs div{ margin-top: 4px; padding:5px; border: 1px solid #666666; display:none; background:#FFFFFF; } #tabs ul{ margin: 0px; padding: 0px; list-style:none; } #tabs ul li{ padding: 4px 8px; list-style:none; display:inline; margin: 2px; border: 1px solid #666666; font-weight:bold; background:#666666; cursor:pointer; color:#FFFFFF; } #tabs ul li.selected{ background:#FFFFFF; cursor:pointer; color: #000000; border-bottom: 1px solid #FFFFFF; }
  • 30. Header Part <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.jgTab.js"></script> <script language="javascript" type="text/javascript"> $(document).ready( function(){ $('#tabs').jgTab(); }); </script> <link href="css/jgTabStyle.css" rel="stylesheet" type="text/css" />
  • 31. And here is the output
  • 32. Extend the options (function($){ $.fn.jgTab = function(options) { var defaults = { selected : 1 }; if(options) { var options = $.extend( defaults, options ); } return this.each(function() { // Code to run for each items }); }; })(jQuery);
  • 33. Why jQuery plugin ?  Re-use easily  Organize you complex code  Use jQuery core methods by extending  Namespace your javascript  Contribute to open source
  • 34. How jQuery plugin works ?  jQuery has extendable architecture  Allows you to write methods that operate on jQuery objects  Allows you to extend entire methods
  • 35. Resource for core jQuery http://www.visualjquery.com Visual jQuery
  • 36. Resource for plugin development http://docs.jquery.com/Plugins/Authoring  On jQuery docs  Few more on here http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-star
  • 37. Reference Books https://www.packtpub.com/jquery-plugin-development-beginners-guide/book https://www.packtpub.com/learning-jquery-1.3/book?mid=1802090m1d2r http://www.manning.com/bibeault2/ Learning jQuery 1.3 jQuery Plugin Development Beginner's Guide
  • 38. Question ? Please......
  • 39. If anymore question or help needed, please mail me : jquerygeek@gmail.com Or Contact me on : www.jquerygeek.com
  • 40. Thank You