Строка индикатор прогресса при клике / Элементы / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 765

Количество символов:

Посмотрели: 2006 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 3.7 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, Progress, Прогресс, сниппет, Bootstrap, element, html, элемент, индикатор

Поделился: BootstrapТема

Добавлено: 2016-03-22 в 16:56

Метка: 1581616335

⇄ ⇅

<p class="text-center">
 <button data-toggle="progressbar" data-target="#myProgressbar" data-value="reset" data-level="info" class="btn btn-default">Сброс</button>
 <button data-toggle="progressbar" data-target="#myProgressbar" data-value="0" class="btn btn-default">0%</button>
 <button data-toggle="progressbar" data-target="#myProgressbar" data-value="15" class="btn btn-default">15%</button>
 <button data-toggle="progressbar" data-target="#myProgressbar" data-value="30" class="btn btn-default">30%</button>
 <button data-toggle="progressbar" data-target="#myProgressbar" data-value="45" class="btn btn-default">45%</button>
 <button data-toggle="progressbar" data-target="#myProgressbar" data-value="60" class="btn btn-default">60%</button>
 <button data-toggle="progressbar" data-target="#myProgressbar" data-value="75" class="btn btn-default">75%</button>
 <button data-toggle="progressbar" data-target="#myProgressbar" data-value="90" class="btn btn-default">90%</button>
 <button data-toggle="progressbar" data-target="#myProgressbar" data-value="finish" data-level="success" class="btn btn-default">MAX</button>
 </p>

<div id="myProgressbar" class="progress progress-striped active">
 <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
 <span class="sr-only">0% Complete</span>
 </div>
 </div>

</div>
</div>

"use strict";

var Progressbar = function (element) {
 this.$element = $(element);
}

Progressbar.prototype.update = function (value) {
 var $div = this.$element.find('div');
 var $span = $div.find('span');
 $div.attr('aria-valuenow', value);
 $div.css('width', value + '%');
 $span.text(value + '% Complete');
}

Progressbar.prototype.finish = function () {
 this.update(100);
}

Progressbar.prototype.reset = function () {
 this.update(0);
}

$.fn.progressbar = function (option) {
 return this.each(function () {
 var $this = $(this),
 data = $this.data('jbl.progressbar');

if (!data) $this.data('jbl.progressbar', (data = new Progressbar(this)));
 if (typeof option == 'string') data[option]();
 if (typeof option == 'number') data.update(option);
 })
};

$(document).on('click', '[data-toggle="progressbar"]', function (e) {
 var $this = $(this);
 var $target = $($this.data('target'));
 var value = $this.data('value');

e.preventDefault();

$target.progressbar(value);
});

}(window.jQuery);
</script>

BootstrapTema

Строка индикатор прогресса при клике

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0