progressbar

[hytzgroup]

progressbar原理

/**
 * progressbar
 */
(function($){
    function init(target){
        var template = 
             '<div class=\"progressbar-text\"></div>'
            +'<div class=\"progressbar-value\">'
                +'<div class=\"progressbar-text\"></div>'
            +'</div>';
        $(target).addClass('progressbar');
        $(target).html(template);
        $(target).bind('_resize', function(e, params){
            if($(this).hasClass('easyui-fluid') || params){
                setSize(target);
            }
            return false;
        });
        return $(target);
    }

    function setSize(target, width){
        var opts = $.data(target, 'progressbar').options;
        var bar = $.data(target, 'progressbar').bar;
        if(width){
            opts.width = width;
        }
        bar._size(opts);
        bar.find('div.progressbar-text').css('width',bar.width());
        bar.find('div.progressbar-text,div.progressbar-value').css({
            height: bar.height() + 'px',
            lineHeight: bar.height() + 'px'
        });
    }

    $.fn.progressbar = function(options, params){
        if(typeof options == 'string'){
           return $.fn.progressbar.methods[options](this, params);
        }
        var options = options || {};
        return this.each(function(){
            var state = $.data(this, 'progressbar');
            if(state){
                $.extend(state.options, options);
            }else{
                state = $.data(this, 'progressbar', {
                    options: $.extend({}, $.fn.progressbar.defaults),
                    bar: init(this)
                });
            }
            $(this).progressbar('setValue', state.options.value);
            setSize(this);
        });
    }

    $.fn.progressbar.methods = {
        options: function(jq){
            return $.data(jq[0], 'progressbar').options;
        },
        resize: function(jq, width){
            return jq.each(function(){
                setSize(this, width);
            });
        },
        getValue: function(jq){
            return $.data(jq[0], 'prgressbar').options;
        },
        setValue: function(jq, value){
            if(value < 0){
                value = 0;
            }
            if(value > 100){
                value = 100;
            }
            return jq.each(function(){
                var opts = $.data(this, 'progressbar').options;
                var text = opts.text.replace(/{value}/, value);
                var oldValue = opts.value;
                opts.value = value;
                $(this).find('div.progressbar-value').width(value + '%');
                $(this).find('div.progressbar-text').html(text);
                if(oldValue != value){
                    opts.onChange.call(this,oldValue,value);
                }
            });
        }
    };

    $.fn.progressbar.defaults = {
        width: 'auto',
        value: 0,
        text: '{value}%',
        onChange: function(newValue, oldValue){}
    };
})(jQuery);