Всплывающие подсказки mootools

Иногда для полей формы требуется организовать всплывающие подсказки подсказывающие пользователю, что именно вводить в поле формы.

Для реализации этого в Joomla 1.5! был выбран Mootools 1.2.3 || Mootools 1.2.4, так как эта библиотека используется как "родная", для данной CMS.

Но решение этой задачи исполненное на Mootools 1.2.3 || Mootools 1.2.4, не будет работать в стандартной версии mootools(1.11) которая используется в Joomla1.5 x! Для этого сначало нужно отключить старую версию, и подключить новую(Mootools 1.2.3 || Mootools 1.2.4), подробно описано в статье "Подключаем новый Mootools".

И так определимся с целями. Нам нужно выводить подсказки к полям формы, например формы регистрации в Community Builder, хотя там это уже реализовано на jQuery, нам нужно сделать это немного по другому, с применением эффекта плавного появления и такого же сокрытия подсказки, поэтому отключим стандартные иконки подсказок у формы регистрации в CB.

Элементы формы формируются компонентом CB, и для того чтобы не править код самого компонента, для добавления иконки подсказки в структуру HTML, воспользуемся функиями Mootools для работы c DOM. Это функции создания новых элементов, доступа/получения элемента по ID и классу а также от родителя к дочернему элементу, функции вставки в новый элемент текста сообщения подсказки и очистки этого элемента от текста.

Теперь определимся c DOM структурой, с тем в какие его узлы будут добавлены иконка подсказки и сам блок с текстом подсказки.

Структура данного примера имеет такой вид:

<form id="cbcheckedadminForm"> 
<table id="registrationTable" class="contentpane" border="0">
<tbody><tr id="cbfr_41" class="sectiontableentry1 cbft_predefined"><td class="titleCell">
<label>Имя:</label>
</td><td id="cbfv_41" class="fieldCell">
<input id="name" class="inputbox" type="text" />
</td></tr><tr id="cbfr_50" class="sectiontableentry2 cbft_primaryemailaddress"><td class="titleCell">
<label>Email:</label>
</td><td id="cbfv_50" class="fieldCell">
<input id="email" class="email inputbox" />
</td></tr><tr id="cbfr_42" class="sectiontableentry1 cbft_predefined"><td class="titleCell">
<label>Имя пользователя:</label>
</td><td id="cbfv_42" class="fieldCell">
<input id="username" class="inputbox" type="text" /><span class="cbFieldIcons"> </span>
</td></tr><tr id="cbfr_51" class="sectiontableentry2 cbft_password"><td class="titleCell">
<label>Пароль:</label>
</td><td id="cbfv_51" class="fieldCell">
<input id="password" type="password" /><span class="cbFieldIcons"> </span>
</td></tr><tr id="cbfr_51__verify" class="sectiontableentry2 cbft_password"><td class="titleCell">
<label>Подтвердите Пароль:</label>
</td><td id="cbfv_51__verify" class="fieldCell">
<input id="password__verify" /></td></tr><tr class="cler"><td class="cler" colspan="2">
<input id="sub_reg" class="button" type="submit" value="Регистрация" /></td></tr></tbody>
</table>
</form>
 

Упрощенный вариант, так как нам важна именно структура (для большей наглядности):

<form id="cbcheckedadminForm"> 
<table id="registrationTable" class="contentpane" border="0">
<tbody><tr id="cbfr_41" class="sectiontableentry1 cbft_predefined"><td class="titleCell">
 
 
</td><td id="cbfv_41" class="fieldCell">
<input />
<span class="cbFieldIcons"> </span>
</td></tr><tr id="cbfr_50" class="sectiontableentry2 cbft_primaryemailaddress"><td class="titleCell">
 
 
</td><td id="cbfv_50" class="fieldCell">
<input />
<span class="cbFieldIcons"> </span>
</td></tr><tr id="cbfr_42" class="sectiontableentry1 cbft_predefined"><td class="titleCell">
 
 
</td><td id="cbfv_42" class="fieldCell">
<input />
<span class="cbFieldIcons"> </span>
</td></tr><tr id="cbfr_51" class="sectiontableentry2 cbft_password"><td class="titleCell">
 
 
</td><td id="cbfv_51" class="fieldCell">
<input />
<span class="cbFieldIcons"> </span>
</td></tr><tr id="cbfr_51__verify" class="sectiontableentry2 cbft_password"><td class="titleCell">
 
 
</td><td id="cbfv_51__verify" class="fieldCell">
<input />
</td></tr><tr class="cler"><td class="cler" colspan="2">
<input />
</td></tr></tbody>
</table>
</form>
 

