Пишем свой плагин для jQuery

Сегодня утром я зашёл на Google Maps и с радостью увидел там слой «Пробки». Сразу же глаз зацепился за интересное интерфейсное решение для выбора времени, на которое будет показана ситуация с пробками.

Сразу же захотелось использовать подобный орган управления в своих проектах.

Самое время вспомнить, как пишутся плагины под jQuery.

Создаём макет органа управления

Плагины jQuery лучше создавать в анонимном пространстве имён, чтобы не замусоривать глобальное пространство имён приложения.

Кроме того, мы используем переменную jQuery как переменную $, тем самым поддерживая соглашение $.noConflict().

Итак, вот болванка:

(function($)
{
        var DATA_CMDS = 'timeslider-commands';
 
        $.fn.timeslider = function(options)
        {
                var make = function()
                {
                        var $this = $(this);

                        if (options === null)
                        {
                                options = {};
                        }

                        var $container = $('<div class="timeslider-container" unselectable="on"></div>');
                        var $downArrow = $('<div class="timeslider-arrow timeslider-down-arrow" unselectable="on"></div>');
                        var $upArrow = $('<div class="timeslider-arrow timeslider-up-arrow" unselectable="on"></div>');
                        var $sliderLine = $('<div class="timeslider-slider-line" unselectable="on"></div>');
                        var $labels = $('<div class="timeslider-labels" unselectable="on"></div>');
                        var $slider = $('<div class="timeslider-slider" unselectable="on"></div>');
                        var $input = $('<input type="hidden" />');

                        $sliderLine.append($slider);
                        container.append($downArrow).append($sliderLine).append($upArrow);
                        $container.append($labels);
 
                        var $outmostContainer = $('<div class="timeslider-container"></div>');
                        $outmostContainer.append($container);
                        $this.hide().after($outmostContainer);

                        $this.data(DATA_CMDS, commands);
                 };

                 return this.each(make);
        };

})(jQuery);

Исходный орган управления мы скрываем, и размещаем после него наш макет. Удалять исходный элемент нельзя, так как пользователь может и далее взаимодействовать с нами через него.

Меняем состояние слайдера

                        var updateSlider = function()
                        {
                                $slider.show().css('left', toPixels(value) + 'px');
                        };

                        var updateInput = function()
                        {
                                $input.val(toText(value));
                        };

                        var updateArrows = function()
                        {
                                if (isLeftEdge(value))
                                {
                                        $downArrow.addClass('timeslider-disabled');
                                }
                                else
                                {
                                        $downArrow.removeClass('timeslider-disabled');
                                }
                                if (isRightEdge(value))
                                {
                                        $upArrow.addClass('timeslider-disabled');
                                }
                                else
                                {
                                        $upArrow.removeClass('timeslider-disabled');
                                }
                        };

                        var pleaseSet = function(newValue)
                        {
                                if ('string' == typeof newValue)
                                {
                                        newValue = fromText(newValue);
                                }
                                else
                                {
                                        newValue = normalize(newValue);
                                }
                                value = newValue;

                                updateInput();
                                updateSlider();
                                updateArrows();

                                return $this.change();
                        };

                        pleaseSet(options.value);

Обращу ваше внимание, что мы также формируем событие change для исходного элемента.

Предоставляем API для управления органом управления через JavaScript

        var DATA_CMDS = 'timeslider-commands';
…
                        var commands = {
                                'set': pleaseSet,
                                'get': pleaseGet
                        };

                        $this.data(DATA_CMDS, commands);
…
                var command = null;

                var follow = function()
                {
                        var $this = $(this);
                        return $this.data(DATA_CMDS)[command].call($this, options);
                };

                if ('string' == typeof options)
                {
                        command = options;
                        options = arguments[1] || {};
                        var retValue = this;

                        this.each(function()
                        {
                                retValue = follow.call(this);
                        });

                        return retValue;
                }

                return this.each(make);
        };

Финальная версия

Добавляем реакцию на нажатие кнопок, рисуем таблицу стилей, и плагин заработал :)

Осталось лишь сверстать демо-страницу и закинуть всё дело на GitHub.

github.com/akzhan/jquery-time-slider