In the lecture I presented, we began by addressing the foundational concepts of jQuery Plugins, emphasizing their primary functions and roles within web development. From there, I introduced the audience to jQueryUI, elucidating its vast array of user interface interactions, widgets, and associated effects. As we delved deeper, I dedicated a segment to the detailed process of crafting custom plugins, offering attendees a step-by-step guide to the procedure. I also took the opportunity to touch upon the vital concept of implementing chaining, explaining its significance in optimizing code structure and functionality. To round off the lecture, I provided an in-depth overview of plugin options, showcasing the myriad ways they can be tailored and adapted to suit varied developmental needs.

Topics covered:

  • jQuery Plugins
    • jQueryUI
  • Creating Custom Plugins
  • Implementing chaining
  • Plugins Options

Video (in Bulgarian)

Presentation Content

jQuery Plugin

  • A Plugin is just a method that extends the jQuery objects prototype
    • Enabling all jQuery objects to use this method
  • Once a plugin is imported, it is used as regular jQuery method
    • Like addClass (), fadeout() and hide()
  • jQuery has many ready-to-use plugins
    • A library jQueryUI for UI controls
  • Plugins for UI
    • Tabs: $("#tabs-holder").tabs();
    • Arrangeable elements: $("#grid" ).sortable();

Creating jQuery Plugins

  • jQuery has an easy way to extend the initial functionality with plugins
    • Just create a regular JavaScript method and attach it to jQuery.fn object
        $.fn.zoom = function(){    
          var $this = $(this);
          $this.on("mouseover", function() {
            //zoom in element
          $this.on("mouseout", function() {
            //zoom out element

Chaining in Plugins

  • Chaining is pretty good and useful feature
    • Better to be implemented in our plugins
    • Done easy, just return this at the end of the plugin function
        $.fn.zoom = function(){    
          var $this = $(this);
          $this.on('mouseover', function() {…});
          $this.on('mouseout', function() {…});
          return $this;

Plugins with Options

  • Plugins can also be provided with options
    • Just pass regular function parameters
        //zoom with size percents
        $.fn.zoom = function(size){    
          var $this = $(this);
          $this.on('mouseover', function() {…});
          $this.on('mouseout', function() {…});
          return $this;

Plugins Options

  • Yet the options sometimes become too many
    • When too many arguments, just use a options object
    • Give the options as a JSON-like object


  • Create a jQuery plugin for creating dropdown list
    • By given the following:
      <select id="dropdown">
        <option value="1">One</option>
        <option value="2">Two</option>
    • Produces the following HTML:
      <select id="dropdown" style="display: none"></select>
      <div class="dropdown-list-container">
        <ul class="dropdown-list-options">
          <li class="dropdown-list-option" data-value="0">One</li></ul>
    • And make it work as SELECT node
      • Selecting an one of the generated LI nodes, selects the corresponding OPTION node
        • So $(’# dropdown:selected ') works
  • * Create a jQuery plugin for fading in/fading out message box
    • Creates a message box
      var msgBox = $('#message-box').messageBox();
    • Show a success/error message in the box
      • Showing is done by setting the opacity of the message from 0 to 1 in an interval of 1 second
      • The message disappears after 3 seconds
      msgBox.success('Success message');
      msgBox.error('Error message');