Пример написания плагина для jQuery

Хотел просто выложить плагин в паблик для тех кому нужно, но потом подумал, что напишу лучше вводную статью про написание плагинов для джиквери, новичкам пригодиться :) Итак, для написания плагина под 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
15.03.2011 / jquery, plugins
Похожие статьи:
Оценка статьи: проголосовало - 0, средняя оценка - 0
Комментарии к статье (0): Добавить комментарий
АНТИСПАМ: Выберите улыбающийся смайл: yep! nope! nope!
Оформление заявки
Файл>>