Jquery plugin development
Post on 18-Jun-2015
2221 Views
Preview:
DESCRIPTION
Transcript
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 :
jquerygeek@gmail.com
OrContact me on :
www.jquerygeek.com
Thank You
top related