VPF::Скрипты для сокрытия слоев - Форум программистов

martin

Дата 29.10.2004, 17:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 29.10.2004

Репутация: нет
Всего: нет

Помогите разобраться.

На странице слои, по умолчанию скрытые. При клике на линк "Показать" запускается скрипт:

Код

<!-- 
function putElem(elemId) 
{var t=document.getElementById(elemId); 
t.style.display= "block";} 

function removeElem(elemId) 
{var t=document.getElementById(elemId); 
t.style.display= "none";}
// -->

Действие:

Код

<A onclick="putElem('layer1'); return false;" href="">Показать</A> 
<DIV class="hide" id="layer1"> 
<P>текстекстекст. 
</DIV>

Слой layer1 открылся.

Еще есть слой 2, слой 3, 4, ... 12. Все определяются по номерному id.

Чтобы закрыть слой, я использую функцию removeElem: <a href="" onClick="removeElem('layer1'); return false;">Спрятать</a>

Слой layer1 закрылся. То же и слой 2, 3, ...

Задача 1
При открытии слоя - спрятать линк "Показать". С глаз долой.

Как ее решить?
Можно положить линк "Показать" в контейнер <div id="layer0">, и к событию onclick добавить layer0.style.display="none".

Действие:

Код

<A onclick="putElem('layer1'); return false;" href="">
<div id="layer0">Показать</div> 
<DIV id="layer1"> 
<P>текстекстекст. 
</DIV>

Но это сработает, если на странице только один слой. А у меня их, предположим, три. Добавлять к событию onclick layer[порядковый номер].style.display="none" - ошибочно (убедился).

Подсказали добрые люди: функция принимает 2 значения - id слоя который надо спрятать и id слоя который надо показать. И больше подсказывать не стали.

Как это написать? Как будет выглядеть скрипт?

Задача 2
На другой странице ситуация со слоями в тексте повторяется. Но здесь было бы намного удобнее, если бы слой появлялся и прятался при клике на одном и том же линке - "Подробнее", например.

Как это осуществить?

Это сообщение отредактировал(а) martin - 29.10.2004, 18:50

Step

Дата 29.10.2004, 17:49 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 5151
Регистрация: 26.9.2002
Где: дурдом.UA

Репутация: нет
Всего: 25

Цитата(martin @ 29.10.2004, 17:34)

Подсказали добрые люди: функция принимает 2 значения - id слоя который надо спрятать и id слоя который надо показать. И больше подсказывать не стали.

у меня риализована функция которая принимает слой

--------------------

- Дурак учится на своих ошибках, умный на чужих.
- умные учатся у дураков

sergejzr

Дата 29.10.2004, 17:55 (ссылка)

(нет голосов)

Загрузка ...

Un salsero
Group Icon

Профиль
Группа: Админ
Сообщений: 13285
Регистрация: 10.2.2004
Где: Германия г .Ганновер

Репутация: 10
Всего: 360

А вот примерное решение второго вопроса

Код

function show_hide_Elem(elemId)
{
var t=document.getElementById(elemId);
t.style.display== "block"?t.style.display="hide":t.style.display="block";
}

На форуме предусмотрена подсветка кода. Вы ей не воспользовались. Сообщите пожалуйста, какие трудности у вас возникли по этому поводу

Пожалуйста, соблюдайте правила форума

один топик - один вопрос

--------------------

Me.
FB.
LinkedIn.
ORCID.
YT.

martin

Дата 29.10.2004, 18:52 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 29.10.2004

Репутация: нет
Всего: нет

sergej.z
стормозил

понял, отныне только онтоп.

благодарю, иду пробовать.
думать иду.

martin

Дата 29.10.2004, 22:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 29.10.2004

Репутация: нет
Всего: нет

Step
Спасибо. Я успешно не разобрался. Знаний мало.

sergej.z Итак:

Код

<script type="text/javascript">
<!--
function show_hide_Elem(elemId)
{
var t=document.getElementById(elemId);
t.style.display== "block"?t.style.display="hide":t.style.display="block";
} 
// -->
</SCRIPT>

<a href="" onClick="show_hide_Elem('layer1'); return false;">Подробности</a>.

<div id="layer1"> (по умолчанию скрытый)

<p>Пару слов о серьезном.
</div>

Нужно, чтобы при клике на "Подробности" слой layer1 появлялся, а при повторном клике - прятался обратно.

В Опера7:
слой открывается, и обратно закрываться не желает. И тишина.

В ИЕ6:
открываю файл из C:\Documents and Settings\user\My Documents\about.html

Линк, обрабатываемый этой функцией, ведет в никуда. Точнее - указывает прямиком на file:///C:/Documents%20and%20Settings/user/My%20Documents/

Жмем раз - слой открылся.
Жмем второй раз - и в браузере... показывается содержимое C:\Documents and Settings\user\My Documents

:angry:

Что делать?

sergejzr

Дата 29.10.2004, 23:26 (ссылка)

(нет голосов)

Загрузка ...

