Creating a jquery plugin

ยท

2 min read


Jquery has been used quite largely in many web projects because it gives you all javascript functions and commands wrapped in a nice API interface. For example: "jquery selectors", used very heavily.

Also, there were a lot of plugins which were build on top of jquery. for example: bootstrap's modal, tooltip etc.

Example usage of bootstrap modal:

$("#target").modal("show")

Whenver we use $ instead of document.querySelector() it returns a jquery object which has some methods available like .css(), .click() etc.

Jquery object gets these methods from $.fn object

So, let's say we want to write our own method and add it in $.fn definition so that every jquery object can also use that method.

Let's take a use case of Dropcap/s. We want to apply a function on a jquery object which will basically make the first letter bigger in size relative to the sentence or paragraph. (Something like we see in newsletters ๐Ÿค”)

Let's name this function dropCap and the definition will look somthing like this:

$.fn.dropCap = function () {
  // your definition goes here
}

We can use this function on any jquery object now:

$(".some-element").dropCap()

and it will execute whatever functionality we write in our dropCap function.

Protecting the $ Alias and Adding Scope

Detail explanation

Since the $ variable is very popular among JavaScript libraries, we need to scope it and map it to jQuery variable by using a Immediately Invoked Function Expression

;(function ($) {
  $.fn.dropCap = function () {
    // your definition goes here
  }
})(jQuery)

โฒ Now, we can write some css for our dropCap class

.dropCap {
  font-size: 2.4em;
  font-weight: 700;
  margin-right: 5px;
}

This will give the dropcap effect when we apply this class to first letter.

dropcap css

Let's finallly add the code for our plugin

;(function ($) {
  $.fn.dropCap = function () {
    val = this.text()
    first_letter = val.substring(0, 1)
    dropCapLetter = `<span class='dropCap'>${first_letter}</span>`
    this.html(dropCapLetter + val.substring(1))
  }
})(jQuery)

Above function reads the passed jquery object and updates the first letter of the paragraph as dropCap letter.

Codepen example

Thanks for reading, I hope it was helpful in some way ๐Ÿ˜ƒโœจ


References

Advance plugin concepts

Did you find this article valuable?

Support Bharat Saraswat by becoming a sponsor. Any amount is appreciated!

ย