• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Jquery plugin development

  • 2,078 views
Uploaded 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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,078
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
52
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. About me Ziaul Haq Zia Sr. Web Application Developer. Liveoutsource Ltd. www.jquerygeeek.com twitter.com/jquerygeek facebook.com/jquerygeek
  • 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. Iterate the objects  Returns jQuery object for each element (function($){ $.fn.jgTab = function() { return this.each(function() { // Code to work on each item }); }; })(jQuery)
  • 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 #tabs ul{ #wrapper{ margin: 0px; padding: 5px; padding: 0px; border: 1px solid #999999; list-style:none; width: 400px; } } #tabs ul li{ #tabs{ padding: 4px 8px; background-color:#CCCCCC; list-style:none; padding: 15px; display:inline; } margin: 2px; border: 1px solid #666666; font-weight:bold; #tabs div{ background:#666666; margin-top: 4px; cursor:pointer; padding:5px; color:#FFFFFF; border: 1px solid #666666; } display:none; background:#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 Visual jQuery http://www.visualjquery.com
  • 36. Resource for plugin development  On jQuery docs http://docs.jquery.com/Plugins/Authoring  Few more on here http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-star
  • 37. Reference Books http://www.manning.com/bibeault2/ Learning jQuery 1.3 https://www.packtpub.com/learning-jquery-1.3/book?mid=1802090m1d2r jQuery Plugin Development Beginner's Guide https://www.packtpub.com/jquery-plugin-development-beginners-guide/book
  • 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