jQuery — Plugins

Basic Plugin Structure

(function($) {
    $.fn.highlight = function(options) {
        var settings = $.extend({
            color: "yellow",
            duration: 300
        }, options);

        return this.each(function() {
            $(this).animate({
                backgroundColor: settings.color
            }, settings.duration);
        });
    };
}(jQuery));

Using a Plugin

$("p").highlight({ color: "lightblue" });

Plugin with Defaults

$.fn.tooltip = function(text) {
    return this.hover(
        function() {
            $(this).attr("title", text);
        }
    );
};

Popular jQuery Plugins

Plugin	Purpose
Slick	Carousel/slider
DataTables	Enhanced tables
Select2	Enhanced selects
jQuery UI	UI widgets
Magnific Popup	Lightbox
Isotope	Layout filtering

Plugin Best Practices

1. Always return this for chaining
2. Use $.extend() for options
3. Namespace your plugin
4. Provide defaults
5. Don't pollute the global scope

Mini Practice

1. Create a simple highlight plugin
2. Add options with defaults
3. Return this for chaining
4. Test the plugin with different options

Up Next

Continue with UI — jQuery UI widgets and interactions.