賃貸事務所ドットコムBLOG

賃貸事務所ドットコムでは、他のサイトでも多く使われているjQueryをJavascriptのメインライブラリーとして使用しています。

jQueryは、多くのプラグインが公開されていて、リファレンス（jQueryの解説）も、ネット上で多く存在しているので、解らないことは調べながら作業が出来て便利です。

さて、今、「プラグイン」というのが出てきましたが、プラグインとは、jQueryを拡張するための物です。数多くのプラグインが無料で公開されているので、jQuery+ プラグインを使うことで、簡単に色んな事が出来るのがjQueryを利用する一番のメリットだと思います。（興味がある方は、「jQueryプラグイン」などと、Googleで検索してみてください。）

いつもは、使わせてもらってばかりのプラグインですが、思い切って弊社で作ったプラグインを、公開したいと思います。

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
▼ サンプル – sample
(数字を入れて、スタートを押してみて下さい。)

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

/**
 * jQuery countRoll plugin
 * version 1.0.0
 * Copyright (c) 2013 Towers Planning Co.,Ltd.
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * 
 */

(function($) {

    /*
    * 数字が段階的に変わるようなエフェクトプラグイン
    * 引数： { start: 開始時の数 , end: 終了時の数, point: 有効少数点以下 , time: 増減する時間(ms) }
    */

    $.fn.countRoll = function(config){

        var targetDom = $(this);

        //カンマ付きの数字の場合に対応。
        if(typeof config.start == "string"){
            config.start = config.start.replace(/,/g, '') - 0;
        }
        if(typeof config.end == "string"){
            config.end = config.end.replace(/,/g, '') - 0;
        }
        if(typeof config.time == "string"){
            config.time = config.time.replace(/,/g, '') - 0;
        }

        var defaults = {
            start : 0,
            end : 0,
            point : 0,
            time : 1500
        };

        var timer = null;
        var options = $.extend(defaults, config);

        var cnt = options.start;

        timer = setInterval(function(){

            if(options.start <= options.end){
                if(cnt > options.end){
                    cnt = options.end;
                }
            } else if(options.start > options.end) {
                if(cnt < options.end){
                    cnt = options.end;
                }
            }

            var point = Math.pow(10, options.point - 0);

            var str = new String(Math.round(cnt * point) / point).replace(/,/g, "");
            while(str != (str = str.replace(/^(-?\d+)(\d{3})/, "$1,$2")));

            targetDom.text(str);

            if(options.start <= options.end){
                if(cnt >= options.end){
                    clearInterval(timer);
                }
                cnt = cnt + ((options.end - options.start) / 20);
            } else if(options.start > options.end) {
                if(cnt <= options.end){
                    clearInterval(timer);
                }
                cnt = cnt - ((options.start - options.end) / 20);
            }

        }, options.time / 20);

        return this;

    };
})(jQuery);

(*) 使用して起こった問題については責任を負いませんので、自己責任でお使い下さい。