SlideShare une entreprise Scribd logo
1  sur  40
Télécharger pour lire hors ligne
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() {
// 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 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
Question ?
Please......
If anymore question or help needed,
please mail me :
jquerygeek@gmail.com
Or
Contact me on :
www.jquerygeek.com
Thank You

Contenu connexe

Tendances

jQuery 1.7 Events
jQuery 1.7 EventsjQuery 1.7 Events
jQuery 1.7 Events
dmethvin
 
[PyConTW 2013] Write Sublime Text 2 Packages with Python
[PyConTW 2013] Write Sublime Text 2 Packages with Python[PyConTW 2013] Write Sublime Text 2 Packages with Python
[PyConTW 2013] Write Sublime Text 2 Packages with Python
Jenny Liang
 
Sprout core and performance
Sprout core and performanceSprout core and performance
Sprout core and performance
Yehuda Katz
 

Tendances (20)

JQuery introduction
JQuery introductionJQuery introduction
JQuery introduction
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
jQuery
jQueryjQuery
jQuery
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
jQuery 1.7 Events
jQuery 1.7 EventsjQuery 1.7 Events
jQuery 1.7 Events
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
 
jQuery
jQueryjQuery
jQuery
 
[PyConTW 2013] Write Sublime Text 2 Packages with Python
[PyConTW 2013] Write Sublime Text 2 Packages with Python[PyConTW 2013] Write Sublime Text 2 Packages with Python
[PyConTW 2013] Write Sublime Text 2 Packages with Python
 
How to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQueryHow to increase Performance of Web Application using JQuery
How to increase Performance of Web Application using JQuery
 
Javascript in Plone
Javascript in PloneJavascript in Plone
Javascript in Plone
 
Dojo Confessions
Dojo ConfessionsDojo Confessions
Dojo Confessions
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Sprout core and performance
Sprout core and performanceSprout core and performance
Sprout core and performance
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
 

Similaire à Jquery plugin development

presentation_jquery_ppt.pptx
presentation_jquery_ppt.pptxpresentation_jquery_ppt.pptx
presentation_jquery_ppt.pptx
azz71
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax plugins
Inbal Geffen
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax plugins
Inbal Geffen
 
Javascript
JavascriptJavascript
Javascript
timsplin
 

Similaire à Jquery plugin development (20)

JQuery_and_Ajax.pptx
JQuery_and_Ajax.pptxJQuery_and_Ajax.pptx
JQuery_and_Ajax.pptx
 
jQuery
jQueryjQuery
jQuery
 
Overlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh MyOverlays, Accordions & Tabs, Oh My
Overlays, Accordions & Tabs, Oh My
 
Jquery library
Jquery libraryJquery library
Jquery library
 
Reactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJSReactive Type safe Webcomponents with skateJS
Reactive Type safe Webcomponents with skateJS
 
Jqueryforbeginnersjqueryconference2009 090914063709 Phpapp02
Jqueryforbeginnersjqueryconference2009 090914063709 Phpapp02Jqueryforbeginnersjqueryconference2009 090914063709 Phpapp02
Jqueryforbeginnersjqueryconference2009 090914063709 Phpapp02
 
jQuery and_drupal
jQuery and_drupaljQuery and_drupal
jQuery and_drupal
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
Jquery
JqueryJquery
Jquery
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
 
presentation_jquery_ppt.pptx
presentation_jquery_ppt.pptxpresentation_jquery_ppt.pptx
presentation_jquery_ppt.pptx
 
Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101
 
Jquery tutorial-beginners
Jquery tutorial-beginnersJquery tutorial-beginners
Jquery tutorial-beginners
 
jQuery Fundamentals
jQuery FundamentalsjQuery Fundamentals
jQuery Fundamentals
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax plugins
 
Jqeury ajax plugins
Jqeury ajax pluginsJqeury ajax plugins
Jqeury ajax plugins
 
Javascript
JavascriptJavascript
Javascript
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
JavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM ManipulationJavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM Manipulation
 

Plus de Md. Ziaul Haq (6)

Pwa with vue js
Pwa with vue jsPwa with vue js
Pwa with vue js
 
Taste of RxJS
Taste of RxJSTaste of RxJS
Taste of RxJS
 
The MEAN Stack
The MEAN StackThe MEAN Stack
The MEAN Stack
 
Optimizing AngularJS Application
Optimizing AngularJS ApplicationOptimizing AngularJS Application
Optimizing AngularJS Application
 
Overview on jQuery mobile
Overview on jQuery mobileOverview on jQuery mobile
Overview on jQuery mobile
 
Kick start with j query
Kick start with j queryKick start with j query
Kick start with j query
 

Dernier

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Dernier (20)

MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 

Jquery plugin development

  • 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
  • 39. If anymore question or help needed, please mail me : jquerygeek@gmail.com Or Contact me on : www.jquerygeek.com