Jquery plugin development

jQuery plugin development
phpXperts seminar – 2010
DHAKA.

Ziaul Haq Zia
Sr. Web Application Developer.
Liveoutsource Ltd.
www.jquerygeeek.com
twitter.com/jquerygeek
facebook.com/jquerygeek
About me

What is jQuery plugin ?
 jQuery method.
 Run as jQuery core method.
 Easy to re-use

Let’s see some jQuery plugins ……

Some plugins
 Image Slider
http://workshop.rs/projects/coin-slider/

Some plugins
 Photo gallery
http://leandrovieira.com/projects/jquery/lightbox/

Some plugins
 Anything Slider
http://css-tricks.com/anythingslider-jquery-plugin/

Some plugins
 Tool tip (qTip)
http://craigsworks.com/projects/qtip/

Some plugins
 UI Tab
http://jqueryui.com/demos/tabs/

Plugins Directory
 Thousands of plugins are ready, look here…
http://plugins.jquery.com/

 jgTab
Similar to ‘UI Tab’, right ???

 jgTab
But, at this time we are going to
develop this together.

Let’s enjoy…!! 
This is pretty simple.

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>

Let’s start together …
 Let’s set the plugin name as : jgTab

Start with new method
 Add new method to jQuery.fn (prototype)
jQuery.fn.jgTab = function() {
// Here will be our plugin’s stuffs
};

Execute the method
 Wrap it up with a self executing closure.
(function(){
jQuery.fn.jgTab = function() {
};
})()

Protect our plugin
 Passing jQuery object to avoid conflict
(function($){
$.fn.jgTab = function() {
};
})(jQuery)

(function($){
return this.each(function() {
// Code to work on each item
});
};
})(jQuery)
Iterate the objects
 Returns jQuery object for each element

Let’s have a look at our template
(function($){
// Code to work on each item
});
};
})(jQuery);

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);

// Hide All the content elements
contentObj.hide();

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');

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
});

// Hide all content elements and remove
‘selected’ class
contentObj.hide();
subObj.removeClass('selected');
});

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');
});

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 

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>

jgTabStyle.css
#wrapper{
padding: 5px;
border: 1px solid #999999;
width: 400px;
}
#tabs{
background-color:#CCCCCC;
padding: 15px;
}
#tabs div{
margin-top: 4px;
padding:5px;
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;
font-weight:bold;
background:#666666;
cursor:pointer;
color:#FFFFFF;
}
#tabs ul li.selected{
background:#FFFFFF;
cursor:pointer;
color: #000000;
border-bottom: 1px solid #FFFFFF;
}

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" />

Extend the options
(function($){
$.fn.jgTab = function(options) {
var defaults = {
selected : 1
};
if(options) {
var options = $.extend( defaults, options
);
}
// Code to run for each items
});
};
})(jQuery);

Why jQuery plugin ?
 Re-use easily
 Organize you complex code
 Use jQuery core methods by extending
 Namespace your javascript
 Contribute to open source

How jQuery plugin works ?
 jQuery has extendable architecture
 Allows you to write methods that operate on jQuery
objects
 Allows you to extend entire methods

Resource for core jQuery
http://www.visualjquery.com
Visual jQuery

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

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

If anymore question or help needed,
please mail me :
jquerygeek@gmail.com
Or
Contact me on :
www.jquerygeek.com

Jquery plugin development

More Related Content

What's hot (20)

Similar to Jquery plugin development (20)

More from Md. Ziaul Haq (6)

Recently uploaded (20)

Jquery plugin development