Хотите удивить своих пользователей креативностью идей на сайте, и разместить что то новое и своеобразное на блоге, тогда сегодняшний урок будет вам весьма интересный. В данном уроке мы рассмотрим как сделать замечательный переключатель для сайта с помощью jQuery. Для этого мы будем использовать плагин knobKnob, данный плагин будет использовать трансформации CSS3 и новые методы jQuery для обработки событий, чтобы предоставить пользователю новый способ интерактивного выбора значения из доступного диапазона.

Для начала рассмотрим саму разметку HTML, она достаточно проста. Нужно использовать элемент для обозначения места, где будет располагаться переключатель. Весь остальной код будет генерироваться плагином:

К странице подключается jQuerytransform.js, который обеспечивает поддержку кросс-браузерности свойства CSS3 transform, сам плагин knobKnob и файл script.js, который объединяет все в одно целое.

Как можно заметить, элемент div #control является местом, куда вставляется разметка переключателя. Ниже будет вставлен элемент div, который представляет цветную полоску вокруг выключателя. Она не является  частью плагина KnobKnob, и будет зависеть от устанавливаемого значения. Теперь рассмотрим процесс создание самого плагина:

Плагин имеет некоторые опции, по желанию их можно изменить на свое усмотрение, вот эти параметры:

  • snap — число градусов, которые соответствуют переключению в значение ноль;
  • value — начальное положение переключателя (в градусах);
  • turn — возвратная функция, которая вызывается каждый раз при переключении значения. Имеет единственный аргумент — коэффициент (от 0 до 1) поворота. Мы буем использовать ее для определения количества цветных полосок, которые надо вывести.

В коде используется функция Math.atan2 для вычисления угла (в радианах) между указателем мыши и центром переключателя. Отслеживая угол в начале и завершении перетаскивания мы можем определить величину поворота переключателя.

Теперь используем сам плагин:

Также используются новые методы jQuery 1.7 для манипулирования обработчиками событий. Выше приведенный код создает набор из 30 элементов divкоторые изменяют цвет от зеленого к красному по градиенту.  Они затем поворачиваются с инкрементом в 12 градусов. Вот и все, переключатель готов. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.