How to create own custom JQuery Plugin?


My last article was about “How to auto reload page content using Jquery, Ajax and PHP”. Today I will show you how to create your own custom plugin using Jquery.

Many times we simply code according to current need on the project and may be same repetitive code in the next project. Why to code multiple times? If you feel some functionality can be used in future task as well then instead just fulfilling current project needs, you can create a plugin which can be used anywhere in any project.

What if we code once and use it all over where ever it is applicable? Sound interesting! yes. You are able to save your time by this way. If you are still wondering how to create Jquery plugin then here is the simple steps by which you can get some idea to create your own custom plugin and how to bind data into the div using Jquery.

Step1: Create a file called index.html and inside your html body paste the below code.

<script src="" type="text/javascript"></script> 
<script src="js/custom-plugin.js" type="text/javascript"></script> 

<script type="text/javascript">

        //data binding
        $("#search").on("keyup keypress blur change" , function(){
           // Custom Plugin
                id        :  'hello-text' ,
                text      :  $("#search").val(),
                color     :  '#005dff',
                fontStyle :  'italic'

<input type="text" id="search" />
<div id="hello-text"></div>

Step2: Create a file called custom-plugin.js and paste the below code.


 * @Author Sanjoy Dey
 * @param {type} $
 * @returns {undefined}

(function($) { 
    $.fn.helloWorld = function(options) {
         // establish our default settings
        var settings = $.extend({
            id           : 'search',
            text         : 'Hello World!',
            color        : null,
            fontStyle    : null
        }, options);
        // Establish our default settings
        return $("#"+ function() {
            // bind the entered text
            $(this).text( settings.text );

           //Apply user defined style
            if ( settings.color ) {
                $(this).css( 'color', settings.color );

            // Apply user defined font style
            if ( settings.fontStyle ) {
                $(this).css( 'font-style', settings.fontStyle );


Step3: Run the index.html page into browser and keep typing text into the text box you can see same value displaying below div.


You can change the color, font, id etc. according to your needs. You may make use of this simple plugin app and build your own jquery plugin also lot of other functionality can be added into the same. Hope this small article helpful to you. If so don’t forget to like, share or leave your comments below. Keep visiting.

No comments:

Post a Comment

Follow Us On Facebook Open Source Web Developers by Appsntech facebook group Twitter Open Source Web Developers by Appsntech twitter group Google+ Open Source Web Developers by Appsntech Google group Linkedin Open Source Web Developers by Appsntech, LinkedIn group
Copyright @2011-2015 All rights reserved. Powered By- Sanjoy Dey Productions