Jquery plugin development
40
jQuery plugin development phpXperts seminar – 2010 DHAKA.
-
Upload
md-ziaul-haq -
Category
Technology
-
view
2.223 -
download
2
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 of Jquery plugin development
jQuery plugin developmentphpXperts seminar – 2010
DHAKA.
Ziaul Haq ZiaSr. 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/
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() {
// Here will be our plugin’s stuffs
};
})()
Protect our plugin
Passing jQuery object to avoid conflict
(function($){
$.fn.jgTab = function() {
// Here will be our plugin’s stuffs
};
})(jQuery)
(function($){
$.fn.jgTab = 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($){
$.fn.jgTab = function() {
return this.each(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);
Our Plugin’s core code
var masterObj = $(this);
var subObj = $('ul li', masterObj);
var contentObj = $('div', masterObj);
// Hide All the content elements
contentObj.hide();
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');
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
});
Our Plugin’s core code
subObj.click( function(){
// Hide all content elements and remove
‘selected’ class
contentObj.hide();
subObj.removeClass('selected');
});
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');
});
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;
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;
}
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" />
And here is the output
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);
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 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/
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
Question ?
Please......
If anymore question or help needed,please mail me :
OrContact me on :
www.jquerygeek.com
Thank You
