Сегодня утром я зашёл на Google Maps и с радостью увидел там слой «Пробки». Сразу же глаз зацепился за интересное интерфейсное решение для выбора времени, на которое будет показана ситуация с пробками.
Сразу же захотелось использовать подобный орган управления в своих проектах.
Самое время вспомнить, как пишутся плагины под jQuery.
Плагины jQuery лучше создавать в анонимном пространстве имён, чтобы не замусоривать глобальное пространство имён приложения.
Кроме того, мы используем переменную jQuery как переменную $, тем самым поддерживая соглашение $.noConflict().
Итак, вот болванка:
Исходный орган управления мы скрываем, и размещаем после него наш макет. Удалять исходный элемент нельзя, так как пользователь может и далее взаимодействовать с нами через него.
Обращу ваше внимание, что мы также формируем событие change для исходного элемента.
Добавляем реакцию на нажатие кнопок, рисуем таблицу стилей, и плагин заработал :)
Осталось лишь сверстать демо-страницу и закинуть всё дело на GitHub.
github.com/akzhan/jquery-time-slider
Сразу же захотелось использовать подобный орган управления в своих проектах.
Самое время вспомнить, как пишутся плагины под 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