Веб дизайнеры всегда находятся в сложной ситуации – им нужно построить прекрасный интерфейс, который одновременно будет интуитивно понятным. Но, не смотря на усилия, веб приложение может быть сложным в использовании для новичка. Одним из решением проблемы может стать некое подобие тура по основным функциям системы. Другим - встраивание визуальных указателей в дизайн интерфейса.
В данном уроке мы сделаем плагин jQuery, который поможет привлечь внимание пользователя к определенному элементу страницы. Будет использоваться маленький указатель, который выводится рядом с курсором мыши. Такой приме может быть полезен для указания полей формы, кнопки регистрации или сообщений об ошибках, которые находятся вне поля зрения пользователя.
Как работает плагин:
Ниже приводится код плагина. Он содержит 100 строк с комментариями.
jquery.pointpoint.js
(function($){
// Определяем наш плагин jQuery
$.fn.pointPoint = function(prop){
// Параметры по умолчанию
var options = $.extend({
"class" : "pointPointArrow",
"distance" : 30
},prop);
var pointers = [];
// Если трансформации CSS не поддерживаются, то выходим
if(!$.support.transform){
this.destroyPointPoint = function(){};
return this;
}
this.each(function(){
var findMe = $(this),
point = $('<div class="'+options['class']+'">').appendTo('body'),
offset, center = {}, mouse = {}, props = {}, a, b, h, deg, op,
pointHidden = true, rad_to_deg = 180/Math.PI;
pointers.push(point);
// Вычисляем положение указателя при перемещении курсора мыши
$('html').bind('mousemove.pointPoint',function(e){
if(pointHidden){
point.show();
pointHidden = false;
}
offset = findMe.offset();
// Центр элемента, на который мы указываем
center.x = offset.left + findMe.outerWidth()/2;
center.y = offset.top + findMe.outerHeight()/2;
mouse.x = e.pageX;
mouse.y = e.pageY;
// Мы используем положение курсора мыши и центральную точку
// для построения прямоугольного треугольника.
// h - гипотенуза, или расстояние между двумя точками.
a = mouse.y - center.y;
b = center.x - mouse.x;
h = Math.sqrt(a*a + b*b);
// Вычисляем угол(в радианах),
// указатель надо повернуть на:
deg = Math.atan2(a,b);
// Уменьшаем непрозрачность указателя в зависимости от дистанции до центральной точки
op = 1;
if(h < 50){
op = 0;
} else if(h < 160){
op = (h - 50) / 110;
}
// Перемещаем и вращаем указатель
props.marginTop = mouse.y-options.distance*Math.sin(deg);
props.marginLeft = mouse.x+options.distance*Math.cos(deg);
props.transform = 'rotate('+(-deg*rad_to_deg)+'deg)';
props.opacity = op;
point.css(props);
}).bind('mouseleave.pointPoint',function(){
point.hide();
pointHidden = true;
});
});
this.destroyPointPoint = function(){
// Отсоединяем все обработчики событий
// и удаляем указатель с помощью метода remove()
$('html').unbind('.pointPoint');
$.each(pointers,function(){
this.remove();
});
};
return this;
};
})(jQuery);
При вызове pointPoint() создается обработчик события для перемещения курсора мыши. В нем плагин вычисляет положение и поворот указателя с помощью тригонометрических функций.
Также используется плагин transform.js, который обеспечивает вращения CSS3 в браузерах, которые поддерживают трансформации CSS3 (плагин не работает в IE678).
Как использовать:
Для использования плагина jQuery PointPoint на вашем сайте нужно скопировать папку jquery.pointpoint (находится в папке /assets в архиве с исходниками) в вашу структуру каталогов проекта. Затем нужно включить два js файла и таблицу стилей в код вашей страницы. Смотрите файл index.html из архива с исходниками.
Сам по себе плагин очень прост в использовании. Нужно вызвать его для элемента, на который надо указывать. Плагин автоматически найдет элемент и выведет указатель при движении курсора мыши. Также можно использовать объект аргументов с двумя опциями – “class” и “distance“.
$('#pushButton').pointPoint();
/*
// Вы можете передать аргументы:
$('#pushButton').pointPoint({
"class":"myNewPointer",
"distance":100
});
*/
В выше приведенном коде добавляется указатель на элемент с идентификатором “pushButton“. Аргументы во втором примере устанавливают пользовательский класс для указателя (если вы хотите использовать свой стиль) и помещают его на большей дистанции от курсора мыши. Стиль по умолчанию определен в файле jquery.pointpoint.css.
Когда вы вызываете плагин, он возвращает объект jQuery. Поэтому, вы можете использовать цепочку вызовов. Но есть один недостаток. Объект имеет специальный метод для уничтожения destroyPointPoint():
var pp = $('#pushButton').pointPoint();
$('body').click(function(){
pp.destroyPointPoint();
});
Так удаляются все указатели и обработчики событий для перемещений курсора мыши.
Готово!
______________________________________________________
Источник урока: http://tutorialzine.com/2011/09/jquery-pointpoint-plugin/
Перевел: Сергей Фастунов (ruseller.com)
Скачать:
demo_1254.rar [87.25 Kb] (cкачиваний: 142)
MD5: a36f8825ea83778985dc64a17f700e4c
MD5: a36f8825ea83778985dc64a17f700e4c
Просмотреть Demo: смотреть
Спасибо за внимание!
Главная
