We write your plugin for jQuery

This morning I went to Google Maps and was happy to see the Cork layer there. Immediately the eye caught on an interesting interface solution for timing, which will be shown the situation with traffic jams.

Immediately I wanted to use a similar governing body in my projects.

It's time to remember how to write plugins under jQuery.

Create a control layout

It is better to create jQuery plugins in an anonymous namespace, so as not to litter the global namespace of the application.
')
In addition, we use the jQuery variable as the $ variable, thereby supporting the $ .noConflict () convention.

So, here's a pig:

(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); 

We conceal the original control, and post our layout after it. It is impossible to delete the original element, since the user can continue to interact with us through it.

Change slider state

  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); 

Please note that we also generate a change event for the source element.

We provide an API to control the control through 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); }; 

Final version

Add a reaction to pressing the buttons, draw a style sheet, and the plugin will work :)

It remains only to lay out a demo page and throw the whole thing on GitHub.

github.com/akzhan/jquery-time-slider