Решил реализовать подсказки в форме регистрации, ибо, совсем "не айс" - когда пользователь указал свои данные и увидел об ошибке только после нажатия кнопки "Вперёд".
Конечно, можно сделать validation мгновенным, но (ИМХО) и это сойдёт.
Вобщем то, пример рабочий, если кому надо - может воспользоваться. Но, у меня есть один очень важный вапрос - о нём, в самом конце.
И так, если наш потенциальный клиент, ставит курсор в поле ввода - справа появляется подсказка к этому полю (эффект fade). Пример:
1). Необходимо обновить файл jquery-1.3.2.min.js. Для этого, качаем с офф-сайта последнюю версию скрипта (на сегодня это jquery-1.5.1.min.js).
Копируем его в папку catalog/view/javascript/jquery и в файле catalog/view/theme/ВАША_ТЕМА/template/common/header.tpl меняем строку:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
На:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.5.1.min.js"></script>
2). Далее, открываем файл catalog/view/theme/ВАША_ТЕМА/template/common/header.tpl и дописываем (перед тегом </head>) этот код:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.poshytip.js"></script>
<script type="text/javascript">
$(function(){
$('#tips').poshytip({
className: 'tips',
showOn: 'focus',
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 5
});
});
</script>
3). Теперь, копируем нашу рамку (фон) для подсказки в папку catalog/view/theme/ВАША_ТЕМА/image/
4). Открываем файл catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css и дописываем стили для подсказки:
.tips {
z-index:1000;
text-align:left;
border:1px solid #c7bf93;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
padding:6px 8px;
min-width:50px;
max-width:300px;
color:#000;
background-color:#fff9c9;
}
.tips .tip-inner {
font:12px/16px arial,helvetica,sans-serif;
}
.tips .tip-arrow-top {
margin-top:-6px;
margin-left:-5px; /* approx. half the width to center it */
top:0;
left:50%;
width:9px;
height:6px;
background:url('../image/tips.gif') no-repeat;
}
.tips .tip-arrow-right {
margin-top:-4px; /* approx. half the height to center it */
margin-left:0;
top:50%;
left:100%;
width:6px;
height:9px;
background:url('../image/tips.gif') no-repeat -9px 0;
}
.tips .tip-arrow-bottom {
margin-top:0;
margin-left:-5px; /* approx. half the width to center it */
top:100%;
left:50%;
width:9px;
height:6px;
background:url('../image/tips.gif') no-repeat -18px 0;
}
.tips .tip-arrow-left {
margin-top:-4px; /* approx. half the height to center it */
margin-left:-6px;
top:50%;
left:0;
width:6px;
height:9px;
background:url('../image/tips.gif') no-repeat -27px 0;
}
5). Открываем файл catalog/view/theme/ВАША_ТЕМА/template/account/create.tpl и в строке (у меня это 21):
<td><input type="text" name="firstname" value="<?php echo $firstname; ?>" />
Добавляем теги для нашей подсказки:
<td><input id="tips" size="30" title="Введите Ваше имя" type="text" name="firstname" value="<?php echo $firstname; ?>" />
Тоже самое, делаем со всеми остальными полями формы - где хотим, что бы появлялась подсказка.(У свойства тега title="ВАШ ТЕКСТ" - пишем то, что хотим видеть).
Всё. Мойжно зайти на страницу регистрации и проверить.
=============================================================================================================
Теперь, самое главное - по поводу данного примера.
Сама подсказка прописана в самом шаблоне create.tpl, что не совсем корректно (а точнее совсем не правильно).
Пробовал (в 5-ом пунке) изменить свойства у тега title="_" на <?php echo $firstname; ?> (к примеру) то подсказка появляется пустая!
Вопрос: почему??? Получается, что скрипт, не может выполнить команды другого скрипта, или как? А это значит, что "мультиязычними" эти подсказки не сделать?
Подскажите, как быть?
tips.zip