Создание закладок в Joomla 1.5.х двумя способами

Категории: Joomla

Пользователям и вебмастерам нравится интерфейс панели Joomla — закладки, которые позволяют скрывают от пользователя ненужные для него данные и показывают ему то, что важно на данный момент времени. Такой интерфейс на практике можно реализовать двумя методами – при помощи PHP и HTML. Первый метод приведен ниже – код с комментариями, который можно применять в скриптах. Комментарии поясняют действие.

< ?php
//Подключение класса закладок
jimport('joomla.html.pane');
//Представитель класса 
$pane =& Jpane::getInstance();
//Вывод строки tabs-pane с закладками
echo $pane->startPane("tabs-pane");
//Название первой закладки с идентификатором first-tab
echo $pane->startPanel("Закладка №1", "first-tab");
//Вывод данных, которые будут размещаться в закладке№1
echo '

Мы создали первую закладку

'; //Здесь закладка №1 закрывается echo $pane->endPanel(); //Название второй закладки с идентификатором second-tab echo $pane->startPanel("Закладка №2", "second-tab"); //Вывод данных, которые будут размещаться в закладке№2 echo '

Закладка №2

'; //Здесь закладка №2 закрывается echo $pane->endPanel(); //Строка с закладками закрывается echo $pane->endPane(); ?>

Чтобы вывести содержимое закладок не в виде таблиц, а в виде так называемого аккордеона, необходимо передать параметр

sliders: $pane =& Jpane::getInstance('sliders');

Второй метод состоит в том, чтобы, имея страницу, иметь возможность для визуального управления блоками с помощью javacsript. Недостаток первого метода – нужно перезагружать страницу, а второй не будет работать с отключенным javacsript в браузере. Однако для кого-то оба эти метода могут быть хорошим решением проблемы отображения закладок. Вывод при помощи HTML – выводим все содержимое страницы, и видимая вкладка определяется значением атрибута class со строкой «on» и таблицей CSS. Следующая вкладка становится видимой при клике на нее при помощи javacsript – снимается атрибут «on» у первой и присваивается второй вкладке, и т.д. HTML-код будет выглядеть таким образом:

< !DOCTYPE html>


tabs







< !—Список вкладок Первая вкладка включена - class="on" -->
  • Первая закладка
  • Вторая закладка
  • Третья закладка
< !—Контент вкладок. div для первой закладки включен - class="mod on" -->

Контент первой закладки

Контент второй закладки

Контент третьей закладки

Дальше выводим содержимое tabs.js, заключительной части кода на языке javascript:

var last;
/* Последняя вкладка */

/* Подключение обработчика documentDown клик левой клавиши мышки*/
addHandler(document,'mousedown',documentDown);

function addHandler(e,event,action){
	if(document.addEventListener)
		//все браузеры, кроме Internet Explorer
		e.addEventListener(event,action,false);
	else if(document.attachEvent)
		// Internet Explorer, кроме остальных браузеров
		e.attachEvent('on' + event,action);
	else e['on' + event] = action;
}

/* Обработчик клика */
function documentDown(e){
	e = e || event;
	var target = e.target || e.srcElement;
	
	if(target.tagName == 'SPAN' 
		&& target.className == 'tab' 
		&& target.parentNode.tagName == 'LI'){
			//Если клика не было - !last, то результат
			//элемент с ID tabs-ul и первый li, который будет
			//last
			if(!last){
				last = getElsByTagName(getElById('tabs-ul'),'li')[0];
			}	
			//Удаление у предыдущего элемента li из класса строчку «on»
			removeClass(last,'on');
			//Из блока с содержимым вкладки удаляем 
			//из класса строчку «on»
			removeClass(getElById(last.id.replace('li','dd')),'on');
			//Установка кликнутой вкладки
			last = target.parentNode;
			// Строка «on» добавляется в класс названия и контента закладки 
			addClass(last,'on');
			addClass(getElById(last.id.replace('li','dd')),'on');
	}
}

//Получение элемента по ID
function getElById(id){
	return document.getElementById(id);
}

//Массив name, внутри e 
function getElsByTagName(e,name){
	return e.getElementsByTagName(name);
}

//Добавление строчки name в класс e
function addClass(e,name,index){
	if(e.nodeType == 1){
		if(index){
			e.className = name;
		}
		else e.className += ' ' + name;
	}
}

//Удаление строки name из класса e
function removeClass(e,name){
	if(name){
		var sentence = new RegExp('\\s*\\b' + name + '\\b','g');
		e.className = e.className.replace(sentence,'');
	}
	else e.className = '';
}




Подпишитесь на рассылку блога
max1net.com: