Javascript: Всплывающие подсказки без jQuery
Нынче в свете веяний WEB 2.0 стало модным добавлять на сайты всякие "фишки". Реализуются они, как правило посредством JavaScript библиотек. И попросила моя программерская душа сотворить чего нибудь такого вэбдванольногона JavaScript, но без использования какой либо библиотеки, на чистом, так сказать языке. И вот в процессе моего обучения этому удивительному языку родил я на свет такой скрипт: показывает он подсказки в облачке, при наведении на тот, или иной элемент. Аналог JQuery tooltip или tip - не помню точно.
Скрипт реализован автономным модулем, кроме своего имени не добавляет в глобальную область ни каких других переменных, неплохо сжимается компрессором и судя по тестам sIEve - память через него в IE6 не утечёт.
Инструкция: Нужно просто вызвать функцию подсказки, как конструктор, передав ей следующие параметры:
- Обязательный. Глобальный контекст или в браузере ссылку на объект window.
- Обязательный. NodeList элементов ( например getElementsByTagName("DIV") ), или ссылку на элемент, на котором нужно выводить подсказку ( например getElementById("tip-div") ).
- Необязательный. Объект с настройками стилей вроде того:
{background : "yellow", border : "solid 1px green"} - Необязательный. Объект с настройками смещения облака по оси X и Y типа того:
{ x : 20, y : -20 } - объект должен содержать эти два свойства
Пример использования:
window.onload = function() { // Запускаем подсказки: new Tip( window, document.getElementsByTagName("a"), { borderRadius : "10px", background : "yellow", border : "solid 1px green", color : "green", padding : "10px" }, {x : 20, y : -20} ); }
Конечно скрипт подсказки можно усовершенствовать и добавить к облачку "ножку", но мне не хотелось усложнять его, я думаю вы и сами сможете сделать это, если понадобится. Ещё скрипт жёстко ставит обработчики событий mouseover и mouseout - путём присваивания функций соответствующим свойтсвам напрямую. Поэтому всё же остаётся вероятность конфликтов в этом месте, но всё поправимо, как я уже указывал в одном из предыдущих постов можно сделать "композицию" с объектом который описан здесь. В общем кому потребуется/понравится - пользуйтесь наздоровье.
Скрипт подсказок листинг (он не такой уж большой. В нём больше комментариев):
function Tip(GLOBAL, elements, styles, offset) { // Страховка необязательных аргументов: if (!offset) { offset = {x : 50, y : -10} } if(!styles) { styles = {}; } // Объявляем переменные и зависимости var DOC = GLOBAL.document, length = elements.length, tipDiv, prop, i; // Добавляем html-элемент подсказки: function addTip(element,div,textTip) { // Позиция дожна быть абсолютной: div.style.position = "absolute"; // Перегоняем значения из объекта настроек стилей: for (prop in styles) { if (styles.hasOwnProperty(prop)) { div.style[prop] = styles[prop]; } } // Добаляем элемент подсказку в дерево DOM element.parentNode.appendChild(div); // Добавляем текст в div подсказки // Здесь сделано именно так, что бы избежать // Утечек памяти в IE6 div.appendChild( textTip ); return div; } // Раздаём пирожки (обработчики событий) // @parament element - ссылка на html - элемент. function addHandlers(element) { // Создаём div для подсказки: var div = DOC.createElement("DIV"), // Задаём текст для подсказки - берём его из атрибута title textTip = DOC.createTextNode(element.tempTitle); // Обработчик события наведения мыши: function mouseOver() { tipDiv = addTip(element,div,textTip); // Высчитываем положение облачка: tipDiv.style.top = element.offsetTop + offset.y - tipDiv.offsetHeight + "px"; tipDiv.style.left = element.offsetLeft + offset.x + element.offsetLeft + "px"; } // Обработчик события съезда мыши: function mouseOut() { tipDiv.parentNode.removeChild(tipDiv); tipDiv = null; } // Назначаем обработчики событий: element.onmouseover = mouseOver; element.onmouseout = mouseOut; } // Если elements - это NodeList if (elements.item) { // Проходимся по заданным элементам: for (i = 0; i < length; i += 1) { elements[i].tempTitle = elements[i].title; elements[i].title = ""; addHandlers(elements[i]); } // Иначе работаем дальше с одним элементом: } else { elements.tempTitle = elements.title; elements.title = ""; addHandlers(elements); } // Обнуляем зависимость: DOC = null; };
Информация копипастерам
Внимание! Копирование контента с сайта, возможно только с разрешения администратора. Т.е. Меня! Я скорее всего разрешу Вам это сделать, в обмен на живую ссылку, на статью оригинал.