Polygon

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Polygon » Инструменты форума » Спойлеры

Спойлеры

Страница: 1 2 3  

Сообщений 1 страница 10 из 28

1

  • Автор: Butch
  • Администратор
  • Butch

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

http://s4.uploads.ru/0seCv.gif Стандартный спойлерок

Содержимое в любом формате

[html]<div class="morebody" style='color:#000000'><span><div class="morehead" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp;var o=this.getElementsByTagName('img')[0];if(!o._src){o._src=o.src;o.src='style_images/minus.gif';}else{var x=o.src;o.src=o._src;o._src=x;};return false;">http://s4.uploads.ru/0seCv.gif Спойлер-хтмл: картинка + заголовок</div><div class="moretext" style="display: none;"> ---------------Внутри всё стандартно... </div></span></div>[/html]

Код:
<div class="morebody" style='color:#000000'><span><div class="morehead" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp;var o=this.getElementsByTagName('img')[0];if(!o._src){o._src=o.src;o.src='style_images/minus.gif';}else{var x=o.src;o.src=o._src;o._src=x;};return false;">[img]http://s4.uploads.ru/0seCv.gif[/img] [b][i][u]Спойлер-хтмл: картинка + подпись[/u][/i][/b]</div><div class="moretext" style="display: none;"> ---------------Внутри всё стандартно... </div></span></div>

2

  • Автор: Butch
  • Администратор
  • Butch

nkВажная особенность: хтмл-спойлер, в отличие от стандартного, в присутствии локальных скриптов (напр., рождественского снега) РАБОТАЕТ исправно.

Ещё вариант хтмл-спойлера:
Код:
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>summary</title>
 </head> 
 <body>
  <details>
   <summary>заголовок спойлера</summary>
   <p>скрытый текст</p>
  </details> 
 </body> 
</html>

==============================
Клише облегчённого варианта:

Код:
<details><summary>[img]https://forumstatic.ru/files/0012/01/41/16817.gif[/img][color=yellow]=====заголовок
=====[/color]</summary><p>=====скрытый текст=====</p></details>

[html]<details><summary>https://forumstatic.ru/files/0012/01/41/16817.gif=====заголовок спойлера=====</summary><p>=====скрытый текст=====</p></details>

<details><summary>https://forumstatic.ru/files/0012/01/41/47990.gif</summary><p>=====скрытый текст=====http://s3.uploads.ru/uvV4t.gif http://sh.uploads.ru/DVOCq.gif</p></details>[/html]

3

  • Автор: Butch
  • Администратор
  • Butch

nk[html]
https://i.imgur.com/y0K8pLR.png<details><summary>https://i.imgur.com/2Qiy7vE.png</summary>https://i.imgur.com/Qer6Qom.png</details><details><summary>https://i.imgur.com/RdG6hUe.png</summary>https://i.imgur.com/RxXUxSo.png<details><summary>https://i.imgur.com/xXtpR7P.png</summary>https://i.imgur.com/FJECo0c.png</details></details>https://i.imgur.com/WmNo3j0.png[/html]

не используемый код (в хтмл-верх установлен альтернативный)
Код:
<div><style>
/* убрать маркер-стрелку у персонального спойлера */
#p28727summary::-webkit-details-marker,
#p28727 summary::marker {
  display: none;
}
#p28727 summary {
    outline: none;
    cursor: pointer;
    list-style-type: none;
}
#p28727 img {
    margin: 0;
    display: block;
    max-width: 100%;
}
</style></div>

4

  • Автор: Butch
  • Администратор
  • Butch

nk 678

5

  • Автор: Butch
  • Администратор
  • Butch

nk хтмл-спойлер не работает с тегами <html></html>

<html><details><summary>=====заголовок=====</summary><p>=====скрытый текст=====</p></details></html>

--- только с [html][/html]

[html]<details><summary>=====заголовок=====</summary><p>=====скрытый текст=====</p></details>[/html]

6

  • Автор: Butch
  • Администратор
  • Butch
в хтмл-низ
Код:
<!====================================================================>

