Вариант навигации.

Dimitry Wolotko · October 19, 2007

Сейчас сижу с больной головой (болею), думаю над навигацией в админке тех сайтов, что я сейчас делаю (несколько сайтов, админка одна).

Поделился со знакомцем мыслями - он мне сразу кинул (http://www.artlebedev.ru/tools/technogrette/js/tabsheets/) - идея пришлась по вкусу, но код JS раздут - ужас просто, написал свой, посмотрите, мб я что - то из функционала пропустил?

PS - мо? чудо с помощью php вполне можно и динамическим сделать.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
 <title>Untitled</title>
 <style>
 .mon2 {color:black;}
 .mon2 {color:red;}
 </style>
</head>

<body>


<script type="text/javascript" language="JavaScript">
function so2( objName1, objName2, objName3 )
{
oObj1 = document.getElementById( objName1 );
oObj2 = document.getElementById( objName2 );
oObj3 = document.getElementById( objName3 );
oObj1c = document.getElementById( objName1 + "c" );
oObj2c = document.getElementById( objName2 + "c" );
oObj3c = document.getElementById( objName3 + "c" );
oObj1.style.display = "block";
oObj1c.className = "mon3";
oObj2.style.display = "none";
oObj2c.className = "mon2";
oObj3.style.display = "none";
oObj3c.className = "mon2";
}
</script>

<div>
<span class="mon3" id="date2c" onclick='so2( "date2", "date3", "date4" );'>Вкладка 1 |</span>
<span class="mon2" id="date3c" onclick='so2( "date3", "date4", "date2" );'>Вкладка 2 |</span>
<span class="mon2" id="date4c" onclick='so2( "date4", "date2", "date3" );'>Вкладка 3 |</span>
</div>
<div style="display: block;" id="date2">
Содержимое вкладки номер один:

<table border="1">
<tr>
<td>table data</td>
<td>table data</td>

<td>table data</td>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
<td>table data</td>
</tr>
</table>
</div>
<div style="display: none;" id="date3">
Содержимое вкладки номер два:

Аниме убивает ваш мозг!

</div>
<div style="display: none;" id="date4">
Содержимое вкладки номер три:

<h1>труляля</h1>
<h2>труляля</h2>
<h3>труляля</h3>
<h4>труляля</h4>
<h5>труляля</h5>
<h6>труляля</h6>
</div>

</body>
</html>

AKS · October 19, 2007

...код JS раздут - ужас просто...

Если только для IE, то JS можно "сдуть" до минимума (отдавая должное IE):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type='text/css'>
.mon3 {
 color:black;
}
.mon2 {
 color:red;
} 
#date2, #date3, #date4 {
 display:expression((document.getElementById(this.id + 'c') || {})
 .className == 'mon3' ? 'block' : 'none');
}
.none {
 display:none;
}
.block {
 display:block;
}; 
</style>
<script type="text/javascript">

function so2(aThis) {
 var id = arguments.callee.id || 'date2c';
 arguments.callee.id = aThis.id;
 document.getElementById(id).className = 'mon2';
 aThis.className = 'mon3';
};

</script>
</head>
<body>
<div>
<span class="mon3" id="date2c" onclick='so2(this);'>Вкладка 1 |</span>
<span class="mon2" id="date3c" onclick='so2(this);'>Вкладка 2 |</span>
<span class="mon2" id="date4c" onclick='so2(this);'>Вкладка 3 |</span>
</div>
<div class='block' id="date2">
Содержимое вкладки номер один:

<table border="1">
<tr>
<td>table data</td>
<td>table data</td>

<td>table data</td>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
<td>table data</td>
</tr>
</table>
</div>
<div class='none' id="date3">
Содержимое вкладки номер два:

Аниме убивает ваш мозг!
</div>
<div class='none' id="date4">
Содержимое вкладки номер три:

<h1>труляля</h1>
<h2>труляля</h2>
<h3>труляля</h3>
<h4>труляля</h4>
<h5>труляля</h5>
<h6>труляля</h6>
</div>
</body>
</html>

Dimitry Wolotko · October 19, 2007

Ну и зачем мне не кроссбраузерный код?

AKS · October 20, 2007

Ну и зачем мне не кроссбраузерный код?

Добавьте в мою функцию пару строчек для кроссбраузерности. Или

Сейчас сижу с больной головой...

голова до сих пор "больная"?

s0rr0w · October 20, 2007

Как бы это делал я.

Самое первое правило - код одного таба должен быть описан в одном месте. Это улучшает восприятие и уменьшает количество будущих багов. Что это значит? Рассмотрим пример

<div id="tabBox">

<div id="tabSwitchContainer"></div> <!-- <= в этот контейнере будут закладки -->

<div class="tabContent">
 <a href="#" onclick="switchTab(); return false;" class="tabSwitch">Tab 1</a>
 Tab 1 Content
</div>

<div class="tabContent">
 <a href="#" onclick="switchTab(); return false;" class="tabSwitch">Tab 2</a>
 Tab 2 Content
</div>

</div>

Потом создаем простую функцию инициализации нашего таба.

1. Найти контейнер с id="tabBox"

2. Найти контейнер для закладок ( id="tabSwitchContainer");

3. Найти все элементы, у которых среди имени класса встречается tabSwitch (/btabSwitchb/gi)

4. Каждой найденной ссылке присвоить параметр linkedNode, который равен parentNode ссылки. Это нужно для того, чтобы установить связь переключателя с блоком с контентом.

5. Перенести ссылку в контейнер для закладок (appendChild)

6. Функция switchTab находит все элементы, которые имеют в имени класса строку tabContent и присваивают класс hiddenBlock ( display: none ) Для элемента, который равен linkedNode, класс hiddenBlock удаляется.

В чем преимущества данного варианта

- блок монолитный, спокойно навешивается дополнительная логика в одном месте, а не в нескольких.

- не требуется сложные схемы идентификации разлычных блоков. Переключатель работает через присвоенный параметр linkedNode.

Код не привожу специально.

WingedFox · October 20, 2007

Я в сво? время реализовал табы на списках:

http://cms.debugger.ru/test/

AKS · October 21, 2007

Самое первое правило - код одного таба должен быть описан в одном месте. Это улучшает восприятие и уменьшает количество будущих багов.

При такой постановке вопроса первое, что пришло на ум - это вариант с использованием списка определений:

<dl id='some ID'>
 <dt>term 1</dt>
 <dd>description 1</dd>
 <dt>term 2</dt>
 <dd>description 2</dd>
 <dt>term 3</dt>
 <dd>description 3</dd> 
</dl>

Используя известный принцип "разделения содержания и представления" можно получить еще больше преимуществ, ведь сделано главное - создана логически верная (следовательно простая и понятная во всех отношениях) разметка.

s0rr0w · October 22, 2007

Через много лет программирования под HTML я пришел к одной очень простой истине. Все то многообразие тегов практически невостребовано в интерфейсах. Поясню почему. Порой сложность конструкции требует многократного вложения элементов. Порой требуется перенос содержимого с одной части дерева в другую. Все это нивелирует важность логического оформления кода, и банально начинает сводиться к нескольким тегам: DIV, SPAN, A, TABLE (и все запчасти), IMG. Логическая же часть перекладывается на классы.

AKS, в твоем варианте потребуется удалять лишние DT, а вместо них создавать A. Перенести же куском можно только в аналогичный DL. В моем варианте ничего удалять не требуется. Ты выиграешь на логике кода, зато проиграешь в скриптовой части, что создаст усложнение кода. А разбираться в нем через определенное время становится все сложнее и сложнее.

Так что готов поспорить, что предложенные варианты - лучше, удобнее для разработчика.

AKS · October 22, 2007

Порой требуется перенос содержимого с одной части дерева в другую. Все это нивелирует важность логического оформления кода...

А Вам придет в голову попытаться сложную структуру преподнести в виде табов?

AKS, в твоем варианте потребуется удалять лишние DT...

Зачем же удалять? Для того, чтобы что-то скрыть, достаточно использовать css.

