29 сен 2011
Плагин jQuery для указания важных элементов страницы
Bender Категория: Web-Мастеру » Скрипты
У нас вы можете скачать бесплатно Плагин jQuery для указания важных элементов страницы

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Плагин 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();
});

Так удаляются все указатели и обработчики событий для перемещений курсора мыши.

Готово!
______________________________________________________
Источник урока: https://tutorialzine.com/2011/09/jquery-pointpoint-plugin/
Перевел: Сергей Фастунов (ruseller.com)

Скачивание файлов доступно только зарегистрированным пользователям
Просмотреть Demo: смотреть

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









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
CS 1.6 | 29 сентября 2011 15:32
  • Группа: Посетители |
  • Комментарий: 1 (ссылка)

Воо6ще не понял для чего он нужен 54

Bender | 29 сентября 2011 15:37
  • Группа: Посетители |
  • Комментарий: 2 (ссылка)

Новость для знающих людей! Внимательно читайте!

kartmen | 29 сентября 2011 16:50
  • Группа: Посетители |
  • Комментарий: 3 (ссылка)

Bender,
для знающих людей это можно решить при помощи 2 изображений и пары строчек css кода. А если подумать то можно и проще.

Bender | 29 сентября 2011 16:59
  • Группа: Посетители |
  • Комментарий: 4 (ссылка)

kartmen,
Пожалуйста, опубликуй пример по проще!

wirys | 29 сентября 2011 19:38
  • Группа: Посетители |
  • Комментарий: 5 (ссылка)

Спс есть куда пристроить)

kartmen | 29 сентября 2011 21:29
  • Группа: Посетители |
  • Комментарий: 6 (ссылка)

Bender,

Или вы имели ввиду что то другое??

Bender | 29 сентября 2011 21:45
  • Группа: Посетители |
  • Комментарий: 7 (ссылка)

kartmen,
Внимательно прочтите новость, и посмотрите демо! Сама кнопка тут не причём!!!

kartmen | 29 сентября 2011 22:02
  • Группа: Посетители |
  • Комментарий: 8 (ссылка)

Bender,
Понял!!! Сильно поспешил с выводами!!! Может кому и пригодится? Но все равно помойму это лишнее. Но это лишь моё мнение.

Bender | 29 сентября 2011 22:42
  • Группа: Посетители |
  • Комментарий: 9 (ссылка)

А по моему мнение, это интересный плагин для регистрации, в место всплывающих окон!

КЭП | 30 сентября 2011 19:10
  • Группа: Посетители |
  • Комментарий: 10 (ссылка)

Не вижу тут ничего не понятного=)))

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