Функции Mootools store и retrieve

Суббота, 20 Февраль 2010

Небольшая заметка на тему полезных функций Mootools, допустим вам необходимо динамически выводить различные сообщения, например при определенном событии для конкретного узла DOM. Где сохранять этот текст, какой контейнер для данных для этого использовать?

Вариант с атрибутом "title" - если элементом является ссылка, прокатит (документ пройдет валидацию по стандартуW3C), а если это не ссылка и не картинка?

Что если узлом HTML документа являеться блочный элемент DIV? В этом случае контейнером для данных, атрибут "title" не может применяться, исходя из стандартов W3C Консорциума. Как же быть в данном случае? Варианты есть но они не являються эффективными - это создание скрытых слоев и записи текста в комментариях, эти способы плохи тем что создают лишние DOM элементы и увеличивают обьем исходного кода документа.

Для решения этой задачи в библиотеке Mootools предусмотрены две полезные функции, предназначенные специально для этого. Это функция store и retrieve, первая из которых создает произвольный атрибут для элемента и присваивает ему значение (и закрепляет его за этим конкретным элементом по id), а вторая отображает это значение (value)

Пример: store

$('element').store('someProperty', someValue);

Пример: retrieve

$('element').retrieve('someProperty');

При этом сам атрибут может иметь произвольное имя, так как данная функция не изменяет сам DOM, то-есть атрибут не прописываеться в теле элемента! Эта функция желательна еще и тем что скорость работы Java Script приложения увеличивается за счет сокращения манипуляций с DOM документа.

А вот рабочий код примера, для большей наглядности

window.addEvent('domready', function(){
 $('retrieve').addEvent('click', function(){
 $('center').store('title', 'Hellow world');
 $('center').set('text', $('center').retrieve('title'));
 });
});
 

Demo

Download

PS. И не забудьте подписаться на ленту новостей RSS

Добавить комментарий