Перенести же куском можно только в аналогичный DL.

Да нет, зачем? dl.parentNode.insertBefore(tabs, dl) - возможо как-нибудь так.

В моем варианте ничего удалять не требуется. Ты выиграешь на логике кода...

Об этом я и пишу - выигрыш логической разметки относительно каких-то "костылей".

зато проиграешь в скриптовой части...

Выглядит вызывающе.

...что создаст усложнение кода. А разбираться в нем через определенное время становится все сложнее и сложнее.

На счет усложнения js-кода - это вряд ли. А разбираться должны знающие люди.

...предложенные варианты - лучше, удобнее для разработчика.

Никак не представляется возможным оспаривать ваше мнение (тут вспомнился ваш сценарий, в котором вместо маркированного списка для отображения разделов также используются любимые

). Что тут сказать - удобно так удобно, заставить делать иначе, или хотя бы убедить, я не могу.

Вообще, подавляющее большинство "писателей" Вас поддержит - всем хочется "удобства". Только для достижения этого удобства нужны недюжинные знания. В противном случае в ход идут "подпорки" из всевозможных "костылей". И именно поэтому количество well-formed документов, имеющихся в сети, ничтожно мало.

s0rr0w · October 22, 2007

А Вам придет в голову попытаться сложную структуру преподнести в виде табов?

Не понял вопроса.

Зачем же удалять? Для того, чтобы что-то скрыть, достаточно использовать css.

Удалять нужно хотя бы потому, чтобы уменьшить количество обрабатываемых нод до минимума. Это влияет на скорость работы.

Да нет, зачем? dl.parentNode.insertBefore(tabs, dl) - возможо как-нибудь так.

А в моем случае используется почти любой контейнер и самая примитивная функция appendChild.

Об этом я и пишу - выигрыш логической разметки относительно каких-то "костылей".

Выигрыш как раз нулевой. И чем больше проект, тем минимальнее становится эффект логической разметки.

Выглядит вызывающе.

Хочешь проверить?

На счет усложнения js-кода - это вряд ли. А разбираться должны знающие люди.

Уже на одной задаче будет усложнение. А если задач несколько, и все они работают с данным кодом, то усложнение будет расти в неприличной прогрессии. Чем проще код - тем дешевле. Про разбирательство знающими людьми: ты явно не работал над реально сложными проектами. Особенно над теми, где работало несколько человек.

И именно поэтому количество well-formed документов, имеющихся в сети, ничтожно мало.

Для интерфейсов важно не well-formated, а дешевизна в разработке. Иногда приходится использовать свои атрибуты, которые не проходят валидацию, но с ними проще работать.

Дабы не быть голословным и дальше, предлагаю провести мааленькое соревнование.

Задача: Сделать табулятор, который помимо обычных табов может переключаться селектом. Красивости не нужны. Сугубо функционал.

Принимаешь участие в соревновании?

Dimitry Wolotko · October 22, 2007

Ой, как хорошо, а можно выйгравшую работу я заюзаю?

AKS · October 22, 2007

Для интерфейсов важно не well-formated, а дешевизна в разработке. Иногда приходится использовать свои атрибуты, которые не проходят валидацию, но с ними проще работать.

Стандартная "форумная возня". Один говорит о правильном структурировании данных, другой - совсем о другом, о дешевизне и простоте в разработке (ох уж эта меркантильность!). У одного на уме реализация известного принципа "разделение содержания и представления", другой затыкает собеседнику рот безотносительными фразами, типа: "ты явно не работал над реально сложными проектами" (кстати, это обязательно писать, без этого не хватает аргументов?).

Как в такой ситуации докопаться до истины? А никак!

Принимаешь участие в соревновании?

Да легко, боже мой! Только бесполезно это все...

LokiDi L0ck · October 22, 2007

Только бесполезно это все...

+1

Уже сколько раз обсуждалось - реализация и подход к решению зависит от поставленной задачи и е? требований.

AKS · October 22, 2007

s0rr0w, написал сценарий, и что теперь?

