Создать ответ 
Настройка спойлера
Автор Сообщение
goldfish Не на форуме
Ефрейтор
*

Сообщений: 11
У нас с: Sep 2015
Сообщение: #1
Question Настройка спойлера
Здравствуйте уважаемый администратор!

Очень понравился ваш сайт, очень много полезной информации.

Пишу с такой проблемой...

Извиняюсь я уже оставил пост в "Гостевой", потом увидел ваш форум)
и так:

мне нужен спойлер и как можно по проще
очень понравился css спйлер
почти подстроил код спойлера под необходимые требования, но осталось одна проблема, не получается сделать отступ вокруг текста в спойлере, вот пример что делаю: _http://igrazona.wen.ru/test.htm

вот мой код Tired

Код:
<!DOCTYPE HTML>

<html>

<head>
<meta charset="utf-8">
  <title>Untitled</title>
  <style type="text/css">

  body {
    background-color: #666666
  }
.spoiler_desc {
    background: #FFEDA3;
    padding: 0px 5px 0px 0px;
    border-radius: 0px 0px 5px 5px;
    margin-top: 11px ; /*размер видимой полоски (заголовок cпойлера)*/
}
.spoiler_desc>p {
    cursor: text;
    color: #000000;
    margin: 0px; /* отступ внизу блока   */
}
.spoiler_close {
    display: none;
    position: absolute;
    padding: 2px;  /* размер второго заголовка после раскрытия спойлера  */
    }
