Video: jQuery Plugins (Bulgarian)

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

    (function($){
      $.fn.zoom = function(){    
        var $this = $(this);
        $this.on("mouseover", function() {
          //zoom in element
        });
        $this.on("mouseout", function() {
          //zoom out element
        });
      }
    }(jQuery));
    
    $(".image").zoom();
    

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

    (function($){
      $.fn.zoom = function(){    
        var $this = $(this);
        $this.on('mouseover', function() {…});
        $this.on('mouseout', function() {…});
        return $this;
      }
    }(jQuery));
    
    $('.image')
      .zoom()
        .addClass('zoom');
    

Plugins with Options

• Plugins can also be provided with options
  • Just pass regular function parameters

    (function($){
      //zoom with size percents
      $.fn.zoom = function(size){    
        var $this = $(this);
        $this.on('mouseover', function() {…});
        $this.on('mouseout', function() {…});
        return $this;
      }
    }(jQuery));
    

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

Homework

• 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>
    </select>
    
    $('#dropdown').dropdown()
    

  • 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>
    </div>
    

  • 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');