JavaScript onclick

aroma · №26

Мужики, может кто-нибудь написать код на основе этого скрипта....
Кнопка1 Кнопка2, Слой1 Слой2. Нажимаю Кнопка1 показывается Слой1, нажимаю Кнопка2, Слой1 исчезает, а на его месте появляется Слой2 и так далее... Это трудно? Если очень, то не надо. Если можно, буду благодарен.

Beregost · №27

Я и так использую в разметке и при решении задачи раскрывающегося меню листы стилей с двумя классами - hide и show.

stoneflash пишет

Добавьте для ссылок стиль
Код:
outline: none;
Точно не помню, но, вроде, так.

спасибо, помогло. Вообще почитав про FF я очень им заинтересовался, ведь он придерживается нормативов, а это значит что следует стремится к тому, чтобы именно в FF всё работало хорошо (тогда я освою именно нормативы и стандарты, что гораздо важнее пропроитарных игрищ). Инструменты, которыми я могу дополнить данный браузер очень помогают мне в процессе разработки и это тоже несомненный плюс.
Теперь начались сложности с Оперой. Там браузер при повторных щелчках по ссылка так и норовит выделить текст ссылки, а мне этого не нужно.

Кстати, решил вопрос с количеством функций - решение оказалось тривиальным, даже удивляюсь как не дошёл до этого сразу. Просто использую теперь одну функцию с переменными, где переменной является id элемента. В итоге у меня одна короткая функция, которая работает правильно где угодно.
Также начались проблемы с Safari от Apple. Они заключаются в кодировке содержимого страницы. Даже не смотря на мета тег:
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
этот браузер упорно отказывается понимать в какой кодировке его следует сразу выводить содержимое .

Отредактировано Beregost (07-02-2009 14:37:36)

piontr · №28

Вопрос оказался актуальным и пришлось сесть за написание кода, хотя этим мне
приходиться заниматься крайне редко. Я не ставил перед собой цель получить
универсальный код обработки кликов для любого браузера. Приведенные коды
следует считать концептуальным подходом, как направление для дальнейших исследований.
Решая эту задачу с использованием DOM, пришлось столкнуться с тем, что IE и эти
стандарты игнорирует (как и многие другие).
Вот эти коды:
<html>
<head>
<title>Пример кода, который прекрасно работает в FF</title>
<link rel="stylesheet" type="text/css" href="ex.css"/>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function oneclick(elem)
{
var x1=elem.parentNode.childNodes;
alert('идет обработка узла '+x1.item(3).textContent);
if (elem.textContent=='+')
{elem.textContent='-'
x1.item(4).className='cl';
x1.item(5).className='op';
}
else
{elem.textContent='+'
x1.item(5).className='cl';
x1.item(4).className='op';
}
}
</script>
<div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел1</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
<div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел2</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
<div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел3</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
<div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел4</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
</body>
</html>

*******************************
<html>
<head>
<title>Пример кода, который прекрасно работает в IE</title>
<link rel="stylesheet" type="text/css" href="ex.css"/>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function oneclick(elem)
{
var x1=elem.parentNode.childNodes;

alert('идет обработка узла '+x1[2].innerHTML);

if (elem.innerHTML=='+')
{elem.innerHTML='-'
x1.item(3).className='cl';
x1.item(4).className='op';
}
else
{elem.innerHTML='+'
x1.item(4).className='cl';
x1.item(3).className='op';
}
}
</script>
<div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел1</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
<div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел2</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
<div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел3</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
<div> <span class="ind" onclick="oneclick(this)">+</span> <span >узел4</span><span class='op'>закрыт</span><span class='cl'>открыт</span></div>
</body>
</html>
**код для файла ex.cpp
span {margin-left:3pt;
}

.ind { cursor:pointer;
}

.op {display:inline;
}

.cl {display:none;
}
******
однако, эти решения связаны с однослойными задачами, что значительно проще
многослойных. Попробуйте организовать обработку кликов в такой
структуре (именно к ним относились мои ранние сентенции)
<div onclick="oneclick(this)"> узел1
<div onclick="oneclick(this)"> узел1.1
<div onclick="oneclick(this)"> узел1.1.1 </div>
<div onclick="oneclick(this)"> узел1.1.2 </div>
</div>
<div onclick="oneclick(this)"> узел1.2
<div onclick="oneclick(this)"> узел1.2.1 </div>
<div onclick="oneclick(this)"> узел1.2.2 </div>
</div>
</div>
Для проведения экспериментов достаточно при щелчке изменить цвет контента
соответствующего div-а и только одного.
Удачи всем на WEB-дорогах!

stoneflash · №29

piontr
А если добавить ещё один элемент?
И вообще не понятно, что этот код делает. Сначала видим три элемента, потом - два, третий пропадает куда-то.
Какую задачу пытались решить?

piontr · №30

stoneflash пишет

piontr
А если добавить ещё один элемент?
И вообще не понятно, что этот код делает. Сначала видим три элемента, потом - два, третий пропадает куда-то.
Какую задачу пытались решить?

Это практически Ваша задача с использованием функции
function showHide(id,textWhenHidden,textWhenVisible)
1.Вместо того, чтобы создавать неоднородность за счет использования id (представьте, что эти структуры генерируются на фазе исполнения, где контролировать id практически невозможно.
2.В исходной задаче сочетание <p> и следующего за ним <span>, мягко выражаясь, не вполне корректно, так как <span> всегда окажется на новой строке после </p>.Поэтому в задаче эти структуры заменены на div, с вложением нескольких spam-ов.
3. Задача которая рассмотрена в примерах может быть сформулирована следующим образом:
Написать код, который работает со структурами, подобными пунктам меню. При этом фиксировать, какой пункт выбран (сообщение alert с контентом этого элемента (не id)) и что с этим пунктом происходит (открыт - закрыт с одновременным изменением + на -).

stoneflash · №31

1.Вместо того, чтобы создавать неоднородность за счет использования id (представьте, что эти структуры генерируются на фазе исполнения, где контролировать id практически невозможно.

Хм. Что за ситуация такая?

2.В исходной задаче сочетание <p> и следующего за ним <span>, мягко выражаясь, не вполне корректно, так как <span> всегда окажется на новой строке после </p>.Поэтому в задаче эти структуры заменены на div, с вложением нескольких spam-ов.

Можно просто заменить название тега на любой другой inline.

Написать код, который работает со структурами, подобными пунктам меню. При этом фиксировать, какой пункт выбран (сообщение alert с контентом этого элемента (не id)) и что с этим пунктом происходит (открыт - закрыт с одновременным изменением + на -).

А кто сказал ссылка открытия\скрытия блоков должна быть в одном контейнере с самим блоком? В вашем примере получается жёсткая привязка. Как только выносим блок из основного меню - код перестаёт работать, так как уже у блоков не один родитель.

зы.
Какой-то странный спорчик вышел Непонятно, что решаем и к чему прийти должны

Полезная информация

№2607-02-2009 00:10:14

Re: JavaScript onclick

№2707-02-2009 14:24:34

Re: JavaScript onclick

№2809-02-2009 10:52:31

Re: JavaScript onclick

№2909-02-2009 11:11:56

Re: JavaScript onclick

№3009-02-2009 12:06:29

Re: JavaScript onclick

№3109-02-2009 15:49:34

Re: JavaScript onclick

Board footer