Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Jquery plugin development

on

  • 2,340 views

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.

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.

Statistics

Views

Total Views
2,340
Views on SlideShare
2,340
Embed Views
0

Actions

Likes
1
Downloads
51
Comments
3

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jquery plugin development Jquery plugin development Presentation Transcript

  • jQuery plugin development phpXperts seminar – 2010 DHAKA.
  • About me Ziaul Haq Zia Sr. Web Application Developer. Liveoutsource Ltd. www.jquerygeeek.com twitter.com/jquerygeek facebook.com/jquerygeek
  • 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)
  • Iterate the objects  Returns jQuery object for each element (function($){ $.fn.jgTab = function() { return this.each(function() { // Code to work on each item }); }; })(jQuery)
  • 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 #tabs ul{ #wrapper{ margin: 0px; padding: 5px; padding: 0px; border: 1px solid #999999; list-style:none; width: 400px; } } #tabs ul li{ #tabs{ padding: 4px 8px; background-color:#CCCCCC; list-style:none; padding: 15px; display:inline; } margin: 2px; border: 1px solid #666666; font-weight:bold; #tabs div{ background:#666666; margin-top: 4px; cursor:pointer; padding:5px; color:#FFFFFF; border: 1px solid #666666; } display:none; background:#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 Visual jQuery http://www.visualjquery.com
  • Resource for plugin development  On jQuery docs http://docs.jquery.com/Plugins/Authoring  Few more on here http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-star
  • Reference Books http://www.manning.com/bibeault2/ Learning jQuery 1.3 https://www.packtpub.com/learning-jquery-1.3/book?mid=1802090m1d2r jQuery Plugin Development Beginner's Guide https://www.packtpub.com/jquery-plugin-development-beginners-guide/book
  • Question ? Please......
  • If anymore question or help needed, please mail me : jquerygeek@gmail.com Or Contact me on : www.jquerygeek.com
  • Thank You