Un salsero
Group Icon

Профиль
Группа: Админ
Сообщений: 13285
Регистрация: 10.2.2004
Где: Германия г .Ганновер

Репутация: 10
Всего: 360

Вот, посмотрите

Это ессно не готовое решение

Код


<html>
<head>

<title>VPF::Форум программистов Vingrad</title>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
<script type="text/javascript">
<!--
function show_hide_Elem(elemId)
{
var t=document.getElementById(elemId);
t.style.visibility=="hidden"?t.style.visibility="visible":t.style.visibility="hidden";
}
// -->
</SCRIPT>


<a id="MyControl" onClick="show_hide_Elem('layer1');"><u>Подробности</u></a>.

<div id="layer1">

<p>Пару слов о серьезном.
</div>

</body></html>

--------------------

Me.
FB.
LinkedIn.
ORCID.
YT.

Alx

Дата 1.11.2004, 11:41 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

вот решение первого вопроса:

Код


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
<script>
function showHideFunc(act,obj,but)
{if (act == "show")
{document.getElementById(obj).style.display = "block";
window.event.srcElement.style.visibility = "hidden";
document.getElementById(but).style.visibility = "visible";
}
else
if (act == "hide")
{document.getElementById(obj).style.display = "none";
window.event.srcElement.style.visibility = "hidden";
document.getElementById(but).style.visibility = "visible";
}
}
</SCRIPT>
<basefont face="Verdana" size="2">
<a id="lnk1show" href="#" onclick="showHideFunc('show','div1','lnk1hide');">Показать</a> | <a id="lnk1hide" href="#" onclick="showHideFunc('hide','div1','lnk1show');">Спрятать</a>
<div id="div1" style="display:none;background:white;">
Первый слой
</div>
<br><br>
<a id="lnk2show" href="#" onclick="showHideFunc('show','div2','lnk2hide');">Показать</a> | <a id="lnk2hide" href="#" onclick="showHideFunc('hide','div2','lnk2show');">Спрятать</a>
<div id="div2" style="display:none;background:lightblue;">
Второй слой
</div>
<br><br>
<a id="lnk3show" href="#" onclick="showHideFunc('show','div3','lnk3hide');">Показать</a> | <a id="lnk3hide" href="#" onclick="showHideFunc('hide','div3','lnk3show');">Спрятать</a>
<div id="div3" style="display:none;background:red;">
Третий слой
</div>
</body>
</html>

второго:

Код


<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
<script>
function showHideFunc(obj)
{if (document.getElementById(obj).style.display == "block")
{document.getElementById(obj).style.display = "none";
window.event.srcElement.innerText = "Показать";
}
else
if (document.getElementById(obj).style.display != "block")
{document.getElementById(obj).style.display = "block";
window.event.srcElement.innerText = "Скрыть";
}
}
</SCRIPT>
<basefont face="Verdana" size="2">
<a href="#" onclick="showHideFunc('div1');">Показать</a>
<div id="div1" style="display:none;background:white;">Первый слой</div>
<br>
<a href="#" onclick="showHideFunc('div2')">Показать</a>
<div id="div2" style="display:none;background:lightblue;">Второй слой</div>
<br>
<a href="#" onclick="showHideFunc('div3');">Показать</a>
<div id="div3" style="display:none;background:red;">Третий слой</div>
</body>
</html>

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

Цитата

window.event.srcElement.innerText = "Показать";
window.event.srcElement.innerText = "Скрыть";

и заменив содержимое ссылок с "Показать" на "Подробности".

--------------------

Sardar

Дата 1.11.2004, 21:02 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

ALEXANDRO вместо window.event.srcElement который существует только в IE и Опере лучше передавать сслыку на самого себя(this) или на дочерний тег еще одним аргументом функции. Пиши кросс-браузерно ;-)

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Alx

Дата 2.11.2004, 14:51 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

ок

запомню.

--------------------

martin

Дата 5.11.2004, 12:56 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 29.10.2004

Репутация: нет
Всего: нет

Большое спасибо. Приятный во всех отношениях форум.

Я понял принцип.

О частностях: для пункта два, мне кажется, что целесообразнее решение через (elemId).

Напомню, что по умолчанию слои на странице абсолютно скрыты. Напрочь. Через параметр display. Переписал так:

Код


function show_hide_Elem(elemId)
{
var t=document.getElementById(elemId);
t.style.display=="block"?t.style.display="none":t.style.display="block";
}

Кстати, намного удобнее, если слово "Показать" (в моем случае) действительно является линком (href=""), тогда и title="Показать/Спрятать слой" можно добавить. К onclick="такая-то функция" нужно добавить return false, и все будет в порядке.

Пример:
[/code]

HTML

<a href="" onClick="show_hide_Elem('layer1'); return false;" title="Показать/Спрятать слой">Шашки наголо!</a>.

Sardar

Дата 5.11.2004, 14:35 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Также можно вообще отказатся от якорей и использовать span, что логичнее и не несет побочных эффектов smile

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »