Создать ответ 
 
Рейтинг темы:
  • Голосов: 34 - Средняя оценка: 1.29
  • 1
  • 2
  • 3
  • 4
  • 5
Хороший спойлер (прячет вспомогательный текст)
Автор Сообщение
Konstantin Не на форуме
Junior Member
**

Сообщений: 4
Зарегистрирован: 25-10-2011
Рейтинг: 0
Сообщение: #1
Хороший спойлер (прячет вспомогательный текст)
Здравствуйте, уважаемые посетители форума! Smile

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

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

Требования простые:

1. Должен быть текстовый заголовок, при щелчке на который текст раскрывается ровно сверху вниз. При этом не должна появляться справа экрана полоса вертикальной прокрутки и из-за этого смещаться блоки на странице. Или полоса может быть с самого начала, но чтобы блочная верстка никуда не сдвигалась.

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

3. Спойлер должен поддерживать возможность вложения один в другой!!!


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

Жду Вашей помощи.

Заранее спасибо! Smile
25-10-2011 07:37
Найти все сообщения Цитировать это сообщение
Brian Не на форуме
Member
***

Сообщений: 206
Зарегистрирован: 08-07-2008
Рейтинг: 7
Сообщение: #2
RE: Хороший спойлер (прячет вспомогательный текст)
В гугл запрос "скрипт спойлера" - полно ответов.
25-10-2011 10:12
Найти все сообщения Цитировать это сообщение
Konstantin Не на форуме
Junior Member
**

Сообщений: 4
Зарегистрирован: 25-10-2011
Рейтинг: 0
Сообщение: #3
RE: Хороший спойлер (прячет вспомогательный текст)
Я искал в Гугле, причем очень хорошо! Есть там спойлеры. Но того, что подходит под все мои описания, не нашел. Поэтому прошу вас помочь.
25-10-2011 11:09
Найти все сообщения Цитировать это сообщение
Brian Не на форуме
Member
***

Сообщений: 206
Зарегистрирован: 08-07-2008
Рейтинг: 7
Сообщение: #4
RE: Хороший спойлер (прячет вспомогательный текст)
(25-10-2011 11:09)Konstantin писал(а):  Я искал в Гугле, причем очень хорошо! Есть там спойлеры. Но того, что подходит под все мои описания, не нашел. Поэтому прошу вас помочь.

Может быть вы видели на каком нибудь сайте или форуме в действии такой спойлер как вам надо, дайте ссылку.
26-10-2011 23:07
Найти все сообщения Цитировать это сообщение
Konstantin Не на форуме
Junior Member
**

Сообщений: 4
Зарегистрирован: 25-10-2011
Рейтинг: 0
Сообщение: #5
RE: Хороший спойлер (прячет вспомогательный текст)
Везде спойлеры какие-то навороченные. Простого по оформлению, но удовлетворяющего моим требованиям, не нашел. Можно за основу взять вариант №4 отсюда http://my.opera.com/Serega124/blog/2010/...spoilers#1 но доработать под мои требования. Сейчас там спойлер сворачивается на клике мышью вне его поля. А надо, чтобы он сворачивался на клике по надписи "Свернуть", которая должна быть внизу раскрывшегося текста. И надо, чтобы спойлер позволял вкладывать один в один.

Заранее благодарю за помощь. Smile
27-10-2011 09:38
Найти все сообщения Цитировать это сообщение
Konstantin Не на форуме
Junior Member
**

Сообщений: 4
Зарегистрирован: 25-10-2011
Рейтинг: 0
Сообщение: #6
RE: Хороший спойлер (прячет вспомогательный текст)
Вот, нашел подходящий спойлер и приспособил под свои нужды. Но у него есть огромный недостаток, который не позволяет мне использовать такой спойлер - не понимает вложение одного спойлера в другой. Как это можно исправить? А если всё можно упростить и того же результата добиться без яваскрипта, а проще, то я буду только "за".

Код страницы:

В приложении - сама страница, но без CSS, на который она ссылается и который не стал прикладывать, поскольку он для рассмотрения этого спойлара не принципиален.

Код:
<html>
<head>
  <title>Название страницы</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
  <body>
   <div id="main">
     <div id="header">Шапка сайта</div>
     <div id="menu">Меню</div>
     <div id="content">
[b]<script type="text/javascript">
function fade(obj,s,opa) {
        if(s==1) {
        var op=opa+5;
        if(op<=100){
            var ob=document.getElementById(obj);
            if(ob.style.display!="block") {
                ob.style.display="block";
            }
            ob.style.opacity=(op/100);
            if(op<100) {
                setTimeout("fade(\""+obj+"\",1,"+op+")", 20);
                }
            }
        }
        else {
            var op=opa-5;
            var ob=document.getElementById(obj);
            if(op>0){
            
            ob.style.opacity=(op/100);
            setTimeout("fade(\""+obj+"\",0,"+op+")", 20);
            }
            else {
                ob.style.display="none";
                }
        }
    }
</script>
<a href="javascript:fade('cont',1,0);"><p>Развернуть спойлер</p></a>
<div id="cont" style="display:none">
<p>Текст спойлера</p>
<a href="javascript:fade('cont',0,100);">Свернуть спойлер</a>
<hr>
</div>
А тут просто какой-то текст, не относящийся к спойлеру.[/b]
</div>
     <div id="footer"></div>
  </body>
</html>


Прикрепления
.html  1.html (Размер: 1.13 Кб / Загрузок: 253)
28-10-2011 09:22
Найти все сообщения Цитировать это сообщение
Создать ответ 




Пользователи просматривают эту тему: 1 Гость(ей)
Обратная связьSitesCo.ruВернуться к началуВернуться к содержимомуЛёгкий режимСписок RSS