Хотел просто выложить плагин в паблик для тех кому нужно, но потом подумал, что напишу лучше вводную статью про написание плагинов для джиквери, новичкам пригодиться :) Итак, для написания плагина под jQuery не нужно обладать какими-то специальными знаниями. Для этого мы всего лишь создаем новый метод у объекта jQuery.fn. Код с подробными комментариями по созданию плагина ниже:
File progress-bar.js:
// jQuery plugin: progress-bar
// создаем анонимную функцию, в которую первым аргументом передаем объект jQuery, это нужно для того, чтобы в случае использования jQuery.noConflict() ничего не поломалось
;(function($)
{
// создаем новый метод у объект $.fn, который в последствии можно будет вызывать через $("any-selector").progressBar( /* Object */ options )
$.fn.progressBar = function( settings )
{
// создаем объект с настройками по умолчанию
var settings = $.extend(
{
width : null, // ширина прогесс бара, по умолчанию будет взято из css-файла
height : null, // высота прогресс бара, по умолчанию будет взято из css-файла
image : null, // изображение для прогресс бара, по умолчанию будет взято из css-файла
percent : true, // показывать или нет проценты
duration : 10, // за столько секунд прогресс бар достигнет 100%,
complete : function(){} // callback-функция, которая выполниться по завершению 100%
}, settings);
// this == объект jQuery, полученный в результате поиска по указанному селектору, и содержащий список найденных элементов
return this.each(function()
{
var
// подготавливаем контейнер для работы, удаление внутренних элементов также нужно при повторном вызове плагина
bar = $(this).empty(),
// создаем внутри родительского блока элемент, который будет отрисовывать "полосу загрузки"
progress = $('<div class="image" />')
.width(0)
.appendTo( bar ),
// создаем внутри родительского блока элемент, который будет отображать состояние "полосы загрузки" в процентах
percent = $('<div class="percent" />')
[ settings.percent ? 'show' : 'hide']() // в случаем, если указана опция не показывать проценты, блок будет всегда скрыт
.text('0 %')
.appendTo( bar );
// используем некоторые опции настроек, если они были переданы при подключении плагина
// примечание: использование логического оператора "&&" в данном контексте аналогично проверке через "if"
settings.width && bar.width( settings.width );
settings.height && bar.height( settings.height );
settings.image && progress.css('background-image', 'url('+ settings.image +')');
// запускаем анимацию полосы прогресс-бара
progress.animate({width: '100%'},
{
duration: settings.duration * 1000,
complete: function()
{
// установка значения в 100% необходима, т.к округление на шагах анимации иногда доходит лишь до 99%
percent.text('100 %');
// вместо простого вызовы callback-функции мы вызываем её в контексте родительского блока, чтобы при использовании плагина можно было обратиться к этому элементу внутри через "this"
settings.complete.apply( bar );
},
// на каждом "шаге" анимации обновляем процентное выполнение прогресса
step: function(){ percent.text( parseInt($(this).width() / bar.width() * 100) + ' %' ) }
});
});
}
})(jQuery);
Пример использования плагина:
<script type="text/javascript">
$(function()
{
// подключение плагина к элементам span.progress-bar с настройками по умолчанию
$('span.progress-bar').progressBar();
// определеям нестандартные настройки для плагина
$('div.progress-bar').progressBar(
{
width : '500px',
duration : 15,
image : 'img/progress-bar2.gif',
complete : function()
{
alert('Готово!')
}
});
});
</script>
Для тех, кому не достаточно функционала плагина, те могут посмотреть в сторону официального jQuery-UI виджета «Progress bar».
Смотреть результат работы плагина | Скачать jQuery-плагин progress-bar
