How to Create a Custom jQuery Plugin

How to Create a Custom jQuery Plugin

jQuery is, in my humble opinion, the best Javascript library.

Much of jQuery’s popularity is due to the fact that it considerably reduces development time. Their slogan is “write less, do more”, which is a great summary of jQuery’s benefits.

What make jQuery really great are the plugins. Plugins are reusable portions of code which help you write even less Javascript to achieve specific features on the client side. For example, you can use plugins to create slideshows, galleries, popups and more.

In this tutorial, you will learn how to create your own custom jQuery plugin in 4 easy steps.

Step #1. Create a basic jQuery plugin

In this tutorial we’re going to build a plugin that will print a greeting, plus a person’s name.

Create a file named jquery-hello.js with the following code:

{codecitation javascript}(function ( $ ) {

$.fn.hello = function( options ) {

// Default options
var settings = $.extend({
name: ‘John Doe’
}, options );

// Apply options
return this.append(‘Hello ‘ + settings.name + ‘!’);

};

}( jQuery ));{/codecitation}

In the previous code:

{codecitation javascript}$.fn.hello{/codecitation}

… defines the name for our plugin. In this case it’s hello.

{codecitation javascript}name: ‘John Doe'{/codecitation}

… defines the default options. In this case it’s name and the default value is ‘John Doe’

{codecitation javascript}this.append(‘Hello ‘ + settings.name + ‘!’){/codecitation}

… will print the text “Hello person’s name !”

Step #2. Load the plugin

Load the last version of jQuery, the hello plugin and the call to the plugin in an HTML file. In this example, I’m going to add this to the head of my index.html file:

{codecitation javascript}<script src=”http://code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”jquery-hello.js”></script>
<script>
$( document ).ready(function() {
$( ‘#here’ ).hello();
});
</script>{/codecitation}

Inside the body, add the following div:

{codecitation}<div id=”here”></div>{/codecitation}

Step #3. Test the plugin

Open your site in a browser and the end result should display the greeting, plus the default name:

jquery hello plugin without options

Edit the call to hello plugin to include a custom name:

{codecitation javascript}<script>
$( document ).ready(function() {
$( ‘#here’ ).hello({
name: ‘Valentin Garcia’
});
});
</script>{/codecitation}

Refresh your site:

jquery hello plugin with options

Step #4. Add a new feature

You can easily integrate a new feature in the plugin, such as font color, by updating jquery-hello.js:

{codecitation javascript}(function ( $ ) {

$.fn.hello = function( options ) {

// Default options
var settings = $.extend({
name: ‘John Doe’,
color: ‘orange’
}, options );

// Apply options
return this.append(‘Hello ‘ + settings.name + ‘!’).css({ color: settings.color });

};

}( jQuery ));{/codecitation}

The new portions of code are:

{codecitation javascript}color: ‘orange'{/codecitation}

… defines the default color when a custom one is not defined later.

{codecitation javascript}.css({ color: settings.color }){/codecitation}

… will apply the color property as inline CSS.

Update the call to hello plugin to include a custom color:

{codecitation javascript}<script>
$( document ).ready(function() {
$( ‘#here’ ).hello({
name: ‘Valentin Garcia’,
color: ‘green’
});
});
</script>{/codecitation}

The new syntax now includes:

{codecitation javascript}color: ‘green'{/codecitation}

… defines ‘green’ as a custom color to override the default ‘orange’.

Refresh your site:

custom jquery plugin with new option

You can play around by adding new features or customizing the example ones. If you are not familiar with jQuery, don’t worry, we have a jQuery class for you.

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
14 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Neil Bannet

Thanks!

Naveen

Thank you so much for very very simple tutorials

TaiJinYuan

Thanks for your clear tutorial!

Tooraj Jamal

What if the main selector returns multiple items?

yuva

use this.each()

Micah Epps

then can the tutorial cover that?  this is really an EXTREMELY BASIC example.

weenadelic@hotmail.com

Just. Wow.

snow-man

Hey boss how can we get click event inside plugin while clicked on main selector?

zahra

very goood

Riaz Ali Shah

Thanks nice tutorial 

krag

Good job! It helps me to customize my website with my own plugins.

mikall

Awesome! So glad you found this info useful.

کیارش شماعی

thanks a lot 

Ed

there’s no point to Jquery plugins. They just complicate your code. You can use jquery in standard js functions and classes and they’re much easier to maintain.

14
0
Would love your thoughts, please comment.x
()
x