Beliyadm Blog или записки нетрезвого кодера

Рассмотрим один из примеров использования AJAX технологий с использованием стандартного Mootools 1.3, встроенного в Joomla 1.7, на примере формы регистрации — на лету при вводе проверить, свободны ли имя пользователя и email.

Для Joomla 1.5 коллега SmokerMan уже приводил пример, но нам он не подходит по причине другой версии mootools и мы хотим чуть расширить возможности (по этой же причине ни в коем случае (irony) не читайте эту статью http://docs.joomla.org/Ajax_using_MooTools, поскольку авторы сами предупреждают «This article applies to Joomla! 1.5 only as Joomla! 1.6 ships with a later version of MooTools which has a different way of handling Ajax requests.»)

Посмотреть в работе можно здесь — http://beliyadm.rcoi.net/joomla17demo/index.php/using-joomla/extensions/components/users-component/registration-form
Тестовые логины — admin, test
Тестовый email — test@mail.ru
« читать всё »

По мотивам инструкции сообразил на быструю руку бета версию реализации поиска на сайте без ручного ковыряния файлов — ajaxSearchJquery_beta 1.0

Рабочая версия в демонстрации (верхний правый угол сайта)

« читать всё »

Итак, общие аспекты создания поиска по сайту с применением AJAX. В чем суть — при вводе\удалении каждого символа в поле поиска обращаемся к БД и показываем совпадения
Рабочий пример http://www.rcoi.net/beta/ (справа вверху поле поиска)
Автор идеи Marco Kuiper
На деталях останавливаться не буду, кому интересно без проблем разберутся « читать всё »

Представляю на пользу сообществу модуль ajax-чата в режиме shoutbox (небольшого окна), версия 1.0.0 « читать всё »

Запись скорее для себя, дабы не забыть.
Подключаем в админке !Joomla 1.5 (да можно и на фронтенде) всплывающие окна с эффектом (работает на mootools и адаптированном скрипте SqueezeBox)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$header .= "
<script type=\"text/javascript\">
window.addEvent('domready', function() {
SqueezeBox.initialize({});
	$$('a.modal').each(function(el) {
		el.addEvent('click', function(e) {
		new Event(e).stop();
		SqueezeBox.fromElement(el);
		});
	});
});
</script>";
$header .= '<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />';
$mainframe->addCustomHeadTag($header);

И оформляем ссылку

1

<a class="modal" rel="{handler: 'iframe', size: {x: 650, y: 375}}" href="MyLink" title="Link">Link</a>

Банальнейшая вещь в своей приятности — по клику на элемент показать\скрыть содержимое определенного блока. Понадобилось мне сделать такую полезность для большой формы — при отмеченном checkbox дать пользователю возможность выбора определенных параметров. Собственно решение ниже. Понадобится дополнительное включение jquery, весь же остальной код приведен ниже.
[code lang="javascript"]
$(document).ready(function(){
//по умолчанию скрываем DIV
$("#tblview").css("display","none");
// добавляем onclick на checkbox w/id param
$("#param").click(function(){
// If checked
if ($("#param").is(":checked"))
{
//показываем скрытый слой
$("#tblview").show("fast");
} else {
//скрываем его
$("#tblview").hide("fast");
}
});
});
[/code]
[code lang="html"]

[/code]
Пример работы

Palych (зараза такая) спросил, а я и не знал. Потому нашли и фиксируем — кастомизация внешнего вида стандартных тултипов в Joomla 1.0.хх
Собственно на событие
[code lang="html"]onmouseover="return overlib('.$overlibmetadescimg.', BELOW, RIGHT);" onmouseout="return nd();"[/code]
Отрабатывает скрипт includes\js\overlib_mini.js
Что нужно сделать, чтобы изменить оформление (цвета, шрифты etc):
1 — внести изменения в сам файл, переменные типа ol_fgcolor. Код не структурирован, разобраться — ногу сломать
2 — Command Reference от автора скрипта.
P.S. конечно, есть и лучшие скрипты оверлибов, но раз уж нам дан стандартный — пользуем его.

В связи с новым проектом на Joomla 1.5 будем накапливать опыт хаков мосетса, дабы не было ничего забытого.
Итак задача — в описании итема сделать сразу вывод всех картинок превьюшек и добавить на onclick js эффект.
Изначально имеем уже установленный и настроенный Protos LightBox 1.1 Highslide for Joomla 1.5 « читать всё »

По просьбе Sulpher написан модуль вывода товаров текущей категории для Virtuemart с эффектом прокрутки в виде карусели (jcarousellite — Joomla 1.0.хх).

Возможности:

• Показывать модуль в режиме просмотра категории и при просмотре товара (последнее отключается)
• Картинка товара служит ссылкой на его описание (для каждого товара картинка должна быть указана, вариант с отсутствием изображения товара не рассматривался и в разработку не включался)
• Количество выбираемых изображений категории (по умолчанию 0 — все товары текущей категории)
• Возможность автопрокрутки изображений в карусели
• Указание шага прокрутки и скорости в секундах для автопрокрутки
• Возможность отключения загрузки скрипта Jquery, если уже используется на сайте
• По умолчанию стили модуля рассчитаны на 4 изображения, шириной 150px и высотой 114px

Обновления:

• Модуль обновлен до версии 1.0.1 — исправлена ошибка конфликтов Jquery модуля и Mootools функции добавления товара в корзину

Демо здесь — ссылко
Качать здесь
P.S. 18 января добавлены модификации модуля:
— возможность цикличной прокрутки картинок
— подгрузка содержимого на ajax, что не вызывает зависания страницы при первом запуске.
Данные модификации не вошли в официальный релиз, опубликованный на форуме. Лиц заинтересованных прошу в комменты

Дабы сильно не дублироваться, но и не потерять полезные скрипты — ссылко на разные приятные скрипты в специализированном разделе joomlaforum.ru

И снова маленькая, но приятность.
Решил чуть анимировать стандартное меню — сделать плавную смену текста при наведении мышкой (события mouseover и mouseout).
Что для этого потребуется:
1 — jquery
2 — плагин Color Animations (3.7 кБ)
« читать всё »