Ajax Tabs jQuery

noreply@blogger.com (Unknown) — Fri, 08 Jan 2010 11:37:00 +0000

Данный скрипт объединяет в себе элемент интерфейса jQuery UI в виде вкладок (Tabs) и загрузку содержимого во вкладки посредством Ajax.
Данный скрипт работает следующим образом:
При клике на вкладке (ссылке) в функцию передается атрибут этой ссылки - href, и уже исходя из значения этого атрибута скрипт парсит DOM на наличие контейнера с Id значение которого соответствует значению полученного атрибута из ссылки.
После того как нужный контейнер найден, он проверяется на наличие в нем вложенного HTML или текста и если в нем пусто то вызывается функция Ajax() в которую передается параметр со значением из атрибута href ссылки по которой осуществлен клик.
Также исходя из этого значения в Ajax запросе передается переменная GET, значение которой формируется из итрибута href этой ссылки (по которой произведен клик).
Далее осуществляется сам Ajax запрос который предает переменную "tab"(со значением из атрибута ссылки) и получает ответ от серверного скрипта router.php, в котором в зависимости от значения переменной GET "tab" выполняется определенная часть кода (в данном примере скрипта просто выводится различный текст заключенный в элементы
, вы же можете выполнять любые другие запросы или же подключать другие скрипты, которые например осуществляют SQL запрос на выбор текста статьи из вашей БД).
При старте Ajax запроса отображается картинка "прелоадер" которая установлена у элемента
фоном, и который скрыт от отображения с помощью css (display:none;).
После того как Ajax запрос выполнен данный элемент опять скрывается с помощью функции hide(), и ответ от серверного скрипта помещается в соответствующий контейнер("вкладку").
Основные параметры которые вы возможно захотите изменить по необходимости в функции Ajax запроса:
1)type: - тип метода передачи данных может быть "GET" или "POST";
2)url: - серверный скрипт к которому осуществляется запрос и передаются данные;
3)data: - имя и соответствующее значение передаваемой переменной (переменных может быть несколько, в данном примере только одна);
4)success: - back end функция которая выполнится если запрос будет успешно осуществлен, в качестве параметра принимает ответ серверного скрипта (этим ответом обновляется содержимое нужной вкладки);

Demo
Download

Форма обратной связи на Ajax

noreply@blogger.com (Unknown) — Mon, 04 Jan 2010 20:22:00 +0000

Форма обратной связи на Ajax

Практическое применение технологии Ajax и PHP на примере реализации формы обратной связи для сайта или блога.

Mootools clone()

noreply@blogger.com (Unknown) — Mon, 04 Jan 2010 19:42:00 +0000

Mootools clone()

Клон (англ. clone, от греч. ???? — «веточка») — система, сделанная по образцу другой. Это может быть аппаратное устройство, программа или даже онлайн-сервис. Может означать полную или частичную идентичность свойств.

Под данное описание вполне попадает весьма полезная функция библиотеки Mootools, которая позволяет в прямом смысле слова - "клонировать" узлы DOM в дереве HTML документа.

cleverscript

Ajax Tabs jQuery

Форма обратной связи на Ajax

Mootools clone()