Мой сценарий работает с разметкой, типа:

<dl id='some ID'>
	<dt>term 1</dt>
		<dd>description 1</dd>
	<dt>term 2</dt>
		<dd>description 2</dd> 
</dl>

или:

<div id='some ID'>
	<h1>header 1</h1>
		<div>
			<p>paragraph</p>
			<p>paragraph</p>
		</div>
	<h1>header 2</h1>
		<div>
			<p>paragraph</p>
			<p>paragraph</p>
			<p>paragraph</p>
		</div>
</div>

Для работы сценария достаточно указать идентификатор главного блока и имя элементов, которые будут вроде табов (в примерах это

и ). Как содержимое берется nextSibling этих элементов.

Это все. Сложен ли этот сценарий? Будут ли у Big Guns (ребят, работяющих над очень крупными и дорогостоящими проектами) сложности при работе с такой разметкой? Или, быть может, возникнут проблемы с передачей параметров сценарию? Возможно трудно представить, каким образом применить css-правила к такой разметке?

AKS · October 22, 2007

Ну и где мой challenger? )))))))))))))))))))))))

Выложу-ка я сценарий, пока чего не вышло.

function Tabs(id, n, i) {
	this.id = id;
	this.n = n;
	this.itms = [];
	this.ids = {};
	this.lays = [];
	this.init(i);
};				 

Tabs.prototype.init = function (i) {
	var _ = this, p = '',
		t = document.getElementById(this.id)
					.getElementsByTagName(this.n),
		d = document.createElement('div'),
		a = document.createElement('a'), m, b;
	a.href = '#';
	for (var k = 0, l = t.length; k < l; k++) {
		(m = d.appendChild(a.cloneNode(false)))
			.appendChild((b = t.item(k)).firstChild);
		this.ids[m.firstChild.nodeValue] = this.itms.push(m) - 1;
		(this.lays[k] = this.get(b.nextSibling))
			.style.display = 'none';
		if (k == i) {
			(this.aLay = this.lays[i]).style.display = 'block';
		};
	};
	b.parentNode.parentNode.insertBefore(d, b.parentNode);
	(d.addEventListener || (p = 'on', d.attachEvent))
	(p + 'click', function (e) { _.click(e); }, false);
};

Tabs.prototype.get = function (e) {
	return (e.nodeType == 1) ? e : arguments.callee(e.nextSibling);
};

Tabs.prototype.click = function (e) {
	var t = e.target || e.srcElement,
		i = this.ids[t.firstChild.nodeValue];
	if (typeof i == 'number') {
		this.aLay.style.display = 'none';
		(this.aLay = this.lays[i]).style.display = 'block';   
	};
	e.preventDefault ? e.preventDefault()
					 : e.returnValue = false;
};

Для того, чтобы использовать с разметкой, указанной выше, нужно вставить вслед за блоком с табами вызов конструктора с выражением new. Как я уже писал, в вызов конструктора передается id блока, tagName таба, и номер таба, который должен остаться открытым. Можно так, сразу для двух блоков с табами на странице (можно и для десяти ):

<dl id='tabsBlock'>
	<dt>term 1</dt>
		<dd>description 1</dd>
	<dt>term 2</dt>
		<dd>description 2</dd> 
</dl>
<script type='text/javascript'>
/*<![CDATA[*/ 

new Tabs('tabsBlock', 'dt', 0); 

/*]]>*/
</script>
<div id='tabsBlock2'>
	<h1>header 1</h1>
		<div>
			<p>paragraph</p>
			<p>paragraph</p>
		</div>
	<h1>header 2</h1>
		<div>
			<p>paragraph</p>
			<p>paragraph</p>
			<p>paragraph</p>
		</div>
</div>
<script type='text/javascript'>
/*<![CDATA[*/ 

new Tabs('tabsBlock2', 'h1', 1); 

/*]]>*/
</script>

P.S. Пойду пока прогуляюсь со спокойной душой.

AKS · October 22, 2007

Принимаешь участие в соревновании?

Что-то я не пойму - мне было предложено одному поучаствовать в соревновании? )))))))))))))

