Onatolich Interface Solutions

AlkatraZ (18.03.2013 / 18:35)
Вот кстати еще ссылка на подобные исследования: http://xozblog.ru/2012/10/chec ... css3/

(function($){
  jQuery.fn.progressline = function(options){

    var e = this;

    var options = $.extend({
        height:    '12px',
        maximum:   100,
        value:     0,
        showValue: true,
        width:     '300px'
    }, {
        height:    e.data('height'),
        maximum:   e.data('maximum'),
        value:     e.data('value'),
        showValue: e.data('showValue'),
        width:     e.data('width')
    }, options);

/*-------------------------------------------------------------------*/

    var handler = function(){
        if(options.value > options.maximum) options.value = options.maximum;
        e.data('height', options.height); e.data('maximum', options.maximum); e.data('value', options.value); e.data('showValue', options.showValue); e.data('width', options.width);

        if(!e.hasClass('ois-progressline'))
        {
            e.addClass('ois-progressline').css('width', options.width);
            $('<section></section>').addClass('ois-progressline-line').css({
                height: options.height,
                width: Math.ceil((e.width() + 2) * options.value / options.maximum) + 'px'
            }).appendTo(e);

            if(options.showValue) $('<section></section>').addClass('ois-progressline-value').text(options.value).appendTo(e);
        }

        e.css('width', options.width).find('section.ois-progressline-line').css({
            height: options.height,
            width: Math.ceil((e.width() + 2) * options.value / options.maximum) + 'px'
        });
        e.find('section.ois-progressline-value').text(options.value + '%');
    }

/*-------------------------------------------------------------------*/

    return this.each(handler);
  }
})(jQuery);

/* Главный блок */
.ois-progressline{
  background: #d0d3e8;
  margin: 5px 4px;
  position: relative;
  text-align: left;
}

/* Заполненное */
.ois-progressline-line{
  background: #6890ba;
  display: block;
  height: 8px;
  margin: -1px;
}

/* Значение */
.ois-progressline-value{
  color: #6890ba;
  cursor: default;
  font-size: 7pt;
  position: absolute;
  right: 0; bottom: 100%;
}

<div id="pline"></div>

<script>
    $('#pline').progressline({
        height: '12px',
        maximum: 100,
        value: 30,
        showValue: true,
        width: '200px'
    });

    $('#pline').live('click', function(){
        $(this).progressline({ value: $(this).data('value') + 10 });
    });
</script>