jquery plugin development
DESCRIPTION
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.TRANSCRIPT
![Page 1: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/1.jpg)
jQuery plugin developmentphpXperts seminar – 2010
DHAKA.
![Page 2: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/2.jpg)
Ziaul Haq ZiaSr. Web Application Developer.
Liveoutsource Ltd.
www.jquerygeeek.com
twitter.com/jquerygeek
facebook.com/jquerygeek
About me
![Page 3: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/3.jpg)
What is jQuery plugin ?
jQuery method.
Run as jQuery core method.
Easy to re-use
![Page 4: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/4.jpg)
Let’s see some jQuery plugins ……
![Page 5: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/5.jpg)
Some plugins
Image Slider
http://workshop.rs/projects/coin-slider/
![Page 6: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/6.jpg)
Some plugins
Photo gallery
http://leandrovieira.com/projects/jquery/lightbox/
![Page 7: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/7.jpg)
Some plugins
Anything Slider
http://css-tricks.com/anythingslider-jquery-plugin/
![Page 8: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/8.jpg)
Some plugins
Tool tip (qTip)
http://craigsworks.com/projects/qtip/
![Page 10: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/10.jpg)
Plugins Directory
Thousands of plugins are ready, look here…
http://plugins.jquery.com/
![Page 11: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/11.jpg)
jgTab
Similar to ‘UI Tab’, right ???
![Page 12: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/12.jpg)
jgTab
But, at this time we are going to develop this together.
![Page 13: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/13.jpg)
Let’s enjoy…!!
This is pretty simple.
![Page 14: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/14.jpg)
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>
![Page 15: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/15.jpg)
Let’s start together …
Let’s set the plugin name as : jgTab
![Page 16: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/16.jpg)
Start with new method
Add new method to jQuery.fn (prototype)
jQuery.fn.jgTab = function() {
// Here will be our plugin’s stuffs
};
![Page 17: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/17.jpg)
Execute the method
Wrap it up with a self executing closure.
(function(){
jQuery.fn.jgTab = function() {
// Here will be our plugin’s stuffs
};
})()
![Page 18: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/18.jpg)
Protect our plugin
Passing jQuery object to avoid conflict
(function($){
$.fn.jgTab = function() {
// Here will be our plugin’s stuffs
};
})(jQuery)
![Page 19: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/19.jpg)
(function($){
$.fn.jgTab = function() {
return this.each(function() {
// Code to work on each item
});
};
})(jQuery)
Iterate the objects
Returns jQuery object for each element
![Page 20: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/20.jpg)
Let’s have a look at our template
(function($){
$.fn.jgTab = function() {
return this.each(function() {
// Code to work on each item
});
};
})(jQuery);
![Page 21: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/21.jpg)
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);
![Page 22: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/22.jpg)
Our Plugin’s core code
var masterObj = $(this);
var subObj = $('ul li', masterObj);
var contentObj = $('div', masterObj);
// Hide All the content elements
contentObj.hide();
![Page 23: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/23.jpg)
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');
![Page 24: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/24.jpg)
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
});
![Page 25: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/25.jpg)
Our Plugin’s core code
subObj.click( function(){
// Hide all content elements and remove
‘selected’ class
contentObj.hide();
subObj.removeClass('selected');
});
![Page 26: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/26.jpg)
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');
});
![Page 27: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/27.jpg)
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
![Page 28: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/28.jpg)
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>
![Page 29: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/29.jpg)
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;
}
![Page 30: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/30.jpg)
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" />
![Page 31: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/31.jpg)
And here is the output
![Page 32: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/32.jpg)
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);
![Page 33: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/33.jpg)
Why jQuery plugin ?
Re-use easily
Organize you complex code
Use jQuery core methods by extending
Namespace your javascript
Contribute to open source
![Page 34: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/34.jpg)
How jQuery plugin works ?
jQuery has extendable architecture
Allows you to write methods that operate on jQuery objects
Allows you to extend entire methods
![Page 36: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/36.jpg)
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-started/
![Page 37: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/37.jpg)
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
![Page 38: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/38.jpg)
Question ?
Please......
![Page 39: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/39.jpg)
If anymore question or help needed,please mail me :
OrContact me on :
www.jquerygeek.com
![Page 40: Jquery plugin development](https://reader033.vdocument.in/reader033/viewer/2022052904/5582f104d8b42a26168b4b78/html5/thumbnails/40.jpg)
Thank You