Как видите из исходного кода, Cb использует таблицы вместо того чтобы применить div, ну да ладно задача то у нас другого плана ...
Нам необходимо добавить иконку после каждого поля, как это можно сделать? Ответ прост - нужно вставить ее сразуже после тега который в сою очередь заключен между тегами которые тоже заключены ...


Для начала нам нужно определить событие для объекта Window при наступлении которого будет запущена функция которая выполнит правила преобразования DOM структуры документа.
Этим событием является "domready" - которое указывает на загрузку всей структуры DOM в окно броузера пользователя. То есть преобразования DOM, интерпретатор Java Script выполнит до того как загрузится контент (картинки, флеш, текст и т.п), что нельзя сказать про стандартную функцию Java Script "window.onload".
Данная конструкция имеет такой синтаксис:

window.addEvent('domready', function() {//код функции});

Итак как же мы будем добавлять иконку и контейнер в HTML разметку данной таблицы?
Логика такая - получаем все строки таблицы(массив) и добавляем в каждую строку блок/контейнер с текстом "подсказки", а также в каждую вторую ячейку вставляем предварительно созданную иконку.
Выражение будет иметь такой вид:

$$('#registrationTable tr').each(function(el, i){
el.getChildren('td').grab(new Element('a', {'class':'link_info'})).adopt(new Element('div', {'class':'div_info'}).setStyle('opacity', 0));
});

Первая строка данного выражения содержит две последовательные функции, первая возвращает массив(строк) элементов таблицы с определенным ID ("registrationTable"), а вторая осуществляет перебор элементов этого массива в цикле, где el - это значение текущего элемента массива(тоесть в нашем случае это элемент "строка"),
и i - соответственно текущий ключ этого значения в массиве.

Далее во второй строке из текущего элемента массива(строка TR) с помощью функции "getChildren" извлекаются дочерние элементы(ячейки "TD") в последнюю из которой с помощью функции "grab" вставляется новый элемент (тег "a") с определенным классом ("link_info") и после всего этого в сам "Родительский элемент" (у нас это строка TR) вставляется с помощью функции "adopt" новый элемент контейнер (тег "div") c определенным классом ("div_info") которому также задается свойство прозрачности через функцию "setStyle" которой указываются два параметра разделенные запятой - это свойство и его значение ('opacity', 0).

Таким образом в определенные узлы DOM добавляется иконка и контейнер для сообщения. Но контейнер добавленный в строку имеет абсолютную прозрачность и не содержит текст, для его отображения нужно использовать какое-то событие при наступлении которого интерпретатор Java Script выполнит преобразования свойств полученных до этого (window 'domrady') узлов. Для этой цели будет использоваться событие "mouseenter" для ссылки-иконки которую мы добавили на пред-идущем этапе.

При наступлении этого события(когда пользователь наведет на иконку-ссылку мышь) у контейнера изменится свойство прозрачности и он наполнится текстом подсказки для конкретного поля формы. Но также как и показывать этот контейнер при наведении мыши, нам нужно скрывать этот слой при отведении мыши от иконки, для этого будет использовано событие "mouseleave" при котором значение свойства прозрачности устанавливается в первоначальное, то есть равное ноль.

Теперь о том какой же текст будет выводится в контейнере подсказки? Так как этот текст должен быть уникальным для каждого отдельного поля формы то нам необходимо как-то структурированно хранить все эти тексты, идеальный вариант это массив. Выглядит все это так:

var a_info = ["Имя","Email","login","Пароль","Еще раз пароль"];
 
$$(".fieldCell a").each(function(el, i) {//в цикле
 
el.addEvents({'mouseenter': function(e){
  $$('#registrationTable div')[i].set('tween', {
    duration: 1000
  }).tween('opacity', 1).set('html', a_info[i]);},
  'mouseleave': function(e){
    $$('#registrationTable div')[i].set('tween', {
      duration: 550
    }).tween('opacity', 0).set('html', '');
   }
});          
});

Подробнее по строкам: В первой строке формируется массив (с "произвольными ключами"), во второй конструкция которая была описанная выше, здесь обрабатываемым массивом элементов будут все добавленные ссылки-иконки в ячейках с классом "fieldCell", к которым мы присвоим события "mouseenter" и "mouseleave".

В пятой строке указывается событие для текущего элемента массива(ссылки "а"), а в шестой строке начинается описание действий-правил которые должен выполнить интерпретатор Java Script. А именно - получить массив всех элементов div из таблицы с ID "registrationTable" и изменить каждому из них свойства, с предварительным указанием правил изменения значения этих свойств (строка 7), далее в строке 9 указывается что именно изменяется - это прозрачность, она устанавливается в максимальное значение - "1".

Следом за этим с помощью функции "set" в текущий элемент стека добавляется текст из ранее созданного массива, то-есть берется текст из элемента массива с ключом идентичным ключам элементов "a" и "div", таким образом для каждого поля формы через иконку закрепляется индивидуальный текст.

В десятой строчке описывается событие для отведения курсора мыши от иконки, при котором у контейнера с текстом-подсказкой свойства прозрачности устанавливаются в значение "0" (слой опять не виден) строка 14 и сразу-же после этого очищаем элемент от текста-подсказки, заменяя его пустой строкой, это нужно сделать обязательно, иначе с каждым наведением мыши на иконку будит добавлятся текст к уже содержащемуся в контейнере - сообщения будут дублироваться. Ну вроде бы все осталось только добавить CSS:

.link_info{
  float:left; 
  height:13px; 
  width:13px; 
  background:url(../images/info-icon.png) no-repeat right bottom;
  padding: 6px 0 0 8px;
}
.div_info{
  float:left; 
  height:50px; 
  width:210px; 
  padding:10px 0 0 10px;
  position:absolute; 
  left:400px; 
  font-size:12px;
  color:#6a6b66;
}
 

И готовый код примера будет такого вида:

window.addEvent('domready', function() {
 
 $$('#registrationTable tr').each(function(el, i){
  el.getChildren('td').grab(new Element('a', {'class':'link_info'})).adopt(new Element('div'{'class':'div_info'}).setStyle('opacity', 0));
 });
 
 
  var a_info = ["Имя","Email","login","Пароль","Еще раз пароль"];
 
  $$(".fieldCell a").each(function(el, i) {
 
    el.addEvents({'mouseenter': function(e){
      $$('#registrationTable div')[i].set('tween', {
  duration: 1000
      }).tween('opacity', 1).set('html', a_info[i]);
    },
    'mouseleave': function(e){
  $$('#registrationTable div')[i].set('tween', {
    duration: 550
    }).tween('opacity', 0).set('html', '');}
   });
 
  });                
 
});
 

Используемые материаллы:

• Mootools Docs Native Events
• Mootools Docs Native Window
• Mootools Docs Native Hash

В Мой МирИногда для полей формы требуется организовать всплывающие подсказки подсказывающие пользователю, что именно вводить в поле формы.Скопировать в блог

<p><a href="http://www.cleverscript.ru/index.php/javascript/mootools/1-mootools"><img style="margin-right:15px;" align="left" alt="" src="http://www.cleverscript.ru/images/stories/mootools.gif"/></a><a title='Всплывающие подсказки mootools' style='font-size:18px;font-weight:bold;' href='http://www.cleverscript.ru/index.php/javascript/mootools/1-mootools'>Всплывающие подсказки mootools</a><br/>�</p>