How To Create jQuery Plugin

Create jquery plugin easily, simple tutorial and example to make and create jquery plugin, create advanced jquery plugin with options.

How To Create jQuery Plugin

Firstly learn jQuery functions, this 200 jquery video tutorials on youtube, after that read basic plugin creation, in this tutorial we will learn how to create simple jquery plugin and advanced jquery plugin.

Create Simple jQuery Plugin

This plugin to change body background color, copy this code and paste it in new .js file, for example “simple-plugin.js”:

/*
    Simple jQuery plugin to change body background color
    Written By Qassim Hassan
    Twitter: @QQQHZ
    Websites: wp-time.com | qass.im | wp-plugins.in
*/

(function ( $ ) {

    $.fn.addBackground = function(options) {

        /* Add Options */
        var colorOptions = $.extend({
                bgcolor: "#000000", // Default background color is black #000000
        }, options );

        /* Add Background Color */
        $(this).css("background-color", colorOptions.bgcolor);
    };

}( jQuery ));

Include jquery library before your jquery plugin, for example:

<script type="text/javascript" src="jquery-1.12.1.min.js"></script>

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

Plugin usage:

<script type="text/javascript">
    $(function(){
        $("body").addBackground(); // default background color is black #000000
    });
</script>

Use options:

$(function(){
    $("body").addBackground( { bgcolor: "blue" } ); // will be change background color to blue!
});

Create Advanced jQuery Plugin

This plugin to check if input value is Email or not, if not Email will be display alert “Please enter a valid Email” and input border color will be “RED”:

/*
    validEmail
    jQuery plugin for Email validation
    Version 1.0.0
    Written By Qassim Hassan
    Twitter: @QQQHZ
    Websites: wp-time.com | qass.im | wp-plugins.in
    Dual licensed under the MIT and GPL licenses:
    http://www.opensource.org/licenses/mit-license.php
    http://www.gnu.org/licenses/gpl.html
    Copyright (c) 2016 - Qassim Hassan
*/

(function ( $ ) {
 
    $.fn.validEmail = function(options) {

         var veOptions = $.extend({
             errorMessage: "Please enter a valid Email!", // Default error message.
             errorBorderColor: "red", // Defalut border color if value is not valid Email.
             validBorderColor: "blue", // Defalut border color if value is valid Email.
         }, options );

        $(this).change(function(){
            var getInputValue = $(this).val(); // Get input value.

            if( !getInputValue.match( /(@)+[a-zA-Z0-9]+(\.)+[a-zA-Z]/ ) ){ // Check if input value is Email or not:
             // If not email:
                 alert( veOptions.errorMessage ); // Display error message! You can remove this line.
                  $(this).css("border", "1px solid "+veOptions.errorBorderColor); // Add red border to input.
                  return false;
             }else{
             // If input value is valid Email:
                 $(this).css("border", "1px solid "+veOptions.validBorderColor); // Change border color to blue.
             }

        });

    };
 
}( jQuery ));

Usage:

<script type="text/javascript">
    $(function(){
        $("#my-input").validEmail();
    });
</script>

<form method="post" action="#">
    <input id="my-input" type="text" value="">
    <input type="submit" value="submit">
</form>

Use options:

$(function(){
    $("#my-input").validEmail( { errorMessage: "The value is not Email!", errorBorderColor: "orange", validBorderColor: "green" } );
});

Download all jQuery plugins with example.