Introduction to jQuery Plugins
jQuery plugins are the extended features that can be added and accessed inside the jQuery script blocks, which can be implemented using the syntax ‘jQuery.pluginName.js’. Plugins used for jQuery comes in different forms, such as plain prototype model as jQueryFunction or jQuery.fn, a special method as jQuery.extend() for combining two objects, and a complex option as interface widget jQuery factory that has two or three arguments, namely a widget prototype, an optional object and a namespace. The commonly used jQuery plugins in the javascript code are slider.js and datepicker.js.
jQuery Plugins
- The jQuery plugins are named in the following way:
Code:
jQuery.pluginName.js- jQuery offers separate, simple patterns for extending jQuery
- Simple alias for prototype property of jQueryfunction, jquery.fn
- Another method is to use jquery.extend() method.
- The last and complicated way is the jQuery UI widget factory.
- fn can be used as follows:
Code:
jQuery.fn = jQuery.prototype = { //jquery is placed here //}- $.extend() method is used for jQuery enhancement, this method is used to merge two objects.
- The widget factory is a jQuery method that accepts two or three arguments, those are
- a namespace
- an existing widget prototype inherits from
- an optional object literal to become the new widget’s prototype.
$.widget('namespace.someStuff', {}); Guidelines for Plugin Development
Some of the guidelines for plugin development are listed below:
- Proper usage of this keyword – remember that this points to the current jQuery instance itself.
- Ensure that $ points to jQuery, immediately executing the function that binds $ to jQuery shall be used.
- Semicolons shall be properly used.
- Return the jQuery object if possible at maximum instances.
- Iterating over objects and proper use of $.each.
- Claim only a single name in the jQuery namespace.
- Options shall be kept to accept arguments for the plugin’s behavioral control.
- Public access shall be provided to default plugin settings.
- Public access to secondary functions can also be provided based on applicability.
- Private functions shall be handled properly.
- Plugin metadata support provided by $.data().
Working with UI Widget Factory
Following are the points that shall be taken care of:
- Prevention of multiple instances of the plugin on the same object.
- Methods to enable, disable, or destroy the widget.
- Widgets are stateful, so destroying the instance returns the DOM element to its original state.
- Namespace and prototype creation.
- The ability to override default settings with new options.
- Methods for setting and responding to changes in plugin options.
- Plugin instances are accessible via the object’s stored data.
- The automatic method lookup table.
List of jQuery Plugins
Let us see the list of jQuery plugins with the help of an example:
1. Slider.js
The code added below represents the horizontal slider with the handle, movable with the mouse keys.
Code:
<!doctype html><html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.educba.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>$( function() { $( "#slider" ).slider();} );
</script></head><body>
<div id="slider"></div>
</body></html>2. Datepicker.js
Its made in such a way that when user will click at the input box, an interactive calendar will open up and can be closed by using ESC key in the otherwise case.
Code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.educba.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-
1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-
ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>- In the same way, there are effects also, utilities and interactions also, they all can be seen and referred from http://jqueryui.com.
Let’s see a little on publishing a plugin
The steps for the same are as follows:
- Enable jQuery plugins service hook at Github, at the settings page of the repository, click on Webhooks & Services -> Configure services, then enable the jQuery Plugins service.
- The jQuery Plugins Registry will look in the root level of your repository for any files named *.jQuery.json, create *your plugin*.jQuery.json according to the package manifest specification.
- Validate the manifest file to check for errors.
- Once the service hook gets setup and manifest gets added, now you have to tag the version in git and publish tag to Github and the plugins site now gets notified about the new tag’s availability.
- Remember that the registry won’t allow reprocessing of tags that it has already seen.
Conclusion
Hence we got an idea about what are plugins, how can they be created and how can they be published. We also saw that there are certainly best practices and ways to follow while developing plugins. Also, plugins shall be incorporated from the trusted sources only such that they speed up the development process rather than hampering it by introducing bugs in the picture. We also saw some sample jQuery plugins along with source code, following the same approach, you can develop your plugins too.
Recommended Articles
This has been a guide to jQuery plugins. Here we discuss the introduction, working, guidelines, and list of plugins along with their code. You may also have a look at the following articles to learn more –