Или бремя выношенных "реально сложных проектов" (которое не тяготит меня, поскольку я - нуб) мешает моему оппоненту взять быстрый старт? ))))))))))))))))))))))

s0rr0w · October 22, 2007

Для интерфейсов важно не well-formated, а дешевизна в разработке. Иногда приходится использовать свои атрибуты, которые не проходят валидацию, но с ними проще работать.
Стандартная "форумная возня". Один говорит о правильном структурировании данных, другой - совсем о другом, о дешевизне и простоте в разработке (ох уж эта меркантильность!).

Что есть правильное структурирование данных? Логичесткое представление в HTML? У меня логическое представление перенесено на классы. Смотришь на классы и видишь истинное предназначение данного блока. Чем не правильное структурирование? Ах да, я забыл, правильно списки делать только при помощи UL, OL, DL, и ни-ни использовать что-то другое.

другой затыкает собеседнику рот безотносительными фразами, типа: "ты явно не работал над реально сложными проектами" (кстати, это обязательно писать, без этого не хватает аргументов?).

1. Я тебе не затыкал рот.

2. Аргументов у меня хватит, но вот будут ли мои аргументы для тебя значимы? Или будем и дальше повторять стандартные фразы из стандартных книжек?

Как в такой ситуации докопаться до истины?

Очень просто. Сделать два варианта - один ортодоксальный, при помощи DL, а второй - с полным нарушением принципов HTML. Потом сравнить оба варианта. Я свой выложу последним, чтобы не было копирования идей.

AKS · October 23, 2007

У меня логическое представление перенесено на классы. Смотришь на классы и видишь истинное предназначение данного блока. Чем не правильное структурирование?

Я не писал, что это будет "неправильным структурированием". Вообще, слово "правильный" я употребил вынужденно и в совсем ином контексте. Мне пришлось это сделать тогда, когда Вы завели речь о так называемой "разработке".

Ах да, я забыл, правильно списки делать только при помощи UL, OL, DL, и ни-ни использовать что-то другое.

К написанному выше комментарию добавлю, что я писал: "... удобно так удобно, заставить делать иначе, или хотя бы убедить, я не могу" (можно понимать, как "лепите, как хотите, свои проекты").

Я тебе не затыкал рот.

С какой же тогда целью Вы, уходя от темы, акцентируете внимание на фактах моей творческой биографии? Да они ведь Вам не были известны, не известны до сих пор, и станут известными никогда!

Так что нечего упоминать свои "заслуги перед отечеством", противопостовляя их отсутствию таковых у меня. Пишите по существу!

Аргументов у меня хватит, но вот будут ли мои аргументы для тебя значимы?

Да, агрументы будут значимы. Главное, пишите по сути дела.

Или будем и дальше повторять стандартные фразы из стандартных книжек?

А чем плохи эти фразы и эти книги? Вы хотите что-то перефразировать, или вообще переписать стандартные книги по-своему? Так сделайте это! Все станут читать ваши книги и цитировать ваши фразы.

Очень просто. Сделать два варианта - один ортодоксальный, при помощи DL, а второй - с полным нарушением принципов HTML.

Во-первых, что значит "сделать два варианта"? Один вариант уже готов. Вы разве не увидели?

А во-вторых, замечу, что "ортодоксальный" - не уместная характеристика стандартной разметки.

Я свой выложу последним, чтобы не было копирования идей.

То, что ваш вариант будет "последним", я понял еще вчера. Лучше напишите, когда его можно будет увидеть.

s0rr0w · October 23, 2007

Я тебе не затыкал рот.
С какой же тогда целью Вы, уходя от темы, акцентируете внимание на фактах моей творческой биографии? Да они ведь Вам не были известны, не известны до сих пор, и станут известными никогда!
Так что нечего упоминать свои "заслуги перед отечеством", противопостовляя их отсутствию таковых у меня. Пишите по существу!

