Сообщения
Данный скрипт объединяет в себе элемент интерфейса 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
