Javascript: Всплывающие подсказки без jQuery

Javascript: Всплывающие подсказки без jQuery

Нынче в свете веяний WEB 2.0 стало модным добавлять на сайты всякие "фишки". Реализуются они, как правило посредством JavaScript библиотек. И попросила моя программерская душа сотворить чего нибудь такого вэбдванольного на JavaScript, но без использования какой либо библиотеки, на чистом, так сказать языке. И вот в процессе моего обучения этому удивительному языку родил я на свет такой скрипт: показывает он подсказки в облачке, при наведении на тот, или иной элемент. Аналог JQuery tooltip или tip — не помню точно.

Скрипт реализован автономным модулем, кроме своего имени не добавляет в глобальную область ни каких других переменных, неплохо сжимается компрессором и судя по тестам sIEve — память через него в IE6 не утечёт.

Инструкция: Нужно просто вызвать функцию подсказки, как конструктор, передав ей следующие параметры:

  1. Обязательный. Глобальный контекст или в браузере ссылку на объект window.
  2. Обязательный. NodeList элементов ( например getElementsByTagName("DIV") ), или ссылку на элемент, на котором нужно выводить подсказку ( например getElementById("tip-div") ).
  3. Необязательный. Объект с настройками стилей вроде того: 
    {background : "yellow", border : "solid 1px green"}
  4. Необязательный. Объект с настройками смещения облака по оси 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;

};

 

Возможно Вас заинтересуют эти материалы

Javascript выпадающий список

Часто на форумах втречаются вопросы как сделать динамический Javascript выпадающий список? Да ещё с возможностью

Javascript динамическая html таблица

Понадобилось мне в одном проекте на днях сделать html таблицу, которую бы выводил серверный php

Свои события или observer на Javascript

В этой статье, я по сути "убил двух зайцев" - Написал интересный и полезный Javascript