Я не акцентировал внимание, я констатировал факт. Можно хоть всю жизнь проработать в команде, но не быть командным работником. Можно всю жизнь наступать на одни и те же грабли, но так и не понять, почему так происходит. Чем больше опыта - тем больше приоритеты смещаются в совершенно другое русло. Это я и указал. Все остальные домыслы - плод воображения.

А теперь вернемся к нашим "баранам"

main.css

body
{
	font-size: 8pt;
	font-family: tahoma;
}

.hiddenBlock { display: none; }


.tabContent
{
	background: #f5f5f5;
	border: 1px solid #ccc;
	padding: 10px;
}

.tabSwitch
{
	text-decoration: none;
	border: 1px solid #ccc;
	border-bottom-width: 0px;
	background: #e5e5e5;
	padding: 0px 5px;
	margin-right: 3px;
}

.superTab
{
	background: #f5f5cc;
}

.activeTab
{
	font-weight: bold;
	background: #ccc;	
}

lib.js

IE = (navigator.userAgent.indexOf("MSIE") != -1);

matchClassName = function (node, className){
	try {
		var re = new RegExp ("b" + className + "b", "gi");
		return ( node.className.match(re)); 
	} catch ( e ) { return }
}


applyClassName = function (node, className, state ){
	try {

		var re = new RegExp ("b" + className + "b", "gi");
		if ( state ) {
			if ( !node.className.match(re) ) node.className += (" " + className); 
		}else{
			node.className = node.className.replace(re, "");
			node.className = node.className.replace(/s+/gi, " ");
		}
	} catch ( e ) {}
}

