Как создать спойлер на Javascript [Версия для КПК]

Показать полную графическую версию : Как создать спойлер на Javascript

Страниц : [1] 2

Dimonka

28-10-2006, 07:39

Занят разработкой сайта, и возникла такая необходимость:

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

Прошу помощи, как это осуществить
+ желательно, чтобы при открытии html странички в Dreamweaver все спойлеры были развёрнуты, т.к. программ очень много, и так будет быстрее и легче, чем каждую описывать непосредственно в коде

Заранее благодарен

vadimiron

01-11-2006, 01:41

Что то типа такого? здесь (http://www.dynamicdrive.com/dynamicindex5/popinfo2.htm)

Dimonka

02-11-2006, 10:30

Нет, абсолютно нет. после нажатия на название программы вниз (типа выезжающего списка) открывался спойлер !!!!!

mar

02-11-2006, 10:50

Dimonka
прошу прощения, а что означает страшное слово спойлер? =)

Prisoner

02-11-2006, 12:10

mar, респект, я постеснялся спросить :). Лично в моем понимании спойлер это нечто сугубо автомобильное...

vadimiron

02-11-2006, 14:26

Prisoner :)

hasherfrog

02-11-2006, 15:06

В более общем смысле, "спойлеры" - необязательная информация, которая может испортить пользователю впечатление от предстоящей жизни, но которую можно узнать при желании. Например, рассказать человеку краткое содержание фильма/книги == "выдать спойлер".

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

Dimonka, я угадал? :]

XCodeR

02-11-2006, 17:30

свойство css display&visibility

ivank

02-11-2006, 19:21

http://www.artlebedev.ru/tools/technogrette/html/treeview/ По желанию доработать напильником.

Dimonka

02-11-2006, 19:37

А ещё есть что-нибудь по этой теме, Может встречались варианты поэкзотичнее

ivank

02-11-2006, 20:31

Dimonka
А что вас не устраивает в этом варианте? Он прекрасно показывает идею. Дальше уж расширяйте как пожелаете.

Dimonka

03-11-2006, 17:41

Просто интересно
+ тот пример по умолчанию открыт, а мне надо чтобы он по умолчанию был свёрнут

elfoflorien

03-11-2006, 18:13

Dimonka
просто напишите style="visibility: hidden; display: none;" или как там его..

Prisoner

03-11-2006, 18:16

тот пример по умолчанию открыт, а мне надо чтобы он по умолчанию был свёрнут
Dimonka, без доработать напильником не получится, увы. Но это не так уж и сложно - поглядите код приведенного примера и используйте подсказку данную в этом топе. Ну и по аналогии, не все же там открыто :).

asus a9rp

20-07-2012, 23:34

Решил не создавать новую тему.
Доброго всем времени суток! Недавно возникла необходимость создания спойлеров, но я это решил так:
<a id="show_1" onclick="document.getElementById('spoiler_1').style.display=''; document.getElementById('show_1').style.display='none';" class="link1">Открыть спойлер</a>
<span id="spoiler_1" style="display: none">
<a onclick="document.getElementById('spoiler_1').style.display='none'; document.getElementById('show_1').style.display='';" class="link2">Закрыть спойлер</a>
<br>Текст</span><br>
В интернете нашёл :)
Дело вот в чём... Спойлеров довольно много и нужно придумать как закрыть открытый спойлер при открытии другого. Т.е. что бы одновременно могло быть открыто не более одного спойлера.
Простите, если вопрос окажется простейшим... Я только html и css знаю. И то, не на профессиональном уровне.
Заранее благодарен!

Iska

21-07-2012, 00:29

Дело вот в чём... Спойлеров довольно много и нужно придумать как закрыть открытый спойлер при открытии другого. Т.е. что бы одновременно могло быть открыто не более одного спойлера. »
Получаете коллекцию спойлеров, пробегаетесь по ней в цикле, закрываете все спойлеры. Затем уже открываете потребный, с которого пришло событие.

asus a9rp

21-07-2012, 23:27

Я в JavaScript - новичок. Покапавшись в интернете, я смог написать работающий вариант:
<!DOCTYPE html><html><head><title></title></head><body>

<a id="open1" onclick="
document.getElementById('close1').style.display='';
document.getElementById('open1').style.display='none';
document.getElementById('open2').style.display='';
document.getElementById('close2').style.display='none';
" class="link1">Open</a><span id="close1" style="display: none"><a onclick="
document.getElementById('close1').style.display='none';
document.getElementById('open1').style.display='';
" class="link2">Close</a><br>TEXT</span><br>

<a id="open2" onclick="
document.getElementById('close2').style.display='';
document.getElementById('open2').style.display='none';
document.getElementById('open1').style.display='';
document.getElementById('close1').style.display='none';
" class="link1">Open</a><span id="close2" style="display: none"><a onclick="
document.getElementById('close2').style.display='none';
document.getElementById('open2').style.display='';
" class="link2">Close</a><br>TEXT</span>

</body></html>
Это - только для двух спойлеров. А у меня их много... Можно ли это как-то "ужать"?

Iska

22-07-2012, 03:53

asus a9rp, определите в CSS два класса (например, «Hide» и «Show»), различающихся видимостью. Изначально, при загрузке страницы, присвойте всем спойлерам, какие они у Вас там будут, класс «Hide». Обработку всех спойлеров привяжите к одному и тому же событию. При возникновении события проделайте примерно следующее (пишу на VBScript, переделайте на JavaScript):
Sub HighlightAnswer(strElement)
Set objTagDivCollection = document.all.tags("DIV")

If Not IsNull(objTagDivCollection) Then
For Each objTagElement In objTagDivCollection
If objTagElement.className = "Show" Then
objTagElement.ClassName = "Hide"
End If

If objTagElement.id = strElement Then
objTagElement.ClassName = "Show"
End If
Next
End If
End Sub

Если тэгов несколько видов (например ещё SPAN, A и т.п.) — просто постройте из них массив/коллекцию и пройдитесь по ним в цикле, заключив в него содержимое приведённой процедуры.

asus a9rp

26-07-2012, 22:44

Iska, на данный момент получается вот что (с двумя спойлерами):
<style type="text/css">
.show {display: block;}
.hide {display: none;}
</style>

<script type="text/javascript">
function my(){

divs = document.getElementsByTagName("div");
for( var x=0; x < divs.length; x++ ) {
divs[x].className='show';
}

spans = document.getElementsByTagName("span");
for( var x=0; x < spans.length; x++ ) {
spans[x].className='hide';
}

};</script>

<div onclick="my(); document.getElementById('close1').className='show';
document.getElementById('open1').className='hide';" class="show" id="open1">
<a class="link1">Open1</a></div>
<span onclick="my();" class="hide" id="close1"><a class="link2">Close1</a><br>
TEXT1<br></span>

<div onclick="my(); document.getElementById('close2').className='show';
document.getElementById('open2').className='hide';" class="show" id="open2">
<a class="link1">Open2</a></div>
<span onclick="my();" class="hide" id="close2"><a class="link2">Close2</a><br>
TEXT2<br></span>
определите в CSS два класса (например, «Hide» и «Show»), различающихся видимостью. Изначально, при загрузке страницы, присвойте всем спойлерам, какие они у Вас там будут, класс «Hide». »
Есть.
Получаете коллекцию спойлеров, пробегаетесь по ней в цикле, закрываете все спойлеры.»
Есть. Теперь при увеличении количества спойлеров onclick не разрастается. Меня уже всё устраивает :) Спасибо! Но всё же хочется, что бы в onclick отсался только скрипт. Для этого осталось:
Затем уже открываете потребный, с которого пришло событие. »
Сейчас вожусь с этим. Я разобрался, как получить элемент, с которого пришло событие: var t = event.target || event.srcElement С этим t уже можно делать что угодно. Но вот, в чём проблема. Имеется 3 элемента: ссылка открытия спойлера, ссылка закрытия спойлера и содержимое. t - это элемент, с которого пришло событие. Он один. Думаю, как к нему привязать остальные два.

Iska

27-07-2012, 01:02

asus a9rp, в функции обработки события ориентируйтесь, например, на однозначное определение типа элемента, от которого пришло событие, и их взаимное расположение относительно друг друга: т.е. на то, что первый из связанных тэгов у Вас — тэг «div», следующий за ним — тэг «a», следующий за ним — тэг «span». Таким образом, проверяя тип тэга и используя DOM («.previousSibling»/«.nextSibling»), Вы всегда сможете по полученному в функции обработки события event.srcElement получить доступ к двум другим, связанным с ним, тэгам, что позволит избежать Вам написания однотипного кода при тэгах:
document.getElementById('close1').className='show';
document.getElementById('open1').className='hide';
…
document.getElementById('close2').className='show';
document.getElementById('open2').className='hide';
…
document.getElementById('closeN').className='show';
document.getElementById('openN').className='hide';