Your SlideShare is downloading. ×
0
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
Jquery plugin development
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,169

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

×