<!--Скрипт хтмл-спойлера-->
    <script language="JavaScript" type="text/javascript">
    function openClose(id)
    {
    var obj = "";

    // Check browser compatibility
    if(document.getElementById)
    obj = document.getElementById(id).style;
    else if(document.all)
    obj = document.all[id];
    else if(document.layers)
    obj = document.layers[id];
    else
    return 1;

    // Do the magic :)
    if(obj.display == "")
    obj.display = "none";
    else if(obj.display != "none")
    obj.display = "none";
    else
    obj.display = "block";
    }
    </script>
    <!--/Скрипт хтмл-спойлера-->
куда нужно... в пост? Кстати, именно в посте он и не открывается. Здесь коды оставлю, а из админки удаляю
Код:
<!--Шапка спойлера-->
    <div class="spoilertop" onClick="openClose('1')">
    сюда то, что будет отображаться когда спойлер закрыт (можно картинку в обычном хтмл-е)
    </div>
    <!--Содержание спойлера-->
    <div class="spoilerbox" id="1" style="display:none;">
    сюда то, что под спойлером
    </div>
при наведении курсора на заголовок спойлера, курсор становился "лапкой" - в хтмл-верх
Код:
<style>
    .spoilertop {cursor:pointer;}
    </style>

<img src="https://i.imgur.com/ScYQ9gH.gif">

7

  • Автор: Butch
  • Администратор
  • Butch
тоже не работает
Код:
<table><tr>
<td onclick="return changeVisibility('mycolor', this)"><img src="Фоновая картинка (кнопка)" alt="Название_содержимого" /></td></tr></table>
<div class="container" id="mycolor" style="display:none; width:ширинаpx">
<table cellspacing="0">
<tr>
<td>
СОДЕРЖИМОЕ
</td>
</tr>
</table>
</div>

[html]<table><tr>
<td onclick="return changeVisibility('mycolor', this)"><img src="Фоновая картинка (кнопка)" alt="Название_содержимого" /></td></tr></table>
<div class="container" id="mycolor" style="display:none; width:ширинаpx">
<table cellspacing="0">
<tr>
<td>
СОДЕРЖИМОЕ
</td>
</tr>
</table>
</div>[/html]

8

  • Автор: Butch
  • Администратор
  • Butch

[html]<details><summary>хтмл-ный  :flag:  спойлер </summary>

удобный,
довольно компактный 
:yep: </details>[/html]

Код:
[html]<details><summary>[font=Georgia][i][size=20][color=lime]хтмл-ный  :flag:  спойлер [/color][/size][/i][/font]</summary> 
[color=fuchsia][font=Georgia][size=20]
удобный, 
довольно компактный  
:yep: [/size][/font][/color]</details>[/html]

9

  • Автор: Butch
  • Администратор
  • Butch

nk Обычные встроенные спойлеры

https://i.imgur.com/cS5AqSY.gif - картинка-"сворачивалка" в конце большого массива
Код:
 <!-- Свернуть спойлер -->
    <script type="text/javascript">
    function clickSP(i) {setTimeout("$('#spoiler"+i+"').click()",100);}
    $('.quote-box.spoiler-box > div').each(function(i) {
        $(this).attr('id','spoiler'+i).append('<a name="220_'+i+'" style="position:absolute;margin-top:-200px"></a>');
        $(this).next('blockquote').append('<a href="#220_'+i+'" onclick="clickSP('+i+')" style="float:right"> <img src="картинка"/></a>');
    });
    </script>
в спойлере для текста работает

контент

в спойлере для медиа НЕ РАБОТАЕТ

10

  • Автор: Butch
  • Администратор
  • Butch
Deff написал(а):

Пробуйте в начало кода HTML со спойлером:

Код:
<style>
  summary:before{
   content: " ";
   position:relative; 
   z-index:2;
   display:inline-block;
   width:16px;
   height:16px;
   margin:3px -12px -3px 12px;
   /*outline:red solid 1px;*/
   background: url(https://forumstatic.ru/files/0012/d8/04/46693.png);
  }
</style>

nk

Deff написал(а):

Pasteur
Обрамлять  в теги [html][/html] надо всю конструкцию, а не отдельно тот код что я дал и отдельно спойлер!

Страница: 1 2 3  

Вы здесь » Polygon » Инструменты форума » Спойлеры

Рейтинг форумов | Создать форум бесплатно