prowebber.ru - Тут есть все для настоящих вебмастеров

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Всё для вебмастера » Web » Скрипты » Плагин jQuery для указания важных элементов страницы

Плагин jQuery для указания важных элементов страницы


Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
У нас вы можете скачать бесплатно Плагин jQuery для указания важных элементов страницы.


Плагин jQuery для указания важных элементов страницы


Веб дизайнеры всегда находятся в сложной ситуации – им нужно построить прекрасный интерфейс, который одновременно будет интуитивно понятным. Но, не смотря на усилия, веб приложение может быть сложным в использовании для новичка. Одним из решением проблемы может стать некое подобие тура по основным функциям системы. Другим - встраивание визуальных указателей в дизайн интерфейса.

В данном уроке мы сделаем плагин 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 для указания важных элементов страницы


Как использовать:
Для использования плагина 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)

Скачать: Z demo_1254.rar Размер: 87.25 Kb, скачали 90 раз
Просмотреть Demo: смотреть

Спасибо за внимание!


+1
Просмотры: 5190 VIP ProWebber | Комментарии (7)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1Cresis

  • 30 сентября 2011 14:01
  • Регистрация: 18.07.2011
  • ICQ: --
  • Комментариев: 269
Спс отличный урок!

0

#2AvAtAr

  • 30 сентября 2011 15:26
  • Регистрация: 15.05.2010
  • ICQ: 91477666
  • Комментариев: 203
плагин супер давно прикрутил к себе на сайт, для гостей

--------------------

0

#3adamantis

  • 30 сентября 2011 19:23
  • Регистрация: 11.09.2010
  • ICQ: 433009088
  • Комментариев: 107
AvAtAr, я когда на ps-avatar после обновления зашел подумал, что это в опере замена курсора не работает, а это стрелка, которая направляет на кнопку регистрации...... dash

0

#4pushok

  • 2 октября 2011 18:57
  • Регистрация: 16.01.2011
  • ICQ: --
  • Комментариев: 11
где то я это видел... а точно! наверно здесь
http://ruseller.com/lessons.php?rub=32&id=1254

0

#5Starkby

  • 5 октября 2011 18:39
  • Регистрация: 14.02.2011
  • ICQ: --
  • Комментариев: 7
pushok

Да нагло спёрли с руселлера, попов будет негодовать *FaceTRoll*

0

#6reset86

  • 12 октября 2011 00:35
  • Регистрация: 23.10.2010
  • ICQ: --
  • Комментариев: 105
Starkby, да Попову пофиг, всё равно они всё переводят с забугорных сайтов.

--------------------

0

#7aodhan-rch

  • 16 января 2012 13:56
  • Регистрация: 16.01.2012
  • ICQ: --
  • Комментариев: 34
слишком навязчиво. не думаю что посетителям сайта понравится что их направляет какая-то стрелочка

--------------------

0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Max-energy.top - Заработок на электросчетчиках;)

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

Последние комментарии:

Искать людей

Ваши переписки