.spoiler_open {
    display: block;
    margin: 1px;  /*отступ между блоками*/
    color: #FFFFFF;
    outline: none;
    position: relative;
    overflow: hidden;
    padding: 2px;  /*размер заголовка спойлера (внутренний отступ)*/
}
.spoiler_close, .spoiler_open {
    height: 27px;
    width: 100%;
    top: 0px;
    left: 0px;
    background: #222222;
    border-radius: 3px 3px 0px 0px;
    text-indent: 0px;
    cursor: default;
    border-bottom: 0px dotted #BFBFBF; /*разделительная полоска*/
    padding-top: 5px
}
.spoiler_close:hover, .spoiler_open:hover { background: #555555; }
.spoiler_open:focus {
    overflow: visible;
    background: #333333; /*отступ в нутри блока*/
    height: auto;
    border-bottom: none;
    padding-top: 10px
}
.spoiler_open:focus .spoiler_close { display: block; }
.spoiler_open:focus:before { display: none; }

.b  { margin: 9px }
</style>
</head>

<body>


<div class="spoiler_open" tabindex="1">Актер возле актера
<div class="spoiler_desc">
  <p><b class="divsp">Актер <b>1@</b> <u>возле актера</u> <b>2@</b>  в радиусе  <b>5.0 5.0</b> ( по xy ) и типом отображения <br>сферы: флаг <b>1</b> [1- Видна, 0- Не видна] </b>
  </p><div tabindex="0" class="spoiler_close">00F2: actor 1@ near_actor 2@ radius 5.0 5.0 sphere 1
</div></div></div>


<div class="spoiler_open" tabindex="1">Актер возле актера
<div class="spoiler_desc">
  <p>Актер <b>1@</b> <u>возле актера</u> <b>2@</b>  в радиусе  <b>5.0 5.0</b> ( по xy ) и типом отображения <br>сферы: флаг <b>1</b> [1- Видна, 0- Не видна]
  </p><div tabindex="0" class="spoiler_close">00F2: actor 1@ near_actor 2@ radius 5.0 5.0 sphere 1
</div></div></div>


</body>

</html>

(комментарии сам сделал Jokingly)
03.09.2015 15:13:55
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #2
RE: Настройка спойлера
Если я Вас правильно понял, то в стиль .spoiler_desc>p нужно добавить свойство padding. Например:
Код:
.spoiler_desc>p {
    cursor: text;
    color: #000000;
    margin: 0px; /* отступ внизу блока   */
    padding: 10px;
}
03.09.2015 22:57:52
Найти все сообщения Цитировать это сообщение
goldfish Не на форуме
Ефрейтор
*

Сообщений: 11
У нас с: Sep 2015
Сообщение: #3
RE: Настройка спойлера
Мдэээ..
Админ СПС! я долго искал этот маргин или паддинг, так и не нашел.
Благодарю, вы настоящий профессионал :D
03.09.2015 23:39:23
Найти все сообщения Цитировать это сообщение
goldfish Не на форуме
Ефрейтор
*

Сообщений: 11
У нас с: Sep 2015
Сообщение: #4
RE: Настройка спойлера
Еще один вопрос, надо как-нибудь задержать спойлер, что бы он не сворачивался при клике, например, на текстовое поле, которое находится в нем.

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

Заранее спасибо.
04.09.2015 13:41:27
Найти все сообщения Цитировать это сообщение
goldfish Не на форуме
Ефрейтор
*

Сообщений: 11
У нас с: Sep 2015
Сообщение: #5
RE: Настройка спойлера
Админ! Ну как это исправить ? Sad
04.09.2015 22:27:23
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #6
RE: Настройка спойлера
Думаю, что ничего не выйдет, т.к. данный спойлер строится на получении и потери фокуса. А если кликнуть по какому-нибудь полю, то фокус переходит к нему и, следовательно, спойлер закрывается.

Советую попробовать скрипт спойлера с плавным открытием на JS. Стили можно будет позаимствовать.
04.09.2015 23:25:48
Найти все сообщения Цитировать это сообщение
goldfish Не на форуме
Ефрейтор
*

Сообщений: 11
У нас с: Sep 2015
Сообщение: #7
RE: Настройка спойлера
Ясно, просо нужен портативный скрипт без привязки JQuery.
05.09.2015 00:12:46
Найти все сообщения Цитировать это сообщение
goldfish Не на форуме
Ефрейтор
*

Сообщений: 11
У нас с: Sep 2015
Сообщение: #8
RE: Настройка спойлера
Здравствуйте!
я все с той же просьбой, есть такой спойлер gtascript.ru/test.htm
В раскрытом спойлере, в заголовке находится поле ввода, при нажатии на него нужно, что бы спойлер не сворачивался, но сворачивался при нажатии на любое другое место спойлера.
Можно как-нибудь перехватить процесс сворачивания?
Может быть с помощью onclick="event.stopPropagation()?
Единственно опять же надо что бы это было не jQuery а в приделах css html и js.
Очень прошу помочь, могу даже заплатить немного, на коше рублей 25 есть.
Просто мне очень нужен этот спойлер =(
10.10.2015 21:16:48
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #9
RE: Настройка спойлера
Элементарно! За это денег не берут. Al

<input onclick="return false;" type="text" value="вот это поле закрывается(" size="30px">
10.10.2015 23:44:20
Найти все сообщения Цитировать это сообщение
goldfish Не на форуме
Ефрейтор
*

Сообщений: 11
У нас с: Sep 2015
Сообщение: #10
RE: Настройка спойлера
пс, вроде норм Smile

Только еще один момент, там идет нумерация, просто у меня будет очень много спойлеров, и каждый нумеровать неудобно.
Было бы лучше, если без нумерации Оо
Есть вот такой еще один спойлер, работает безупречно, и без нумерации, вот только как сделать ему, что бы было два слова открыть и закрыть причем эти два слова, что бы были в самом блоке спойлера вот:

Код:
<HTML>
<HEAD><meta charset="utf-8">
<TITLE>Скрипт</TITLE>
<style type="text/css">
.spoiler {border-radius:7px; border:1px solid blue; background:lavender;}
.spoiler {cursor:pointer; margin:5px 0;}
/*.spoiler:hover {background:lavenderblush;}*/
.spoiler dt:hover {background:lavenderblush; border-radius:12px;}
.spoiler dt {margin:3px; padding:2px 0 5px 9px;}
.spoiler dd {display:none; border-radius:7px; border:1px solid blue;}
.spoiler dd {margin:0 9px 7px 33px; padding:7px; text-align:justify;}
.spoiler dd {background:lavender;}
</style>
<script>

document.onclick=function(ev){//клик где то по документу
var obj=ev?ev.target:event.srcElement;//остальные или ИЕ
//в цикле просматриваем все теги, от тега по которому щёлкнули до тега HTML.
while(obj.parentNode){//если нет, то вышли за пределы HTML
if(obj.className=="spoiler"){break;}//если попался нужный элемент
else{obj=obj.parentNode;}};//иначе ищем дальше
//на выходе из цикла проверяем где вышли
if(obj.className=="spoiler"){
clickSpoiler(obj);
return false;};
//если не спойлер, значит кликнули мимо
closet();
};

function clickSpoiler(el){//клик по dl, dt, dd
var s=el.getElementsByTagName("dd")[0].style.display;
closet();
if(s=="none"||s==""){//открыть по которому кликнули
el.getElementsByTagName("dd")[0].style.display="block";};
};

function closet(){//закрываем все не глядя
var m, k;
m=document.getElementsByTagName("dl");
k=m.length;
while(k--){
if(m[k].className=="spoiler"){
m[k].getElementsByTagName("dd")[0].style.display="none";}};
};

</script>
</HEAD>
<body>

<dl class="spoiler">
<dt>Заголовок<input onclick="event.stopPropagation()" type="text" value="вот это поле закрывается(" size="30px"> </dt>
<dd onclick="event.stopPropagation()">Содержимое спойлера. Здесь может находиться очень длинный текст (например, HTML-код или содержимое файла), который нужно спрятать. Спойлер позволяет не превращать пост в простыню, что улучшает читабельность. Также его можно использовать для того, чтобы не показывалось сразу же нежелательное содержимое (например, картинки из категории «не для слабонервных», «не для детей»). Короче говоря, «у этой штуки 999 назначений, и самое главное — придумать все эти назначения»</dd>
</dl>

<dl class="spoiler">
<dt>Заголовок<input onclick="event.stopPropagation()" type="text" value="вот это поле закрывается(" size="30px"> </dt>
<dd onclick="event.stopPropagation()">Содержимое спойлера. Здесь может находиться очень длинный текст (например, HTML-код или содержимое файла), который нужно спрятать. Спойлер позволяет не превращать пост в простыню, что улучшает читабельность. Также его можно использовать для того, чтобы не показывалось сразу же нежелательное содержимое (например, картинки из категории «не для слабонервных», «не для детей»). Короче говоря, «у этой штуки 999 назначений, и самое главное — придумать все эти назначения»</dd>
</dl>

<dl class="spoiler">
<dt>Заголовок<input onclick="event.stopPropagation()" type="text" value="вот это поле закрывается(" size="30px"> </dt>
<dd onclick="event.stopPropagation()">Содержимое спойлера. Здесь может находиться очень длинный текст (например, HTML-код или содержимое файла), который нужно спрятать. Спойлер позволяет не превращать пост в простыню, что улучшает читабельность. Также его можно использовать для того, чтобы не показывалось сразу же нежелательное содержимое (например, картинки из категории «не для слабонервных», «не для детей»). Короче говоря, «у этой штуки 999 назначений, и самое главное — придумать все эти назначения»</dd>
</dl>



</body>

</HTML>


Единственно onclick="event.stopPropagation()" я сам поставил, что бы не исчезал спойлер.
11.10.2015 00:24:32
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru