В данном уроке мы создадим плагин jQuery для представления глянцевого переключателя в качестве элемента управления на веб страницах. Названный knobKnob, данный плагин будет использовать трансформации CSS3 и новые методы jQuery для обработки событий, чтобы предоставить пользователю новый способ интерактивного выбора значения из доступного диапазона. HTML Разметка HTMLдля страницы достаточно проста и очевидна. Нужно использовать элемент для обозначения места, где будет располагаться переключатель. Весь остальной код будет генерироваться плагином: index.html Code<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- Стили CSS --> <link rel="stylesheet" href="assets/css/styles.css" /> <link rel="stylesheet" href="assets/knobKnob/knobKnob.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <section id="main"> <div id="bars"> <div id="control"> <!-- Разметка переключателя будет вставлена здесь --> </div> <!-- Разметка цветной полосы --> </div> </section> <!-- JavaScript --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="assets/knobKnob/transform.js"></script> <script src="assets/knobKnob/knobKnob.jquery.js"></script> <script src="assets/js/script.js"></script> </body> </html> К странице подключается jQuery, transform.js, который обеспечивает поддержку кросс-браузерности свойства CSS3 transform, сам плагин knobKnob и файл script.js, который объединяет все в одно целое. Элемент div #control является местом, куда вставляется разметка переключателя. Ниже будет вставлен элемент div, который представляет цветную полоску вокруг выключателя. Она не является частью плагина KnobKnob, и будет зависеть от устанавливаемого значения. Плагин KnobKnob также использует стили для формирования внешнего вида переключателя. Теперь перейдем к созданию плагина. Код jQuery Исходный код плагина вы можете найти в прилагаемом к уроку архиве. assets/knobKnob/knobKnob.jquery.js Code(function($){ $.fn.knobKnob = function(props){ var options = $.extend({ snap: 0, value: 0, turn: function(){} }, props || {}); var tpl = '<div class="knob">\ <div class="top"></div>\ <div class="base"></div>\ </div>'; return this.each(function(){ var el = $(this); el.append(tpl); var knob = $('.knob',el), knobTop = knob.find('.top'), startDeg = -1, currentDeg = 0, rotation = 0, lastDeg = 0, doc = $(document); if(options.value > 0 && options.value <= 359){ rotation = currentDeg = options.value; knobTop.css('transform','rotate('+(currentDeg)+'deg)'); options.turn(currentDeg/359); } knob.on('mousedown', function(e){ e.preventDefault(); var offset = knob.offset(); var center = { y : offset.top + knob.height()/2, x: offset.left + knob.width()/2 }; var a, b, deg, tmp, rad2deg = 180/Math.PI; knob.on('mousemove.rem',function(e){ a = center.y - e.pageY; b = center.x - e.pageX; deg = Math.atan2(a,b)*rad2deg; // Нужно преобразовать отрицательные значения угла в положительные if(deg<0){ deg = 360 + deg; } // сохраняем начальную позицию перетаскивания if(startDeg == -1){ startDeg = deg; } // Вычисляем текущий поворот tmp = Math.floor((deg-startDeg) + rotation); // Проверяем, что текущий поворот // осуществляется в диапазоне от 0 до 359 градусов if(tmp < 0){ tmp = 360 + tmp; } else if(tmp > 359){ tmp = tmp % 360; } // Переключение в положение "выключено" if(options.snap && tmp < options.snap){ tmp = 0; } // Проверяем, что мы находимся в конечном положении; // в данном случае надо блокировать дальнейшее вращение if(Math.abs(tmp - lastDeg) > 180){ return false; } currentDeg = tmp; lastDeg = tmp; knobTop.css('transform','rotate('+(currentDeg)+'deg)'); options.turn(currentDeg/359); }); doc.on('mouseup.rem',function(){ knob.off('.rem'); doc.off('.rem'); // Сохраняем текущее значение rotation = currentDeg; // Отмечаем стартовый угол как неправильный startDeg = -1; }); }); }); }; })(jQuery); Плагин имеет несколько опций, которые можно задавать через объект параметров: snap - число градусов, которые соответствуют переключению в значение ноль; value - начальное положение переключателя (в градусах); turn - возвратная функция, которая вызывается кажд
Теги: переключатель, css3, jQuery
Категория: Уроки CSS
Эффектный переключатель с использованием CSS3 и jQuery
Авторизация в системе
Комментариев: 10 Постов: 7/7 Статей: 370
Эффектный переключатель с использованием CSS3 и jQuery - Уроки CSS - Каталог файлов - Get-Element
Комментариев нет:
Отправить комментарий