dispatchEventForElement = function ( node, eventType ) {
	try {

		if(!IE){
			var evt = document.createEvent("MouseEvents");
			evt.initMouseEvent(eventType, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			node.dispatchEvent(evt)
		}else{
			node.fireEvent("on"+eventType);
		}
	} catch ( e ) {}
}


getElementsByClassName = function ( container, className ) {

	var tmpArr = [];
	try {
		var nodeList = container.getElementsByTagName( "*" );
		var i = nodeList.length;
		do {
			if ( matchClassName( nodeList.item( i-1 ), className ) ) tmpArr.push( nodeList.item( i-1 ) );
		} while ( --i );
	} catch ( e ) {};
	return tmpArr;	
}


getInnerText = function ( node ) {
	try {
		if ( IE ) return node.innerText;
		else 
		{
			var range = document.createRange( );
			range.selectNodeContents ( node );
			return range.toString();;
		}

	} catch ( e ) { }	
}

И сам код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Demo</title>

	<script type="text/javascript" src="lib.js"></script>

	<link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>
	<div id="tabBox">

		<div id="tabSwitchContainer"></div>

		<div class="tabContent">
 			<a href="#" onclick="switchTab( this ); return false;" class="tabSwitch superTab"><i>Tab</i> 1</a>
 			Tab 1 Content
		</div>

		<div class="tabContent">
 			<a href="#" onclick="switchTab( this ); return false;" class="tabSwitch activeTab">Tab 2</a>
 			Tab 2 Content
		</div>

	</div>


	<p><select id="linkedSelect" onchange="dispatchEventForElement( this.options[ this.value ].linkedNode, 'click')"><option> </option></select></p>

	<script type="text/javascript">

	<script type="text/javascript">


		tabInit = function ( tabBoxID, tabSwitchContainerID, switchID, activityID, initHandler ) {
			try {
				 var tabBoxNode = document.getElementById( tabBoxID );
				var tabSwitchContainer = document.getElementById( tabSwitchContainerID );
				var switchNodesList = getElementsByClassName ( tabBoxNode, switchID );

				var activeTab = switchNodesList[ 0 ];

				for ( var i = switchNodesList.length; i--; ) {


					switchNodesList[ i ].options = { 
							linkedNode: switchNodesList[ i ].parentNode,
							tabSwitchContainer: tabSwitchContainer,
							switchID: switchID,
							activityID: activityID
					}

					tabSwitchContainer.appendChild ( switchNodesList[ i ] ); 
					if ( matchClassName ( switchNodesList[ i ], activityID ) ) activeTab = switchNodesList[ i ];
				}


				dispatchEventForElement ( activeTab, "click" );

				if ( initHandler ) initHandler ( switchNodesList )

			} catch ( e ) { alert( "Sorry, an error occured." ) }
		}

		switchTab = function ( node ) {
			try {

				if ( !node.options ) {
					do{
						node = node.parentNode;
					} while ( !node.options )
				}

				var opts = node.options;
				var tabSwitchList = getElementsByClassName( opts.tabSwitchContainer, opts.switchID );

				for ( var i=tabSwitchList.length; i--; ) {
					applyClassName ( tabSwitchList[ i ], opts.activityID, tabSwitchList[ i ] == node );
					applyClassName ( tabSwitchList[ i ].options.linkedNode, "hiddenBlock", tabSwitchList[ i ] != node );
				}


			} catch ( e ) { alert( "Sorry, an error occured." ) };
		}			  

		fillInLinkedSelect = function ( nodeList ) {

			var selNode = document.getElementById ( "linkedSelect" );

			selNode.options.length = 0;

			for ( var i = nodeList.length; i--; ) {


				var tmpOption = new Option( getInnerText ( nodeList[ i ] ) , nodeList.length - i - 1 )
				tmpOption.linkedNode = nodeList[ i ];

				selNode.options [ selNode.options.length ] = tmpOption; 
			} 


		} 

		tabInit ( "tabBox", "tabSwitchContainer", "tabSwitch", "activeTab", fillInLinkedSelect );
	</script>

</body>
</html>

P.S. Я реализовал задачу на 100%. Мало того, в моем варианте абсолютно все равно, какие теги будут использоваться.

AKS · October 23, 2007

Я не акцентировал внимание, я констатировал факт.

Я Вас просил не "гадать на кофейной гуще". А Вы наборот, беретесь утверждать, что Вам известны какие-то факты. Решили ко всем прочим своим достоинствам приписать еще и экстрасенсорные способности?

Можно хоть всю жизнь проработать в команде, но не быть командным работником.

Во-первых, в какой именно команде?

А во-вторых, если уж на то пошло, опишите мне то, как выглядит этот среднестатистический "командный работник", чтобы мне было на кого равняться.

Не хватает, все же, конкретики в высказываниях.

Можно всю жизнь наступать на одни и те же грабли, но так и не понять, почему так происходит.

Какие грабли? "Так" - это как, и что "происходит"? О чем вообще речь? Что "произошло"?

Чем больше опыта - тем больше приоритеты смещаются в совершенно другое русло. Это я и указал.

Чей опыт Вы имеете ввиду? Какие именно приоритеты? Что это за "совершенно другое русло"? И что Вы "указали"?

Все остальные домыслы - плод воображения.

Какие домыслы? Чье воображение?

Короче говоря, я мало что понял в этих сумбурных высказываниях.

Я реализовал задачу на 100%. Мало того, в моем варианте абсолютно все равно, какие теги будут использоваться.

Люблю наблюдать, как люди сами себе "ставят оценки"! Зрелище радостное и незабываемое.

Я так не умею, поэтому спрошу у того, кто умеет. Я на сколько процентов реализовал задачу? И есть ли в моем варианте "привязка" к каким-либо тегам? Ну и, если можно, подробней пожалуйста - в чем же все-таки "истинная сила" вашего варианта?

Dimitry Wolotko · October 23, 2007

Господа - что - то этот холивар перерастает в "обмен любезностями" - может хватит?

s0rr0w · October 23, 2007

Dimitry Wolotko, у меня нет холи-вора Я давно уже ни с кем не воюю. Ветряные мельницы давно уже ушли в прошлое.

AKS, итак, командный работник - этот тот работник, который заботится не о том, как выполнить свою работу хорошо, а тот, кто решает задачу так, чтобы было хорошо команде. В чем это выражается? В логике работы компонент, в API, в масштабируемости кода. Возьмем к примеру наши два кода. Мой код намного больше в JS части, но он позволяет делать те вещи, которые не предусмотрены в вашем. Например, я могу повесить на закладку собственный обработчик, не напрягаясь всего лишь дописав нужный JS-код. Как разработчик компоненты ( части ) я не привязан ни к каким тегам, мне достаточно указать имя класса и придерживаться всего лишь одного условия - заголовок таба должнен быть прямым потомком контейнера с содержимым таба. На инициализацию можно повесить любой обработчик, что позволило достаточно просто сделать селект с аналогичными свойствами. Опять же, селект уже является частью кода, поэму его просто стилизировать и работать с ним.

А теперь посмотрите на свой код? Оцените его гибкость и масштабируемость?

А где реализация второй части задания? Я ведь в задании присал "Задача: Сделать табулятор, который помимо обычных табов может переключаться селектом" Именно поэтому я задачу выполнил на 100%, сделав и табулятор, и селект. Кстати, одно из ценных свойств истинно командного разработчика - внимательно и до конца читать задачу. И на 100% ее реализовывать.

Dimitry Wolotko · October 23, 2007

Холивар как раз - таки наблюдается, но уж больно хорошие вещи в копилочку добавляются. Потому прошу только одно - без перехода на личности.

PS - а так же я понял, что мой вариант вс? - таки фиговый =

Zeroglif · October 23, 2007

Можно всю жизнь наступать на одни и те же грабли, но так и не понять, почему так происходит.

Прокомментирую-ка я некоторые грабли в вашем скрипте:

для отсечения IE используется банальный navigator.userAgent.indexOf("MSIE"), то есть любители по-spoof-ить свои юзерагенты заранее идут лесом; метод getElementsByTagName('*') предполагает, что IE ниже шестой версии отдыхает; метасимвол b в регулярном предполагает, что имена классов с дефисами внутри прид?тся выбирать более внимательно; do-while предполагает, что при начальном индексе (i), равном нулю, мы можем уплыть в светлую даль вечного loop-a, и почему именно do, и почему снизу; ноды засоряются ненужными данными, которые легко можно держать снаружи (там прилинкован зачем-то свой же родитель, имя собственного же класса, да болтающийся текст activeTab и т.д.); все функции заведены неявно (не объявлены или без var), что чревато конфликтами в IE (возможное совпадение им?н в глобальном констексте) и вообще это не комильфо, в принципе; очень сомнительна необходимость в нетривиальных и бажных dispatchEvent/fireEvent для такой примитивной задачи, как клик по табу; повсюду натыканы try-catch, но реальная проверка чего-либо вообще не производится;один кусок скрипта во внешнем файле, другой в html, первоначальная инициализация не по загрузке, а по месту скрипта в потоке, обработчики заведены архаично в тегах... и т.д. и т.п., общую логику даже не беру в расч?т...

поэтому я задачу выполнил на 100%

Если стояла задача написать качественный/reuse-ный/командный/кроссбраузерный/масштабируемый код, то вряд ли. А если ещ? и предположить, что это код коммерческий, то тут пахнет выговором от босса, как минимум...

s0rr0w · October 23, 2007

1. Привязка к количеству элементов. Что нужно сделать чтобы было не 3 а 4 вкладки? А если надо будет одну убрать?

2. Код закладок и контента находятся в разных местах. Если нужно будет, чтобы разные компоненты наполняли вкладки, то придется городить дополнительные параметры, чтобы все реализовать красиво. Весь HTML код для вкладки лучше все же хранить в одном месте.

3. Управление через параметр display. Не для всех элементов можно сделать display: block. Это существенно ограничивает гибкость кода.

Советую все же разобраться, как работает вариант AKS и как работает мой. Много хороших идей можно вынести.

sensor · October 23, 2007

Господа!!! У вас все в порядке? Вы вообще тут о чем?

Чего-то в обоих скриптах навигацией для сайта даже не пахнет. Вы сообсна какую именно задачу решали в вашем состязании?

Пока с трудом представляю, где и как это можно применить, ну разве что на оллимпиаде по информатике.

Sign In

Вариант навигации.

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

154 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

и ). Как содержимое берется nextSibling этих элементов.

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information