Файл: Скрипт/js/jquery.tinyTips.js
Строк: 53
<?php
/***********************************************************/
/*                    tinyTips Plugin                      */
/*                      Version: 1.1                       */
/*                      Mike Merritt                       */
/*                 Updated: Mar 2nd, 2010                  */
/***********************************************************/
(function($){  
    $.fn.tinyTips = function (tipColor, supCont) {
        
        if (tipColor === 'null') {
            tipColor = 'light';
        } 
        
        var tipName = tipColor + 'Tip';
        
        /* Установки пользователя
        **********************************/
        
        // Введите разметку для ваших подсказок здесь. Контейнер div должен иметь класс tinyTip и 
        // в нем должен содержаться div с классом "content".
        var tipFrame = '<div class="' + tipName + '"><div class="content"></div><div class="bottom"> </div></div>';
        
        // Скорость проведения анимаций в миллисекундах: 1000 миллисекунд = 1 секуда.
        var animSpeed = 300;
        
        /***************************************************************************************************/
        /* Конец секции установок пользователя - Не редактируйте ниже данной линии, если не хотите измениить функционирование плагина. */
        /***************************************************************************************************/
        
        // Глобальные переменные;
        var tinyTip;
        var tText;
        
        // Когда курсор мыши проходит над элементом, то подсказка выводится на экран
        $(this).hover(function() {
        
            // Вставка разметки для полдсказки в код страницы.
            // Устанавливаем глобальные значения и скрываем подсказку.
            $('body').append(tipFrame);
            var divTip = 'div.'+tipName;
            tinyTip = $(divTip);
            tinyTip.hide();
            
            // Получаем контент подсказки из атрибута title (или предписанного контента) и
            // вставляем его в разметку для текущей подсказки. Примечание: атрибут title используется
            // если не задан другой источник контента.
            if (supCont === 'title') {
                var tipCont = $(this).attr('title');
            } else if (supCont !== 'title') {
                var tipCont = supCont;
            }
            $(divTip + ' .content').html(tipCont);
            tText = $(this).attr('title');
            $(this).attr('title', '');
            
            // Смещения для подсказки подбираются так, чтоды она была центрирована над элементом, но 
            // размещалась так, чтобы не перекрывать элемент.
            var yOffset = tinyTip.height() + 2;
            var xOffset = (tinyTip.width() / 2) - ($(this).width() / 2);
            
            // Получаем координаты элемента с подсказкой и делаем новую копию,
            // так что мы сохраняем оригинал нетронутым.
            var pos = $(this).offset();
            var nPos = pos;
            
            // Добавляем смещение для позиции подсказки
            nPos.top = pos.top - yOffset;
            nPos.left = pos.left - xOffset;
            
            // Устанавливаем для подсказки абсолютное позиционирование и высокое значение z-index, 
            // а затем размещаем ее в нужное место и показываем.
            tinyTip.css('position', 'absolute').css('z-index', '1000');
            tinyTip.css(nPos).fadeIn(animSpeed);
            
        }, function() {
            
            $(this).attr('title', tText);
        
            // Плавно скрываем подсказку, когда курсор мыши перемещается с элемента,
            // и удалаем ее из структуры DOM.
            tinyTip.fadeOut(animSpeed, function() {
                $(this).remove();
            });
            
        });
        
    }
})(jQuery);
?>