jQuery plugin development
phpXperts seminar – 2010
DHAKA.
Ziaul Haq Zia
Sr. Web Application Developer.
Liveoutsource Ltd.
www.jquerygeeek.com
twitter.com/jquerygeek
facebook.com/jq...
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 fir...
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’...
Execute the method
 Wrap it up with a self executing closure.
(function(){
jQuery.fn.jgTab = function() {
// Here will be...
Protect our plugin
 Passing jQuery object to avoid conflict
(function($){
$.fn.jgTab = function() {
// Here will be our p...
(function($){
$.fn.jgTab = function() {
return this.each(function() {
// Code to work on each item
});
};
})(jQuery)
Itera...
Let’s have a look at our template
(function($){
$.fn.jgTab = function() {
return this.each(function() {
// Code to work on...
Our Plugin’s core code
// Collect selector’s object
var masterObj = $(this);
// Collect tab element’s object
var subObj = ...
Our Plugin’s core code
var masterObj = $(this);
var subObj = $('ul li', masterObj);
var contentObj = $('div', masterObj);
...
Our Plugin’s core code
var masterObj = $(this);
var subObj = $('ul li', masterObj);
var contentObj = $('div', masterObj);
...
Our Plugin’s core code
var masterObj = $(this);
var subObj = $('ul li', masterObj);
var contentObj = $('div', masterObj);
...
Our Plugin’s core code
subObj.click( function(){
// Hide all content elements and remove
‘selected’ class
contentObj.hide(...
Our Plugin’s core code
subObj.click( function(){
contentObj.hide();
subObj.removeClass('selected');
// Collecting the posi...
Plugin is ready to use
 Now we will put plugin’s core code to our plugin
template.
 And saving it as jquery.jgTab.js
 I...
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 a...
jgTabStyle.css
#wrapper{
padding: 5px;
border: 1px solid #999999;
width: 400px;
}
#tabs{
background-color:#CCCCCC;
padding...
Header Part
<script language="javascript" type="text/javascript"
src="js/jquery.js"></script>
<script language="javascript...
And here is the output
Extend the options
(function($){
$.fn.jgTab = function(options) {
var defaults = {
selected : 1
};
if(options) {
var optio...
Why jQuery plugin ?
 Re-use easily
 Organize you complex code
 Use jQuery core methods by extending
 Namespace your ja...
How jQuery plugin works ?
 jQuery has extendable architecture
 Allows you to write methods that operate on jQuery
object...
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.we...
Reference Books
https://www.packtpub.com/jquery-plugin-development-beginners-guide/book
https://www.packtpub.com/learning-...
Question ?
Please......
If anymore question or help needed,
please mail me :
jquerygeek@gmail.com
Or
Contact me on :
www.jquerygeek.com
Thank You
Upcoming SlideShare
Loading in...5
×

Jquery plugin development

2,246

Published on

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.

Published in: Technology, Art & Photos
3 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total Views
2,246
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
56
Comments
3
Likes
1
Embeds 0
No embeds

No notes for slide

Jquery plugin development

  1. 1. jQuery plugin development phpXperts seminar – 2010 DHAKA.
  2. 2. Ziaul Haq Zia Sr. Web Application Developer. Liveoutsource Ltd. www.jquerygeeek.com twitter.com/jquerygeek facebook.com/jquerygeek About me
  3. 3. What is jQuery plugin ?  jQuery method.  Run as jQuery core method.  Easy to re-use
  4. 4. Let’s see some jQuery plugins ……
  5. 5. Some plugins  Image Slider http://workshop.rs/projects/coin-slider/
  6. 6. Some plugins  Photo gallery http://leandrovieira.com/projects/jquery/lightbox/
  7. 7. Some plugins  Anything Slider http://css-tricks.com/anythingslider-jquery-plugin/
  8. 8. Some plugins  Tool tip (qTip) http://craigsworks.com/projects/qtip/
  9. 9. Some plugins  UI Tab http://jqueryui.com/demos/tabs/
  10. 10. Plugins Directory  Thousands of plugins are ready, look here… http://plugins.jquery.com/
  11. 11.  jgTab Similar to ‘UI Tab’, right ???
  12. 12.  jgTab But, at this time we are going to develop this together.
  13. 13. Let’s enjoy…!!  This is pretty simple.
  14. 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. 15. Let’s start together …  Let’s set the plugin name as : jgTab
  16. 16. Start with new method  Add new method to jQuery.fn (prototype) jQuery.fn.jgTab = function() { // Here will be our plugin’s stuffs };
  17. 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. 18. Protect our plugin  Passing jQuery object to avoid conflict (function($){ $.fn.jgTab = function() { // Here will be our plugin’s stuffs }; })(jQuery)
  19. 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. 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. 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. 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. 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. 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. 25. Our Plugin’s core code subObj.click( function(){ // Hide all content elements and remove ‘selected’ class contentObj.hide(); subObj.removeClass('selected'); });
  26. 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. 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. 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. 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. 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. 31. And here is the output
  32. 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. 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. 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. 35. Resource for core jQuery http://www.visualjquery.com Visual jQuery
  36. 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
  37. 37. 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
  38. 38. Question ? Please......
  39. 39. If anymore question or help needed, please mail me : jquerygeek@gmail.com Or Contact me on : www.jquerygeek.com
  40. 40. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×