FL.ru – фриланс сайт удаленной работы №1. Поиск удаленной работы, фрилансеры.

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

Категории: Joomla

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< ?php
//Подключение класса закладок
jimport('joomla.html.pane');
//Представитель класса 
$pane =&amp; Jpane::getInstance();
//Вывод строки tabs-pane с закладками
echo $pane->startPane("tabs-pane");
//Название первой закладки с идентификатором first-tab
echo $pane->startPanel("Закладка №1", "first-tab");
//Вывод данных, которые будут размещаться в закладке№1
echo '<h1>Мы создали первую закладку</h1>';
//Здесь закладка №1 закрывается
echo $pane->endPanel();
//Название второй закладки с идентификатором second-tab
echo $pane->startPanel("Закладка №2", "second-tab");
//Вывод данных, которые будут размещаться в закладке№2
echo '<h1> Закладка №2</h1>';
//Здесь закладка №2 закрывается
echo $pane->endPanel();
//Строка с закладками закрывается
echo $pane->endPane();
?>

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
< !DOCTYPE html>
<html>
<head>
<title>tabs</title>
<!-- Подключается  tabs.js. -->
<script type="text/javascript" src="/tabs.js"></script>
<!-- Подключается  tabs.css. -->
<link rel="stylesheet" type="text/css" href="/tabs.css">
</link></head>
<body>
 
<div id="tabs">
	< !—Список вкладок
	Первая вкладка включена - class="on"
	-->
	<ul id="tabs-ul">
		<li id="li1" class="on"><span class="tab">Первая закладка</span></li>
		<li id="li2"><span class="tab">Вторая закладка</span></li>
		<li id="li3"><span class="tab">Третья закладка</span></li>
	</ul>
	< !—Контент вкладок. div для первой закладки включен - class="mod on"
	-->
	<div id="dd1" class="mod on"><p>Контент первой закладки</p></div>
	<div id="dd2" class="mod"><p> Контент второй закладки </p></div>
	<div id="dd3" class="mod"><p> Контент третьей закладки </p></div>
</div>
 
</body>
</html>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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:
Уже подписались человек
Укажите свой e-mail