Video: jQuery Plugins (Bulgarian)

November 02, 2023 Nikolay Kostov (Nikolay.IT)

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