jQuery Plugin Development
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

jQuery Plugin Development

on

  • 1,397 views

 

Statistics

Views

Total Views
1,397
Views on SlideShare
1,391
Embed Views
6

Actions

Likes
0
Downloads
12
Comments
0

2 Embeds 6

http://public.ingress.com 5
http://ingress.dev.rokolabs.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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 Presentation Transcript

  • 1. Plugin Development
    By: Nathan SegoTwitter: nathansego
    http://typewith.me/jqueryDenver-plugins
  • 2. Little about me
  • 3. What we will go over
    What is a plugin?
    Write your first plugin
    Using Plugins
    Finding Plugins
    The plugin Pattern
    Plugin Options
    Private Functions
    Interacting wit the stack
  • 4. What exactly is a plugin?
    A plugin is a jQuery method defined externally to jQuery Core
    A collection of one or more methods
    Extends the core jQuery prototype object
  • 5. Your First Plugin$(‘p’).elementCount();
    $.fn.elementCount= function() {
    alert(‘Element count: ’ +
    this.length);
    };
    $(‘p’).elementCount();
  • 6. Plugins and Iteration
    $.fn.elementCount = function() {
    // “this” is a jQuery Object
    this.each(function(i) {
    $(this).html($(this).html() +‘ ‘+ i);
    });
    };
    $(‘p’).elementCount();
  • 7. Plugins and Chaining
    // Plugin is required to return this
    $.fn.elementCount = function() {
    return this;
    };
    $(‘p’).elementCount().addClass(‘Foo’);
  • 8. Plugins and Chaining
    // Plugin is required to return this
    $.fn.stPatricks = function() {
    return this.css(‘color’, ‘green’);
    };
    $(‘p’).stPatricks().addClass(‘Foo’);
  • 9. Using Plugins
  • 10. Using Plugins
    Include jquery.plugin.js in your project after jQuery & before use
    Call jQuery Plugin Method
  • 11. Finding Plugins
    http://plugin.jquery.com
    Google Code
    GitHub
    Signs of a poorly written jQuery Plugin(Remy Sharp: http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/ )
  • 12. The Plugin Pattern
  • 13. The plugin pattern
    Allows safe usage of $ variable
    Encapsulates the plugin into a closure
  • 14. The plugin pattern
    (function($) {
    $.fn.elementCount = function() {
    return this.each(function(i) {
    $(this).html($(this).html() +‘ ‘+ i);
    });
    };
    })(jQuery);
    $(‘p’).elementCount();
  • 15. Plugin Options
  • 16. Plugin Options
    Options can be
    Primitives
    Callback functions
    Default Options
    Storing Options with .data()
  • 17. The plugin pattern
    (function($) {
    $.fn.elementCount = function(options) {
    return this.each(function(i) {
    var j = i + options.start;
    $(this).html($(this).html() +‘ ‘+ j);
    });
    };
    })(jQuery);
    $(‘p’).elementCount({start: 10});
  • 18. The plugin pattern
    // Pass a callback function into the plugin
    (function($) {
    $.fn.elementCount = function(options) {
    var j;
    options.begin();
    return this.each(function(i) {
    j = i + options.start;
    $(this).html($(this).html() +‘ ‘+ j);
    });
    };
    })(jQuery);
    $(‘p’).elementCount({
    start: 10,
    begin: function() {alert(‘BEGIN!’)}
    });
  • 19. The plugin pattern
    // Pass a callback function into the plugin
    (function($) {
    $.fn.elementCount = function(options) {
    var j;
    if( $.isFunction(options.begin) ){
    options.begin();
    }
    return this.each(function(i) {
    j = i + options.start;
    $(this).html($(this).html() +‘ ‘+ j);
    });
    };
    })(jQuery);
    $(‘p’).elementCount({
    start: 10,
    begin: function() {alert(‘BEGIN!’)}
    });
  • 20. The plugin pattern
    // Set a default option
    (function($) {
    $.elementCount.default = { start: 0 };
    $.fn.elementCount = function(options) {
    options = $.extend({},
    $.elementCount.default, options);
    return this.each(function(i) {
    var j = i + options.start;
    $(this).html($(this).html() +‘ ‘+ j);
    });
    };
    })(jQuery);
    $(‘p’).elementCount();
  • 21. Private Functions
  • 22. Private Functions
    (function($) {
    $.fn.elementCount = function(options) {
    var j;
    return this.each(function(i) {
    j = doCount(options.start,i);
    $(this).html($(this).html() +‘ ‘+ j);
    });
    };
    function doCount(start,i) {
    return start + i;
    }
    })(jQuery);
    doCount(10,20); // Method not found
  • 23. Interacting with the stack
  • 24. Private Functions
    (function($) {
    $.fn.cousins = function() {
    varnewBucket =
    this.parent().siblings().children();
    return
    this.pushStack(newBucket,”cousins”,””);
    };
    })(jQuery);
    $(‘p’).cousins();
  • 25. What we will go over
    What is a plugin?
    Write your first plugin
    Using Plugins
    Finding Plugins
    The plugin Pattern
    Plugin Options
    Private Functions
    Interacting wit the stack
  • 26. Questions & Demo
    http://jsbin.com/jqueryDenver-plugins/edit