jQuery Indicator plug-in

Written by Cagdas Erman AFACAN on 01/25/2013 Categories: Javascript, JQuery, Uncategorized Tags: , , , , ,

Indicator plug-in is in version 1.0 which is really simple and useful.

First you must add scripts between head tags.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script>

and then JQuery Indicator

<script type="text/javascript">// <![CDATA[
/* File Created: October 4, 2012      Author: CagdaşsErman AFACAN     Web: http://www.codemein.net     Plug-in Name: Infdicator     Description: This plugin is used to show and hide loader image when you do mouse request that you decide. */ (function ($) {     $.fn.indicator = function (options) {         // Create some defaults, extending them with any options that were provided         var settings = $.extend({             'path': '',                 'width': '20px',                 'height': '20px',                 'callBack': function () {}         }, options),             loaderObj = settings.path.length > 0 ? $("<img id='loader' src='" + settings.path + "' style='width:" + settings.width + "; height:" + settings.height + ";' alt='loader' />") : $("<span id='loader'>Loading...<span/>");

        return this.each(function () {
            var obj = $(this);

            if (obj.attr('type') !== "checkbox") {
                // Click event binding           
                obj.bind('click', function () {
                    obj.after(loaderObj);
                    obj.attr("disabled", "true");
                     debugger;
                    if (typeof (settings.callBack) === "function") {
                        settings.callBack();
                    }
                });
            } else if (obj[0].nodeName === "INPUT" && obj.attr('type') === "checkbox") {
                // Click event binding           
                obj.bind('change', function () {
                    obj.after(loaderObj);
                    obj.attr("disabled", "true");
                     debugger;
                    if (typeof (settings.callBack) === "function") {
                        settings.callBack();
                    }
                });
            }

        });

    };

})(jQuery);

//This is the function can be called after your job done to clean indicator from UI. Feel free to change selector (.pirpir) with yours.
function cleanIndicator() {
    var loaders = $("img#loader , span#loader");

    loaders.remove();
    $(".pirpir").removeAttr("disabled");
};
// ]]></script>

Now all you need to do is activate Indicator plug-in with code below.
For an example I requested Twitter api to get my (@Climberman) tweet dates

//HOW TO USE IT
$(".pirpir").indicator({
    'path': 'http://www.loadinfo.net/images/preview/33_ball_two_24.gif?1200916238',
     'callBack': function () {
        $.ajax({
            url: 'http://api.twitter.com/1/statuses/user_timeline.json/',
            type: 'GET',
            dataType: 'jsonp',
            data: {
                screen_name: "climberman",
                include_rts: true,
                count: 10,
                include_entities: true
            },
            success: function(data, textStatus, xhr) {
                debugger;
                var i=0;
                for(;  i < data.length; i++ ){
 					$('#result').append(data[i].created_at + "<br/>");      
                }
            }   
 
        }).done(function(){cleanIndicator()});
    }
});

Without callback param it looks more simple then previous.

$(".pirpir").indicator({
    'path': 'http://www.loadinfo.net/images/preview/33_ball_two_24.gif?1200916238', /*Path is the indicator img link*/
});

Anyway you can use the Indicator plugin as you wish. I also give

DEMO

on JsFiddle

No Comments