Plugins are the section of code and these codes are written in a JavaScript file. These JavaScript files are used to provide jQuery methods that work together with jQuery library methods.
You can download jQuery plug-in from https://jquery.com/plugins
How to create a jQuery plugin with methods: In Jquery Plug-in is a code that is needed in a standard javascript file. Plugins help in providing different methods that can be used with different jquery library methods.
- Create a method.
jQuery.fn.methodName = methodDefinition;
- To Obtain a perfect or compatible code use this .each which is used to perform over a set of matched elements.
- Prefix should conclude with .js.
pNote: Where .methodname is the name of a method and
methoddefinition defines a method
Example: Here is a plug-in example.
alert.js
jQuery.fn.alertMethod = function() {
return this.each(function() {
alert('GeeksforGeeks in "' + $(this).prop("tagName") + '"tag');
});
}; |
index.html
<html>
<head>
<script type = "text/javascript" src =
</script>
<script src = "alert.js" type = "text/javascript">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").alertMethod();
});
</script>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
|
Output:
How to check if a jQuery plugin is loaded:
- Step 1: Install Browsersync using npm. We will use Browsersync to start a server and provide a URL to view the HTML site and to load jQuery using CDN (Content Delivery Network). We will install Browsersync globally.
npm install -g browser-sync
- Step 2: We will be using jQuery-UI plugin for this tutorial. We will test whether this plugin is successfully loaded or not using jQuery. Download the latest version of this plugin and extract it to your project root folder.
- Step 3: Create a index.html file
Complete Reference: