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.

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